Create function to add button to the thread list actions bar

This will be used by several features which will be developed in the
future (workflows, move several threads), so we're moving the logic from
batchLock.js to a generic function in utils/common.js.

Bug: twpowertools:74, twpowertools:51
Change-Id: Icfe4cca5374020096b4d7b198e5d22c528e40367
diff --git a/src/contentScripts/communityConsole/batchLock.js b/src/contentScripts/communityConsole/batchLock.js
index 11b133a..86a7057 100644
--- a/src/contentScripts/communityConsole/batchLock.js
+++ b/src/contentScripts/communityConsole/batchLock.js
@@ -1,9 +1,6 @@
-import {MDCTooltip} from '@material/tooltip';
-
 import {isOptionEnabled} from '../../common/optionsUtils.js';
-import {createPlainTooltip} from '../../common/tooltip.js';
 
-import {createExtBadge, removeChildNodes} from './utils/common.js';
+import {addButtonToThreadListActions, removeChildNodes} from './utils/common.js';
 
 export var batchLock = {
   nodeIsReadToggleBtn(node) {
@@ -13,7 +10,7 @@
          node.getAttribute('debugid') == 'mark-unread-button') &&
         ('parentNode' in node) && node.parentNode !== null &&
         ('parentNode' in node.parentNode) &&
-        node.parentNode.querySelector('[debugid="batchlock"]') === null &&
+        node.parentNode.querySelector('[debugid="twpt-lock"]') === null &&
         node.parentNode.parentNode !== null &&
         ('tagName' in node.parentNode.parentNode) &&
         node.parentNode.parentNode.tagName == 'EC-BULK-ACTIONS';
@@ -117,36 +114,16 @@
     modal.classList.add('visible', 'modal');
     modal.style.display = 'flex';
   },
-  addButton(readToggle) {
-    var clone = readToggle.cloneNode(true);
-    clone.setAttribute('debugid', 'batchlock');
-    clone.classList.add('TWPT-btn--with-badge');
-    clone.querySelector('material-icon').setAttribute('icon', 'lock');
-    clone.querySelector('i.material-icon-i').textContent = 'lock';
-
-    let badge, badgeTooltip;
-    [badge, badgeTooltip] = createExtBadge();
-    clone.append(badge);
-
-    clone.addEventListener('click', () => {
-      this.createDialog();
-    });
-
-    var duplicateBtn = readToggle.parentNode.querySelector(
-        '[debugid="mark-duplicate-button"]');
-    if (duplicateBtn)
-      duplicateBtn.parentNode.insertBefore(
-          clone, (duplicateBtn.nextSibling || duplicateBtn));
-    else
-      readToggle.parentNode.insertBefore(
-          clone, (readToggle.nextSibling || readToggle));
-
-    createPlainTooltip(clone, chrome.i18n.getMessage('inject_lockbtn'));
-    new MDCTooltip(badgeTooltip);
-  },
   addButtonIfEnabled(readToggle) {
     isOptionEnabled('batchlock').then(isEnabled => {
-      if (isEnabled) this.addButton(readToggle);
+      if (isEnabled) {
+        let tooltip = chrome.i18n.getMessage('inject_lockbtn');
+        let btn = addButtonToThreadListActions(
+            readToggle, 'lock', 'twpt-lock', tooltip);
+        btn.addEventListener('click', () => {
+          this.createDialog();
+        });
+      }
     });
   },
 };
diff --git a/src/contentScripts/communityConsole/utils/common.js b/src/contentScripts/communityConsole/utils/common.js
index 67a8768..648fae2 100644
--- a/src/contentScripts/communityConsole/utils/common.js
+++ b/src/contentScripts/communityConsole/utils/common.js
@@ -1,3 +1,5 @@
+import {MDCTooltip} from '@material/tooltip';
+
 import {createPlainTooltip} from '../../../common/tooltip.js';
 
 export function removeChildNodes(node) {
@@ -28,3 +30,32 @@
   badge.append(badgeI);
   return [badge, badgeTooltip];
 }
+
+// Adds a button to the thread list actions bar next to the button given by
+// |originalBtn|. The button will have icon |icon|, when hovered it will display
+// |tooltip|, and will have a debugid attribute with value |debugId|.
+export function addButtonToThreadListActions(originalBtn, icon, debugId, tooltip) {
+  let clone = originalBtn.cloneNode(true);
+  clone.setAttribute('debugid', debugId);
+  clone.classList.add('TWPT-btn--with-badge');
+  clone.querySelector('material-icon').setAttribute('icon', icon);
+  clone.querySelector('i.material-icon-i').textContent = icon;
+
+  let badge, badgeTooltip;
+  [badge, badgeTooltip] = createExtBadge();
+  clone.append(badge);
+
+  var duplicateBtn =
+      originalBtn.parentNode.querySelector('[debugid="mark-duplicate-button"]');
+  if (duplicateBtn)
+    duplicateBtn.parentNode.insertBefore(
+        clone, (duplicateBtn.nextSibling || duplicateBtn));
+  else
+    originalBtn.parentNode.insertBefore(
+        clone, (originalBtn.nextSibling || originalBtn));
+
+  createPlainTooltip(clone, tooltip);
+  new MDCTooltip(badgeTooltip);
+
+  return clone;
+}