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
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;
}
diff --git a/src/contentScripts/communityConsole/avatars.js b/src/contentScripts/communityConsole/avatars.js
index b125a17..03d6bcb 100644
--- a/src/contentScripts/communityConsole/avatars.js
+++ b/src/contentScripts/communityConsole/avatars.js
@@ -3,6 +3,7 @@
import {CCApi} from '../../common/api.js';
import {parseUrl} from '../../common/commonUtils.js';
import {isOptionEnabled} from '../../common/optionsUtils.js';
+import {createPlainTooltip} from '../../common/tooltip.js';
import AvatarsDB from './utils/AvatarsDB.js'
@@ -322,14 +323,12 @@
var avatarUrls = res.avatars;
+ let singleAvatar;
if (res.state == 'private') {
- var avatar = document.createElement('div');
- avatar.classList.add('TWPT-avatar-private-placeholder');
- avatar.textContent = 'person_off';
- var label = chrome.i18n.getMessage(
- 'inject_threadlistavatars_private_thread_indicator_label');
- avatar.setAttribute('title', label);
- avatarsContainer.appendChild(avatar);
+ singleAvatar = document.createElement('div');
+ singleAvatar.classList.add('TWPT-avatar-private-placeholder');
+ singleAvatar.textContent = 'person_off';
+ avatarsContainer.appendChild(singleAvatar);
} else {
for (var i = 0; i < avatarUrls.length; ++i) {
var avatar = document.createElement('div');
@@ -340,6 +339,12 @@
}
header.appendChild(avatarsContainer);
+
+ if (res.state == 'private') {
+ var label = chrome.i18n.getMessage(
+ 'inject_threadlistavatars_private_thread_indicator_label');
+ createPlainTooltip(singleAvatar, label);
+ }
})
.catch(err => {
console.error(
diff --git a/src/contentScripts/communityConsole/batchLock.js b/src/contentScripts/communityConsole/batchLock.js
index 20af6df..11b133a 100644
--- a/src/contentScripts/communityConsole/batchLock.js
+++ b/src/contentScripts/communityConsole/batchLock.js
@@ -1,4 +1,7 @@
+import {MDCTooltip} from '@material/tooltip';
+
import {isOptionEnabled} from '../../common/optionsUtils.js';
+import {createPlainTooltip} from '../../common/tooltip.js';
import {createExtBadge, removeChildNodes} from './utils/common.js';
@@ -118,11 +121,11 @@
var clone = readToggle.cloneNode(true);
clone.setAttribute('debugid', 'batchlock');
clone.classList.add('TWPT-btn--with-badge');
- clone.setAttribute('title', chrome.i18n.getMessage('inject_lockbtn'));
clone.querySelector('material-icon').setAttribute('icon', 'lock');
clone.querySelector('i.material-icon-i').textContent = 'lock';
- var badge = createExtBadge();
+ let badge, badgeTooltip;
+ [badge, badgeTooltip] = createExtBadge();
clone.append(badge);
clone.addEventListener('click', () => {
@@ -137,6 +140,9 @@
else
readToggle.parentNode.insertBefore(
clone, (readToggle.nextSibling || readToggle));
+
+ createPlainTooltip(clone, chrome.i18n.getMessage('inject_lockbtn'));
+ new MDCTooltip(badgeTooltip);
},
addButtonIfEnabled(readToggle) {
isOptionEnabled('batchlock').then(isEnabled => {
diff --git a/src/contentScripts/communityConsole/darkMode.js b/src/contentScripts/communityConsole/darkMode.js
index d357bad..1b6c751 100644
--- a/src/contentScripts/communityConsole/darkMode.js
+++ b/src/contentScripts/communityConsole/darkMode.js
@@ -1,11 +1,13 @@
+import {MDCTooltip} from '@material/tooltip';
+
+import {createPlainTooltip} from '../../common/tooltip.js';
+
import {createExtBadge} from './utils/common.js';
export function injectDarkModeButton(rightControl, previousDarkModeOption) {
var darkThemeSwitch = document.createElement('material-button');
darkThemeSwitch.classList.add('TWPT-dark-theme', 'TWPT-btn--with-badge');
darkThemeSwitch.setAttribute('button', '');
- darkThemeSwitch.setAttribute(
- 'title', chrome.i18n.getMessage('inject_ccdarktheme_helper'));
darkThemeSwitch.addEventListener('click', e => {
chrome.storage.sync.get(null, currentOptions => {
@@ -29,13 +31,18 @@
switchContent.appendChild(icon);
darkThemeSwitch.appendChild(switchContent);
- var badgeContent = createExtBadge();
+ let badgeContent, badgeTooltip;
+ [badgeContent, badgeTooltip] = createExtBadge();
darkThemeSwitch.appendChild(badgeContent);
rightControl.style.width =
(parseInt(window.getComputedStyle(rightControl).width) + 58) + 'px';
rightControl.insertAdjacentElement('afterbegin', darkThemeSwitch);
+
+ createPlainTooltip(
+ switchContent, chrome.i18n.getMessage('inject_ccdarktheme_helper'));
+ new MDCTooltip(badgeTooltip);
}
export function isDarkThemeOn(options) {
diff --git a/src/contentScripts/communityConsole/profileHistoryLink.js b/src/contentScripts/communityConsole/profileHistoryLink.js
index 7f2dbd7..7f06b3e 100644
--- a/src/contentScripts/communityConsole/profileHistoryLink.js
+++ b/src/contentScripts/communityConsole/profileHistoryLink.js
@@ -46,7 +46,8 @@
var container = document.createElement('div');
container.classList.add('TWPT-previous-posts');
- var badge = createExtBadge();
+ let badge, badgeTooltip;
+ [badge, badgeTooltip] = createExtBadge();
container.appendChild(badge);
var linkContainer = document.createElement('div');
@@ -58,6 +59,7 @@
container.appendChild(linkContainer);
mainCardContent.appendChild(container);
+ new MDCTooltip(badgeTooltip);
}
export function injectPreviousPostsLinksIfEnabled(nameElement) {
diff --git a/src/contentScripts/communityConsole/utils/common.js b/src/contentScripts/communityConsole/utils/common.js
index ca452b3..67a8768 100644
--- a/src/contentScripts/communityConsole/utils/common.js
+++ b/src/contentScripts/communityConsole/utils/common.js
@@ -1,3 +1,5 @@
+import {createPlainTooltip} from '../../../common/tooltip.js';
+
export function removeChildNodes(node) {
while (node.firstChild) {
node.removeChild(node.firstChild);
@@ -11,17 +13,18 @@
}
export function createExtBadge() {
- var badge = document.createElement('div');
+ let badge = document.createElement('div');
badge.classList.add('TWPT-badge');
- badge.setAttribute(
- 'title', chrome.i18n.getMessage('inject_extension_badge_helper', [
- chrome.i18n.getMessage('appName')
- ]));
+ let badgeTooltip = createPlainTooltip(
+ badge,
+ chrome.i18n.getMessage(
+ 'inject_extension_badge_helper', [chrome.i18n.getMessage('appName')]),
+ false);
- var badgeI = document.createElement('i');
+ let badgeI = document.createElement('i');
badgeI.classList.add('material-icon-i', 'material-icons-extended');
badgeI.textContent = 'repeat';
badge.append(badgeI);
- return badge;
+ return [badge, badgeTooltip];
}