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/package-lock.json b/package-lock.json
index 7723d65..0d40033 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
"version": "0.0.0",
"license": "MIT",
"dependencies": {
- "@material/menu": "^10.0.0",
"@material/tooltip": "^12.0.0",
"async-mutex": "^0.3.2",
"google-protobuf": "^3.19.3",
@@ -17,12 +16,9 @@
"idb": "^6.1.2",
"poll-until-promise": "^3.6.1",
"semver": "^7.3.5",
- "sw-xhr": "^0.0.3",
- "vue": "^3.2.26",
- "vue-material-adapter": "^3.2.3"
+ "sw-xhr": "^0.0.3"
},
"devDependencies": {
- "@vue/compiler-sfc": "^3.2.26",
"copy-webpack-plugin": "^9.0.1",
"css-loader": "^6.2.0",
"json5": "^2.2.0",
@@ -30,8 +26,6 @@
"sass": "^1.38.1",
"sass-loader": "^12.1.0",
"style-loader": "^3.2.1",
- "vue-loader": "^17.0.0",
- "vue-style-loader": "^4.1.3",
"webpack": "^5.44.0",
"webpack-cli": "^4.7.2",
"webpack-preprocessor-loader": "^1.1.4",
@@ -9685,8 +9679,7 @@
}
},
"vue-loader": {
- "version": "17.0.0",
- "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.0.0.tgz",
+ "version": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.0.0.tgz",
"integrity": "sha512-OWSXjrzIvbF2LtOUmxT3HYgwwubbfFelN8PAP9R9dwpIkj48TVioHhWWSx7W7fk+iF5cgg3CBJRxwTdtLU4Ecg==",
"dev": true,
"requires": {
@@ -9696,16 +9689,14 @@
}
},
"vue-material-adapter": {
- "version": "3.2.3",
- "resolved": "https://registry.npmjs.org/vue-material-adapter/-/vue-material-adapter-3.2.3.tgz",
+ "version": "https://registry.npmjs.org/vue-material-adapter/-/vue-material-adapter-3.2.3.tgz",
"integrity": "sha512-tUCaRwjaCzIo2SleyX7HPkWnqebZcyCE9iln7WgriakUQwsG19IixbcWhnBgXYVPk9omRr82T0a88lzqXSy5Mw==",
"requires": {
"material-components-web": "^10.0.0"
}
},
"vue-style-loader": {
- "version": "4.1.3",
- "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
+ "version": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
"integrity": "sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==",
"dev": true,
"requires": {
diff --git a/package.json b/package.json
index 3752313..7afaf6a 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
"google"
],
"devDependencies": {
- "@vue/compiler-sfc": "^3.2.26",
"copy-webpack-plugin": "^9.0.1",
"css-loader": "^6.2.0",
"json5": "^2.2.0",
@@ -33,8 +32,6 @@
"sass": "^1.38.1",
"sass-loader": "^12.1.0",
"style-loader": "^3.2.1",
- "vue-loader": "^17.0.0",
- "vue-style-loader": "^4.1.3",
"webpack": "^5.44.0",
"webpack-cli": "^4.7.2",
"webpack-preprocessor-loader": "^1.1.4",
@@ -42,7 +39,6 @@
},
"private": true,
"dependencies": {
- "@material/menu": "^10.0.0",
"@material/tooltip": "^12.0.0",
"async-mutex": "^0.3.2",
"google-protobuf": "^3.19.3",
@@ -50,8 +46,6 @@
"idb": "^6.1.2",
"poll-until-promise": "^3.6.1",
"semver": "^7.3.5",
- "sw-xhr": "^0.0.3",
- "vue": "^3.2.26",
- "vue-material-adapter": "^3.2.3"
+ "sw-xhr": "^0.0.3"
}
}
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);
- }
-};
diff --git a/src/mdc/styles.scss b/src/mdc/styles.scss
index a5be23c..22ecb8d 100644
--- a/src/mdc/styles.scss
+++ b/src/mdc/styles.scss
@@ -1,9 +1 @@
@use "@material/tooltip/styles";
-@use "@material/list/mdc-list";
-@use "@material/menu-surface/mdc-menu-surface";
-@use "@material/menu/mdc-menu";
-
-a.mdc-list-item {
- color: inherit!important;
- text-decoration: none!important;
-}
diff --git a/src/static/css/ccdarktheme.css b/src/static/css/ccdarktheme.css
index e1a5089..04e2754 100644
--- a/src/static/css/ccdarktheme.css
+++ b/src/static/css/ccdarktheme.css
@@ -38,7 +38,7 @@
color: var(--TWPT-primary-text);
}
-body.ec a:not(.mdc-list-item) {
+body.ec a {
color: var(--TWPT-link);
}
diff --git a/webpack.config.js b/webpack.config.js
index 9d28abb..bceb4c0 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,7 +2,6 @@
const path = require('path');
const json5 = require('json5');
const CopyWebpackPlugin = require('copy-webpack-plugin');
-const {VueLoaderPlugin} = require('vue-loader');
const WebpackShellPluginNext = require('webpack-shell-plugin-next');
// Pontoon uses their own locale set. This array lets us convert those locales
@@ -115,11 +114,8 @@
},
]
}),
- new VueLoaderPlugin(),
new webpack.DefinePlugin({
'PRODUCTION': args.mode == 'production',
- '__VUE_OPTIONS_API__': true,
- '__VUE_PROD_DEVTOOLS__': args.mode != 'production',
}),
...getCopyPluginsForOverridenLocales(outputPath),
],
@@ -139,7 +135,7 @@
{
test: /\.s[ac]ss$/i,
use: [
- 'vue-style-loader',
+ 'style-loader',
'css-loader',
{
loader: 'sass-loader',
@@ -151,22 +147,11 @@
],
},
{
- test: /\.css$/i,
- use: [
- 'vue-style-loader',
- 'css-loader',
- ],
- },
- {
test: /\.js$/i,
use: [
preprocessorLoader,
],
},
- {
- test: /\.vue$/i,
- loader: 'vue-loader',
- },
]
},
};