commit 2485a3e067e679197f3f5b0bbf215ce1663e4838
author avm99963 <me@avm99963.com> Wed Sep 08 22:18:38 2021 +0200
committer Adrià Vilanova Martínez <me@avm99963.com> Fri Oct 15 23:45:56 2021 +0200
tree b3b45391c3de85c4b364543c1c743873fded7af8
parent 1f65252b3bf64ca5ee01fc36c2e95593f624574a

Use material tooltips

Tooltips will be used in the future for other features, and this allows
existing plain tooltips to be shown as soon as the mouse enters the
element, without the long delay inherent to standard tooltips.

Bug: twpowertools:45
Change-Id: Ifa7bf1ee8db8da7afaf36b9d19448f5a0cdd4ebc

src/contentScripts/communityConsole/autoRefresh.js

diff --git a/src/contentScripts/communityConsole/autoRefresh.js b/src/contentScripts/communityConsole/autoRefresh.js
index a35a6f0..e5dc8c8 100644
--- a/src/contentScripts/communityConsole/autoRefresh.js
+++ b/src/contentScripts/communityConsole/autoRefresh.js
@@ -1,6 +1,9 @@
+import {MDCTooltip} from '@material/tooltip';
+
 import {CCApi} from '../../common/api.js';
 import {getAuthUser} from '../../common/communityConsoleUtils.js';
 import {isOptionEnabled} from '../../common/optionsUtils.js';
+import {createPlainTooltip} from '../../common/tooltip.js';
 
 import {createExtBadge} from './utils/common.js';
 
@@ -117,7 +120,8 @@
     var content = document.createElement('div');
     content.classList.add('TWPT-focus-content-wrapper');
 
-    var badge = createExtBadge();
+    let badge, badgeTooltip;
+    [badge, badgeTooltip] = createExtBadge();
 
     var message = document.createElement('div');
     message.classList.add('TWPT-message');
@@ -141,6 +145,7 @@
     snackbar.append(ac);
     pane.append(snackbar);
     document.getElementById('default-acx-overlay-container').append(pane);
+    new MDCTooltip(badgeTooltip);
     this.snackbar = snackbar;
   }
 
@@ -148,10 +153,6 @@
   createStatusIndicator(isSetUp) {
     var container = document.createElement('div');
     container.classList.add('TWPT-autorefresh-status-indicator-container');
-    var title = chrome.i18n.getMessage(
-        isSetUp ? 'inject_autorefresh_list_status_indicator_label_active' :
-                  'inject_autorefresh_list_status_indicator_label_disabled');
-    container.setAttribute('title', title);
 
     var indicator = document.createElement('div');
     indicator.classList.add(
@@ -160,19 +161,27 @@
                   'TWPT-autorefresh-status-indicator--disabled');
     indicator.textContent =
         isSetUp ? 'notifications_active' : 'notifications_off';
+    let label = chrome.i18n.getMessage(
+        isSetUp ? 'inject_autorefresh_list_status_indicator_label_active' :
+                  'inject_autorefresh_list_status_indicator_label_disabled');
+    let statusTooltip = createPlainTooltip(indicator, label, false);
 
-    var badge = createExtBadge();
+    let badge, badgeTooltip;
+    [badge, badgeTooltip] = createExtBadge();
 
     container.append(indicator, badge);
-    return container;
+    return [container, badgeTooltip, statusTooltip];
   }
 
   injectStatusIndicator(isSetUp) {
-    this.statusIndicator = this.createStatusIndicator(isSetUp);
+    let badgeTooltip, statusTooltip;
+    [this.statusIndicator, badgeTooltip, statusTooltip] = this.createStatusIndicator(isSetUp);
 
     var sortOptionsDiv = document.querySelector('ec-thread-list .sort-options');
     if (sortOptionsDiv) {
       sortOptionsDiv.prepend(this.statusIndicator);
+      new MDCTooltip(badgeTooltip);
+      new MDCTooltip(statusTooltip);
       return;
     }