Partially revert "Add workflow menu button to thread lists"
This reverts commit 1e10d199a6171f88da129505977bf6ae69c2c362.
Reason for revert: we'll use Lit instead of Vue.js.
The following parts have not been reverted:
- The inject_workflows_menubtn string in the
src/static/_locales/en/messages.json file, since it will be used again
in the future, and this might cause the string translations to be
deleted from Pontoon.
- A minor CSS fix for the padding of .TWPT-btn--with-badge in
src/static/css/common/console.css.
Bug: twpowertools:115
Change-Id: I099e06d9964b2a5fb4e43baeef1a8fe07fe52043
diff --git a/src/contentScripts/communityConsole/batchLock.js b/src/contentScripts/communityConsole/batchLock.js
index 87edc6d..86a7057 100644
--- a/src/contentScripts/communityConsole/batchLock.js
+++ b/src/contentScripts/communityConsole/batchLock.js
@@ -1,12 +1,19 @@
import {isOptionEnabled} from '../../common/optionsUtils.js';
-import {addButtonToThreadListActions, removeChildNodes, shouldAddBtnToActionBar} from './utils/common.js';
-
-const lockDebugId = 'twpt-batch-lock';
+import {addButtonToThreadListActions, removeChildNodes} from './utils/common.js';
export var batchLock = {
- shouldAddButton(node) {
- return shouldAddBtnToActionBar(lockDebugId, node);
+ nodeIsReadToggleBtn(node) {
+ return ('tagName' in node) && node.tagName == 'MATERIAL-BUTTON' &&
+ node.getAttribute('debugid') !== null &&
+ (node.getAttribute('debugid') == 'mark-read-button' ||
+ node.getAttribute('debugid') == 'mark-unread-button') &&
+ ('parentNode' in node) && node.parentNode !== null &&
+ ('parentNode' in node.parentNode) &&
+ node.parentNode.querySelector('[debugid="twpt-lock"]') === null &&
+ node.parentNode.parentNode !== null &&
+ ('tagName' in node.parentNode.parentNode) &&
+ node.parentNode.parentNode.tagName == 'EC-BULK-ACTIONS';
},
createDialog() {
var modal = document.querySelector('.pane[pane-id="default-1"]');
@@ -112,7 +119,7 @@
if (isEnabled) {
let tooltip = chrome.i18n.getMessage('inject_lockbtn');
let btn = addButtonToThreadListActions(
- readToggle, 'lock', lockDebugId, tooltip);
+ readToggle, 'lock', 'twpt-lock', tooltip);
btn.addEventListener('click', () => {
this.createDialog();
});
diff --git a/src/contentScripts/communityConsole/main.js b/src/contentScripts/communityConsole/main.js
index f43a25a..5053c38 100644
--- a/src/contentScripts/communityConsole/main.js
+++ b/src/contentScripts/communityConsole/main.js
@@ -10,9 +10,8 @@
// #!endif
import InfiniteScroll from './infiniteScroll.js';
import {unifiedProfilesFix} from './unifiedProfiles.js';
-import Workflows from './workflows/workflows.js';
-var mutationObserver, options, avatars, infiniteScroll, workflows;
+var mutationObserver, options, avatars, infiniteScroll;
const watchedNodesSelectors = [
// App container (used to set up the intersection observer and inject the dark
@@ -124,13 +123,11 @@
}
// #!endif
- // Inject the batch lock and workflow buttons in the thread list if the
- // corresponding options are currently enabled.
- // The order is the inverse because the first one will be shown last.
- if (batchLock.shouldAddButton(node)) batchLock.addButtonIfEnabled(node);
-
- if (workflows.shouldAddThreadListBtn(node))
- workflows.addThreadListBtnIfEnabled(node);
+ // Inject the batch lock button in the thread list if the option is
+ // currently enabled.
+ if (batchLock.nodeIsReadToggleBtn(node)) {
+ batchLock.addButtonIfEnabled(node);
+ }
// Inject avatar links to threads in the thread list. injectIfEnabled is
// responsible of determining whether it should run or not depending on its
@@ -220,7 +217,6 @@
// Initialize classes needed by the mutation observer
avatars = new AvatarsHandler();
infiniteScroll = new InfiniteScroll();
- workflows = new Workflows();
// autoRefresh and extraInfo are initialized in start.js
diff --git a/src/contentScripts/communityConsole/utils/common.js b/src/contentScripts/communityConsole/utils/common.js
index 40bc1fe..ac4db4e 100644
--- a/src/contentScripts/communityConsole/utils/common.js
+++ b/src/contentScripts/communityConsole/utils/common.js
@@ -61,18 +61,6 @@
return clone;
}
-// Returns true if |node| is the "mark as read/unread" button, the parent of the
-// parent of |node| is the actions bar of the thread list, and the button with
-// debugid |debugid| is NOT part of the actions bar.
-export function shouldAddBtnToActionBar(debugid, node) {
- return node?.tagName == 'MATERIAL-BUTTON' &&
- (node.getAttribute?.('debugid') == 'mark-read-button' ||
- node.getAttribute?.('debugid') == 'mark-unread-button') &&
- node.getAttribute?.('debugid') !== null &&
- node.parentNode?.querySelector('[debugid="' + debugid + '"]') === null &&
- node.parentNode?.parentNode?.tagName == 'EC-BULK-ACTIONS';
-}
-
// Returns the display language set by the user.
export function getDisplayLanguage() {
var startup =
diff --git a/src/contentScripts/communityConsole/workflows/components/Overlay.vue b/src/contentScripts/communityConsole/workflows/components/Overlay.vue
deleted file mode 100644
index 304b362..0000000
--- a/src/contentScripts/communityConsole/workflows/components/Overlay.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-import WfMenu from './WfMenu.vue';
-
-export default {
- components: {
- WfMenu,
- },
- data() {
- return {
- shown: false,
- position: [0, 0],
- // TODO: Get real data.
- workflows: [
- {name: 'Move to accounts'},
- {name: 'Mark as spam w/ message'},
- ],
- };
- },
- methods: {
- startWorkflow(e) {
- console.log(e);
- }
- },
-}
-</script>
-
-<template>
- <wf-menu v-model="shown" :position="position" :workflows="workflows" @select="startWorkflow" />
-</template>
diff --git a/src/contentScripts/communityConsole/workflows/components/WfMenu.vue b/src/contentScripts/communityConsole/workflows/components/WfMenu.vue
deleted file mode 100644
index 88528ea..0000000
--- a/src/contentScripts/communityConsole/workflows/components/WfMenu.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-import {Corner} from '@material/menu-surface/constants.js';
-
-export default {
- components: {},
- props: {
- modelValue: Boolean,
- position: Array,
- workflows: Array,
- },
- data() {
- return {
- corner: Corner.TOP_RIGHT,
- };
- },
- emits: [
- 'update:modelValue',
- 'select',
- ],
-}
-</script>
-
-<template>
- <mcw-menu :model-value="modelValue" fixed :anchor-corner="corner"
- :style="{ left: 'unset', right: 'calc(100% - ' + position[0] + 'px)', top: position[1] + 'px' }"
- @update:model-value="$emit('update:modelValue', $event)" @select="$emit('select', $event)">
- <mcw-list-item v-for="wf in workflows">{{ wf.name }}</mcw-list-item>
- </mcw-menu>
-</template>
-
-<style scoped>
-.mdc-list-item {
- /* These styles mimic the Community Console style. */
- font-family: 'Google Sans Text', 'Noto', sans-serif;
- font-size: 14px;
- font-weight: 400;
- height: 40px!important;
-}
-</style>
diff --git a/src/contentScripts/communityConsole/workflows/vma.js b/src/contentScripts/communityConsole/workflows/vma.js
deleted file mode 100644
index 89d291c..0000000
--- a/src/contentScripts/communityConsole/workflows/vma.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// We just import the components needed.
-import {list, menu} from 'vue-material-adapter';
-
-export default {
- install(vm) {
- vm.use(list);
- vm.use(menu);
- },
-}
diff --git a/src/contentScripts/communityConsole/workflows/workflows.js b/src/contentScripts/communityConsole/workflows/workflows.js
deleted file mode 100644
index dc542fa..0000000
--- a/src/contentScripts/communityConsole/workflows/workflows.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import {createApp} from 'vue';
-
-import {isOptionEnabled} from '../../../common/optionsUtils.js';
-
-import {addButtonToThreadListActions, shouldAddBtnToActionBar} from './../utils/common.js';
-import Overlay from './components/Overlay.vue';
-import VueMaterialAdapter from './vma.js';
-
-const wfDebugId = 'twpt-workflows';
-
-export default class Workflows {
- constructor() {
- this.overlayApp = null;
- this.overlayVm = null;
- }
-
- createOverlay() {
- let menuEl = document.createElement('div');
- document.body.appendChild(menuEl);
-
- this.overlayApp = createApp(Overlay);
- this.overlayApp.use(VueMaterialAdapter);
- this.overlayVm = this.overlayApp.mount(menuEl);
- }
-
- switchMenu(menuBtn) {
- if (this.overlayApp === null) this.createOverlay();
- if (!this.overlayVm.shown) {
- let rect = menuBtn.getBoundingClientRect();
- this.overlayVm.position = [rect.left + rect.width, rect.bottom];
- this.overlayVm.shown = true;
- } else {
- this.overlayVm.shown = false;
- }
- }
-
- addThreadListBtnIfEnabled(readToggle) {
- isOptionEnabled('workflows').then(isEnabled => {
- if (isEnabled) {
- let tooltip = chrome.i18n.getMessage('inject_workflows_menubtn');
- let btn = addButtonToThreadListActions(
- readToggle, 'more_vert', wfDebugId, tooltip);
- btn.addEventListener('click', () => {
- this.switchMenu(btn);
- });
- }
- });
- }
-
- shouldAddThreadListBtn(node) {
- return shouldAddBtnToActionBar(wfDebugId, node);
- }
-};