Replace title property setter with Tooltip install invocation
ui/Tooltip.js overrides the HTMLElement prototype to override the
title property. Rather than using this property, we shoul be
calling Tooltip.install directly. This makes sure that new
components are not relying on the behavior of the legacy
prototype patching.
These usages have been manually audited using the following regexes:
Search: ([\S]+)\.title = ([^;]+);
Replace: UI.Tooltip.Tooltip.install($1, $2);
Note that there are classes in DevTools that also have a title
property. Most notably `TreeElement`. We should not be replacing
these, as they do not inherit from HTMLElement. Luckily, we are
running TypeScript to make sure we don't call `Tooltip.install`
with a non-HTMLElement.
A follow-up CL will clean up the getters.
[email protected]
Bug: 1150762
No-presubmit: True
Change-Id: I5928e75c70293531849e0576f4fb2a2a8b3e02d2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2555060
Commit-Queue: Tim van der Lippe <[email protected]>
Auto-Submit: Tim van der Lippe <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>
diff --git a/front_end/accessibility/AccessibilityNodeView.js b/front_end/accessibility/AccessibilityNodeView.js
index 97b2029..7b733b8 100644
--- a/front_end/accessibility/AccessibilityNodeView.js
+++ b/front_end/accessibility/AccessibilityNodeView.js
@@ -174,7 +174,7 @@
valueElement.setTextContentTruncatedIfNeeded(valueText || '');
- valueElement.title = String(value) || '';
+ UI.Tooltip.Tooltip.install(valueElement, String(value) || '');
return valueElement;
}
@@ -187,7 +187,7 @@
const exclamationElement =
/** @type {!UI.UIUtils.DevToolsIconLabel} */ (document.createElement('span', {is: 'dt-icon-label'}));
exclamationElement.type = 'smallicon-warning';
- exclamationElement.title = tooltip;
+ UI.Tooltip.Tooltip.install(exclamationElement, tooltip);
return exclamationElement;
}
@@ -200,7 +200,7 @@
// @ts-ignore TS can't cast name here but we checked it's valid.
const attribute = AXAttributes[name];
nameElement.textContent = attribute.name;
- nameElement.title = attribute.description;
+ UI.Tooltip.Tooltip.install(nameElement, attribute.description);
nameElement.classList.add('ax-readable-name');
} else {
nameElement.textContent = name;
@@ -439,7 +439,7 @@
if (source.nativeSource) {
const nativeSource = source.nativeSource;
nameElement.textContent = AXNativeSourceTypes[nativeSource].name;
- nameElement.title = AXNativeSourceTypes[nativeSource].description;
+ UI.Tooltip.Tooltip.install(nameElement, AXNativeSourceTypes[nativeSource].description);
nameElement.classList.add('ax-readable-name');
break;
}
@@ -450,7 +450,7 @@
default:
if (type in AXSourceTypes) {
nameElement.textContent = AXSourceTypes[type].name;
- nameElement.title = AXSourceTypes[type].description;
+ UI.Tooltip.Tooltip.install(nameElement, AXSourceTypes[type].description);
nameElement.classList.add('ax-readable-name');
} else {
console.warn(type, 'not in AXSourceTypes');
diff --git a/front_end/animation/AnimationTimeline.js b/front_end/animation/AnimationTimeline.js
index acd1c6c..e3bd148 100644
--- a/front_end/animation/AnimationTimeline.js
+++ b/front_end/animation/AnimationTimeline.js
@@ -244,7 +244,7 @@
playbackRates.set(button, playbackRate);
button.addEventListener('click', this._setPlaybackRate.bind(this, playbackRate));
UI.ARIAUtils.markAsOption(button);
- button.title = i18nString(UIStrings.setSpeedToS, {PH1: button.textContent});
+ UI.Tooltip.Tooltip.install(button, i18nString(UIStrings.setSpeedToS, {PH1: button.textContent}));
button.tabIndex = -1;
this._playbackRateButtons.push(button);
}
diff --git a/front_end/color_picker/ContrastDetails.js b/front_end/color_picker/ContrastDetails.js
index 63ed761..4669820 100644
--- a/front_end/color_picker/ContrastDetails.js
+++ b/front_end/color_picker/ContrastDetails.js
@@ -177,7 +177,7 @@
const suggestedColorString = formattedColor ? formattedColor + ' ' : '';
const label = ls`Use suggested color ${suggestedColorString}to fix low contrast`;
UI.ARIAUtils.setAccessibleName(button, label);
- button.title = label;
+ UI.Tooltip.Tooltip.install(button, label);
button.tabIndex = 0;
button.style.backgroundColor = suggestedColorString;
return button;
diff --git a/front_end/color_picker/Spectrum.js b/front_end/color_picker/Spectrum.js
index e9e39cd..d5b9a25 100644
--- a/front_end/color_picker/Spectrum.js
+++ b/front_end/color_picker/Spectrum.js
@@ -480,7 +480,7 @@
if (animationDelay) {
element.animate([{opacity: 0}, {opacity: 1}], {duration: 100, delay: animationDelay, fill: 'backwards'});
}
- element.title = colorName || colorText;
+ UI.Tooltip.Tooltip.install(element, colorName || colorText);
return element;
}
@@ -517,7 +517,8 @@
shadow.style.background = palette.colors[i];
shadow = colorElement.createChild('div', 'spectrum-palette-color spectrum-palette-color-shadow');
shadow.style.background = palette.colors[i];
- colorElement.title = ls`Long-click or long-press space to show alternate shades of ${palette.colors[i]}`;
+ UI.Tooltip.Tooltip.install(
+ colorElement, ls`Long-click or long-press space to show alternate shades of ${palette.colors[i]}`);
UI.ARIAUtils.setAccessibleName(colorElement, colorElement.title);
new UI.UIUtils.LongClickController(
colorElement, this._showLightnessShades.bind(this, colorElement, palette.colors[i]));
@@ -1445,7 +1446,7 @@
this._swatchOverlayElement.addEventListener('mouseout', this._onCopyIconMouseout.bind(this));
this._swatchOverlayElement.addEventListener('blur', this._onCopyIconMouseout.bind(this));
this._swatchCopyIcon = UI.Icon.Icon.create('largeicon-copy', 'copy-color-icon');
- this._swatchCopyIcon.title = ls`Copy color to clipboard`;
+ UI.Tooltip.Tooltip.install(this._swatchCopyIcon, ls`Copy color to clipboard`);
this._swatchOverlayElement.appendChild(this._swatchCopyIcon);
UI.ARIAUtils.setAccessibleName(this._swatchOverlayElement, this._swatchCopyIcon.title);
}
diff --git a/front_end/components/Linkifier.js b/front_end/components/Linkifier.js
index 0eac15b..87c64a4 100644
--- a/front_end/components/Linkifier.js
+++ b/front_end/components/Linkifier.js
@@ -185,7 +185,7 @@
if (fallback) {
// @ts-ignore
anchor.href = fallback.href;
- anchor.title = fallback.title;
+ UI.Tooltip.Tooltip.install(anchor, fallback.title);
anchor.className = fallback.className;
anchor.textContent = fallback.textContent;
const fallbackInfo = infoByAnchor.get(fallback);
@@ -469,7 +469,7 @@
} else if (typeof uiLocation.lineNumber === 'number') {
titleText += ':' + (uiLocation.lineNumber + 1);
}
- anchor.title = titleText;
+ UI.Tooltip.Tooltip.install(anchor, titleText);
anchor.classList.toggle('webkit-html-blackbox-link', await liveLocation.isBlackboxed());
Linkifier._updateLinkDecorations(anchor);
}
@@ -601,7 +601,7 @@
}
link.classList.add('devtools-link');
if (title) {
- link.title = title;
+ UI.Tooltip.Tooltip.install(link, title);
}
if (href) {
// @ts-ignore
diff --git a/front_end/console/ConsolePinPane.js b/front_end/console/ConsolePinPane.js
index 47f5d14..cf41153 100644
--- a/front_end/console/ConsolePinPane.js
+++ b/front_end/console/ConsolePinPane.js
@@ -176,7 +176,7 @@
/** @type {!HTMLElement} */
this._pinPreview = /** @type {!HTMLElement} */ (fragment.$('preview'));
const nameElement = /** @type {!HTMLElement} */ (fragment.$('name'));
- nameElement.title = expression;
+ UI.Tooltip.Tooltip.install(nameElement, expression);
elementToConsolePin.set(this._pinElement, this);
/** @type {?SDK.RuntimeModel.EvaluationResult} */
@@ -334,13 +334,13 @@
const sideEffectLabel =
/** @type {!HTMLElement} */ (this._pinPreview.createChild('span', 'object-value-calculate-value-button'));
sideEffectLabel.textContent = '(…)';
- sideEffectLabel.title = ls`Evaluate, allowing side effects`;
+ UI.Tooltip.Tooltip.install(sideEffectLabel, ls`Evaluate, allowing side effects`);
} else if (previewText) {
this._pinPreview.appendChild(preview);
} else if (!isEditing) {
UI.UIUtils.createTextChild(this._pinPreview, ls`not available`);
}
- this._pinPreview.title = previewText;
+ UI.Tooltip.Tooltip.install(this._pinPreview, previewText);
}
let node = null;
diff --git a/front_end/console/ConsoleViewMessage.js b/front_end/console/ConsoleViewMessage.js
index 7ee1dba..7bbce35 100644
--- a/front_end/console/ConsoleViewMessage.js
+++ b/front_end/console/ConsoleViewMessage.js
@@ -615,9 +615,10 @@
const note = titleElement.createChild('span', 'object-state-note info-note');
if (this._message.type === SDK.ConsoleModel.MessageType.QueryObjectResult) {
- note.title = ls`This value will not be collected until console is cleared.`;
+ UI.Tooltip.Tooltip.install(note, ls`This value will not be collected until console is cleared.`);
} else {
- note.title = ls`This value was evaluated upon first expanding. It may have changed since then.`;
+ UI.Tooltip.Tooltip.install(
+ note, ls`This value was evaluated upon first expanding. It may have changed since then.`);
}
const section = new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection(obj, titleElement, this._linkifier);
@@ -652,7 +653,7 @@
result.appendChild(functionElement);
if (targetFunction !== func) {
const note = result.createChild('span', 'object-info-state-note');
- note.title = Common.UIString.UIString('Function was resolved from bound function.');
+ UI.Tooltip.Tooltip.install(note, Common.UIString.UIString('Function was resolved from bound function.'));
}
result.addEventListener('contextmenu', this._contextMenuEventFired.bind(this, targetFunction), false);
promise.then(() => this._formattedParameterAsFunctionForTest());
@@ -783,7 +784,7 @@
if (wasThrown) {
const element = rootElement.createChild('span');
element.textContent = Common.UIString.UIString('<exception>');
- element.title = /** @type {string} */ (object.description);
+ UI.Tooltip.Tooltip.install(element, /** @type {string} */ (object.description));
} else if (isArrayEntry) {
rootElement.appendChild(this._formatAsArrayEntry(object));
} else {
@@ -1049,7 +1050,7 @@
this._timestampElement.classList.add('console-timestamp');
}
this._timestampElement.textContent = UI.UIUtils.formatTimestamp(this._message.timestamp, false) + ' ';
- this._timestampElement.title = UI.UIUtils.formatTimestamp(this._message.timestamp, true);
+ UI.Tooltip.Tooltip.install(this._timestampElement, UI.UIUtils.formatTimestamp(this._message.timestamp, true));
this._contentElement.insertBefore(this._timestampElement, this._contentElement.firstChild);
} else if (this._timestampElement) {
this._timestampElement.remove();
diff --git a/front_end/cookie_table/CookiesTable.js b/front_end/cookie_table/CookiesTable.js
index 1b4b727..1523c86 100644
--- a/front_end/cookie_table/CookiesTable.js
+++ b/front_end/cookie_table/CookiesTable.js
@@ -702,7 +702,7 @@
*/
createCell(columnId) {
const cell = super.createCell(columnId);
- cell.title = cell.textContent || '';
+ UI.Tooltip.Tooltip.install(cell, cell.textContent || '');
let blockedReasonString = '';
if (this._blockedReasons) {
@@ -720,7 +720,7 @@
if (blockedReasonString) {
const infoElement = UI.Icon.Icon.create('smallicon-info', 'cookie-warning-icon');
- infoElement.title = blockedReasonString;
+ UI.Tooltip.Tooltip.install(infoElement, blockedReasonString);
cell.insertBefore(infoElement, cell.firstChild);
cell.classList.add('flagged-cookie-attribute-cell');
}
diff --git a/front_end/coverage/CoverageListView.js b/front_end/coverage/CoverageListView.js
index f2a6dfe..84fab1b 100644
--- a/front_end/coverage/CoverageListView.js
+++ b/front_end/coverage/CoverageListView.js
@@ -363,7 +363,7 @@
const cell = this.createTD(columnId);
switch (columnId) {
case 'url': {
- cell.title = this._url;
+ UI.Tooltip.Tooltip.install(cell, this._url);
const outer = cell.createChild('div', 'url-outer');
const prefix = outer.createChild('div', 'url-prefix');
const suffix = outer.createChild('div', 'url-suffix');
@@ -379,9 +379,9 @@
case 'type': {
cell.textContent = coverageTypeToString(this._coverageInfo.type());
if (this._coverageInfo.type() & CoverageType.JavaScriptPerFunction) {
- cell.title = i18nString(UIStrings.jsCoverageWithPerFunction);
+ UI.Tooltip.Tooltip.install(cell, i18nString(UIStrings.jsCoverageWithPerFunction));
} else if (this._coverageInfo.type() & CoverageType.JavaScript) {
- cell.title = i18nString(UIStrings.jsCoverageWithPerBlock);
+ UI.Tooltip.Tooltip.install(cell, i18nString(UIStrings.jsCoverageWithPerBlock));
}
break;
}
diff --git a/front_end/css_overview/CSSOverviewCompletedView.js b/front_end/css_overview/CSSOverviewCompletedView.js
index 8efe73e..723d235 100644
--- a/front_end/css_overview/CSSOverviewCompletedView.js
+++ b/front_end/css_overview/CSSOverviewCompletedView.js
@@ -953,7 +953,7 @@
cell.appendChild(link);
const button = document.createElement('button');
button.classList.add('show-element');
- button.title = ls`Show element`;
+ UI.Tooltip.Tooltip.install(button, ls`Show element`);
button.tabIndex = 0;
button.onclick = () => this.data.node.scrollIntoView();
cell.appendChild(button);
diff --git a/front_end/data_grid/DataGrid.js b/front_end/data_grid/DataGrid.js
index a838718..ef3f159 100644
--- a/front_end/data_grid/DataGrid.js
+++ b/front_end/data_grid/DataGrid.js
@@ -221,11 +221,11 @@
static setElementText(element, newText, longText) {
if (longText && newText.length > 1000) {
element.textContent = newText.trimEndWithMaxLength(1000);
- (/** @type {!HTMLElement} */ (element)).title = newText;
+ UI.Tooltip.Tooltip.install(element, newText);
elementToLongTextMap.set(element, newText);
} else {
element.textContent = newText;
- (/** @type {!HTMLElement} */ (element)).title = '';
+ UI.Tooltip.Tooltip.install(element, '');
elementToLongTextMap.delete(element);
}
}
@@ -236,7 +236,7 @@
*/
static setElementBoolean(element, value) {
element.textContent = value ? '\u2713' : '';
- (/** @type {!HTMLElement} */ (element)).title = '';
+ UI.Tooltip.Tooltip.install(element, '');
}
/**
diff --git a/front_end/developer_resources/DeveloperResourcesListView.js b/front_end/developer_resources/DeveloperResourcesListView.js
index a9c5fe3..e11acfb 100644
--- a/front_end/developer_resources/DeveloperResourcesListView.js
+++ b/front_end/developer_resources/DeveloperResourcesListView.js
@@ -249,7 +249,7 @@
const cell = /** @type {!HTMLElement} */ (this.createTD(columnId));
switch (columnId) {
case 'url': {
- cell.title = this.item.url;
+ UI.Tooltip.Tooltip.install(cell, this.item.url);
const outer = cell.createChild('div', 'url-outer');
const prefix = outer.createChild('div', 'url-prefix');
const suffix = outer.createChild('div', 'url-suffix');
@@ -265,7 +265,7 @@
case 'initiator': {
const url = this.item.initiator.initiatorUrl || '';
cell.textContent = url;
- cell.title = url;
+ UI.Tooltip.Tooltip.install(cell, url);
this.setCellAccessibleName(url, cell, columnId);
cell.onmouseenter = () => {
const frame = SDK.FrameManager.FrameManager.instance().getFrame(this.item.initiator.frameId || '');
diff --git a/front_end/elements/ColorSwatchPopoverIcon.js b/front_end/elements/ColorSwatchPopoverIcon.js
index c02ec98..54845fe 100644
--- a/front_end/elements/ColorSwatchPopoverIcon.js
+++ b/front_end/elements/ColorSwatchPopoverIcon.js
@@ -24,7 +24,7 @@
this._swatchPopoverHelper = swatchPopoverHelper;
this._swatch = swatch;
- this._swatch.iconElement().title = Common.UIString.UIString('Open cubic bezier editor.');
+ UI.Tooltip.Tooltip.install(this._swatch.iconElement(), Common.UIString.UIString('Open cubic bezier editor.'));
this._swatch.iconElement().addEventListener('click', this._iconClick.bind(this), false);
this._swatch.iconElement().addEventListener(
'mousedown', /** @param {!Event} event */ event => event.consume(), false);
@@ -267,7 +267,7 @@
this._shadowSwatch = shadowSwatch;
this._iconElement = shadowSwatch.iconElement();
- this._iconElement.title = Common.UIString.UIString('Open shadow editor.');
+ UI.Tooltip.Tooltip.install(this._iconElement, Common.UIString.UIString('Open shadow editor.'));
this._iconElement.addEventListener('click', this._iconClick.bind(this), false);
this._iconElement.addEventListener('mousedown', event => event.consume(), false);
diff --git a/front_end/elements/DOMLinkifier.js b/front_end/elements/DOMLinkifier.js
index e4fdabf..5d7df96 100644
--- a/front_end/elements/DOMLinkifier.js
+++ b/front_end/elements/DOMLinkifier.js
@@ -58,7 +58,7 @@
UI.UIUtils.createTextChild(pseudoElement, pseudoText);
title += pseudoText;
}
- parentElement.title = tooltipContent || title;
+ UI.Tooltip.Tooltip.install(parentElement, tooltipContent || title);
};
/**
diff --git a/front_end/elements/ElementsTreeElement.js b/front_end/elements/ElementsTreeElement.js
index c086a09..5a1700f 100644
--- a/front_end/elements/ElementsTreeElement.js
+++ b/front_end/elements/ElementsTreeElement.js
@@ -99,7 +99,7 @@
if (node.isAdFrameNode()) {
const adorner = this.adornText('Ad', AdornerCategories.Security);
- adorner.title = ls`This frame was identified as an ad frame`;
+ UI.Tooltip.Tooltip.install(adorner, ls`This frame was identified as an ad frame`);
}
}
@@ -315,7 +315,8 @@
if (this.listItemElement && !this._hintElement) {
this._hintElement = this.listItemElement.createChild('span', 'selected-hint');
const selectedElementCommand = '$0';
- this._hintElement.title = ls`Use ${selectedElementCommand} in the console to refer to this element.`;
+ UI.Tooltip.Tooltip.install(
+ this._hintElement, ls`Use ${selectedElementCommand} in the console to refer to this element.`);
UI.ARIAUtils.markAsHidden(this._hintElement);
}
}
diff --git a/front_end/elements/StylePropertyTreeElement.js b/front_end/elements/StylePropertyTreeElement.js
index d721d60..67766c6 100644
--- a/front_end/elements/StylePropertyTreeElement.js
+++ b/front_end/elements/StylePropertyTreeElement.js
@@ -587,7 +587,8 @@
this.listItemElement.removeChildren();
this.nameElement = /** @type {!HTMLElement} */ (propertyRenderer.renderName());
if (this.property.name.startsWith('--') && this.nameElement) {
- this.nameElement.title = this._matchedStyles.computeCSSVariable(this._style, this.property.name) || '';
+ UI.Tooltip.Tooltip.install(
+ this.nameElement, this._matchedStyles.computeCSSVariable(this._style, this.property.name) || '');
}
this.valueElement = /** @type {!HTMLElement} */ (propertyRenderer.renderValue());
if (!this.treeOutline) {
diff --git a/front_end/elements/StylesSidebarPane.js b/front_end/elements/StylesSidebarPane.js
index 6adbcaf..de9b6bd 100644
--- a/front_end/elements/StylesSidebarPane.js
+++ b/front_end/elements/StylesSidebarPane.js
@@ -180,7 +180,7 @@
exclamationElement.type = 'smallicon-warning';
}
if (title) {
- exclamationElement.title = title;
+ UI.Tooltip.Tooltip.install(exclamationElement, title);
} else {
exclamationElement.title = SDK.CSSMetadata.cssMetadata().isCSSPropertyName(property.name) ?
Common.UIString.UIString('Invalid property value') :
@@ -2989,7 +2989,7 @@
}
if (metadata.isStringProperty(this._propertyName)) {
- valueElement.title = unescapeCssString(this._propertyValue);
+ UI.Tooltip.Tooltip.install(valueElement, unescapeCssString(this._propertyValue));
}
const regexes = [SDK.CSSMetadata.VariableRegex, SDK.CSSMetadata.URLRegex];
diff --git a/front_end/emulation/DeviceModeToolbar.js b/front_end/emulation/DeviceModeToolbar.js
index ef05932..3f1b61c 100644
--- a/front_end/emulation/DeviceModeToolbar.js
+++ b/front_end/emulation/DeviceModeToolbar.js
@@ -154,7 +154,7 @@
_fillMainToolbar(toolbar) {
const widthInput = UI.UIUtils.createInput('device-mode-size-input', 'text');
widthInput.maxLength = 4;
- widthInput.title = Common.UIString.UIString('Width');
+ UI.Tooltip.Tooltip.install(widthInput, Common.UIString.UIString('Width'));
this._updateWidthInput =
UI.UIUtils.bindInput(widthInput, this._applyWidth.bind(this), DeviceModeModel.widthValidator, true);
this._widthInput = widthInput;
@@ -169,7 +169,7 @@
const heightInput = UI.UIUtils.createInput('device-mode-size-input', 'text');
heightInput.maxLength = 4;
- heightInput.title = Common.UIString.UIString('Height (leave empty for full)');
+ UI.Tooltip.Tooltip.install(heightInput, Common.UIString.UIString('Height (leave empty for full)'));
this._updateHeightInput = UI.UIUtils.bindInput(heightInput, this._applyHeight.bind(this), validateHeight, true);
this._heightInput = heightInput;
this._heightItem = this._wrapToolbarItem(heightInput);
diff --git a/front_end/emulation/DeviceModeView.js b/front_end/emulation/DeviceModeView.js
index 7994498..e373def 100644
--- a/front_end/emulation/DeviceModeView.js
+++ b/front_end/emulation/DeviceModeView.js
@@ -131,7 +131,7 @@
this._bottomResizerElement.createChild('div', '');
this._createResizer(this._bottomResizerElement, 0, 1);
this._bottomResizerElement.addEventListener('dblclick', this._model.setHeight.bind(this._model, 0), false);
- this._bottomResizerElement.title = Common.UIString.UIString('Double-click for full height');
+ UI.Tooltip.Tooltip.install(this._bottomResizerElement, Common.UIString.UIString('Double-click for full height'));
this._pageArea = /** @type {!HTMLElement} */ (this._screenArea.createChild('div', 'device-mode-page-area'));
this._pageArea.createChild('slot');
diff --git a/front_end/emulation/LocationsSettingsTab.js b/front_end/emulation/LocationsSettingsTab.js
index ec7d46f..29b5a78 100644
--- a/front_end/emulation/LocationsSettingsTab.js
+++ b/front_end/emulation/LocationsSettingsTab.js
@@ -66,7 +66,7 @@
const title = element.createChild('div', 'locations-list-text locations-list-title');
const titleText = title.createChild('div', 'locations-list-title-text');
titleText.textContent = location.title;
- titleText.title = location.title;
+ UI.Tooltip.Tooltip.install(titleText, location.title);
element.createChild('div', 'locations-list-separator');
element.createChild('div', 'locations-list-text').textContent = String(location.lat);
element.createChild('div', 'locations-list-separator');
diff --git a/front_end/emulation/MediaQueryInspector.js b/front_end/emulation/MediaQueryInspector.js
index ae60bd2..70d3d63 100644
--- a/front_end/emulation/MediaQueryInspector.js
+++ b/front_end/emulation/MediaQueryInspector.js
@@ -309,7 +309,7 @@
result.createChild('div', 'media-inspector-marker-spacer');
const markerElement = result.createChild('div', 'media-inspector-marker media-inspector-marker-max-width');
markerElement.style.width = maxWidthValue + 'px';
- markerElement.title = model.mediaText();
+ UI.Tooltip.Tooltip.install(markerElement, model.mediaText());
appendLabel(markerElement, model.maxWidthExpression(), false, false);
appendLabel(markerElement, model.maxWidthExpression(), true, true);
result.createChild('div', 'media-inspector-marker-spacer');
@@ -319,13 +319,13 @@
result.createChild('div', 'media-inspector-marker-spacer');
const leftElement = result.createChild('div', 'media-inspector-marker media-inspector-marker-min-max-width');
leftElement.style.width = (maxWidthValue - minWidthValue) * 0.5 + 'px';
- leftElement.title = model.mediaText();
+ UI.Tooltip.Tooltip.install(leftElement, model.mediaText());
appendLabel(leftElement, model.maxWidthExpression(), true, false);
appendLabel(leftElement, model.minWidthExpression(), false, true);
result.createChild('div', 'media-inspector-marker-spacer').style.flex = '0 0 ' + minWidthValue + 'px';
const rightElement = result.createChild('div', 'media-inspector-marker media-inspector-marker-min-max-width');
rightElement.style.width = (maxWidthValue - minWidthValue) * 0.5 + 'px';
- rightElement.title = model.mediaText();
+ UI.Tooltip.Tooltip.install(rightElement, model.mediaText());
appendLabel(rightElement, model.minWidthExpression(), true, false);
appendLabel(rightElement, model.maxWidthExpression(), false, true);
result.createChild('div', 'media-inspector-marker-spacer');
@@ -334,12 +334,12 @@
if (model.section() === Section.Min) {
const leftElement = result.createChild(
'div', 'media-inspector-marker media-inspector-marker-min-width media-inspector-marker-min-width-left');
- leftElement.title = model.mediaText();
+ UI.Tooltip.Tooltip.install(leftElement, model.mediaText());
appendLabel(leftElement, model.minWidthExpression(), false, false);
result.createChild('div', 'media-inspector-marker-spacer').style.flex = '0 0 ' + minWidthValue + 'px';
const rightElement = result.createChild(
'div', 'media-inspector-marker media-inspector-marker-min-width media-inspector-marker-min-width-right');
- rightElement.title = model.mediaText();
+ UI.Tooltip.Tooltip.install(rightElement, model.mediaText());
appendLabel(rightElement, model.minWidthExpression(), true, true);
}
diff --git a/front_end/emulation/SensorsView.js b/front_end/emulation/SensorsView.js
index 5fb774e..c8cb5d2 100644
--- a/front_end/emulation/SensorsView.js
+++ b/front_end/emulation/SensorsView.js
@@ -246,7 +246,7 @@
this._latitudeInput, this._applyLocationUserInput.bind(this), SDK.EmulationModel.Location.latitudeValidator,
true, 0.1);
this._latitudeSetter(String(location.latitude));
- this._latitudeInput.title = modifierKeyMessage;
+ UI.Tooltip.Tooltip.install(this._latitudeInput, modifierKeyMessage);
latitudeGroup.appendChild(UI.UIUtils.createLabel(ls`Latitude`, 'latlong-title', this._latitudeInput));
this._longitudeInput = UI.UIUtils.createInput('', 'number');
@@ -257,7 +257,7 @@
this._longitudeInput, this._applyLocationUserInput.bind(this), SDK.EmulationModel.Location.longitudeValidator,
true, 0.1);
this._longitudeSetter(String(location.longitude));
- this._longitudeInput.title = modifierKeyMessage;
+ UI.Tooltip.Tooltip.install(this._longitudeInput, modifierKeyMessage);
longitudeGroup.appendChild(UI.UIUtils.createLabel(ls`Longitude`, 'latlong-title', this._longitudeInput));
this._timezoneInput = UI.UIUtils.createInput('', 'text');
@@ -424,11 +424,11 @@
if (disable) {
this._deviceOrientationFieldset.disabled = true;
this._stageElement.classList.add('disabled');
- this._stageElement.title = ls`Enable orientation to rotate`;
+ UI.Tooltip.Tooltip.install(this._stageElement, ls`Enable orientation to rotate`);
} else {
this._deviceOrientationFieldset.disabled = false;
this._stageElement.classList.remove('disabled');
- this._stageElement.title = ls`Shift+drag horizontally to rotate around the y-axis`;
+ UI.Tooltip.Tooltip.install(this._stageElement, ls`Shift+drag horizontally to rotate around the y-axis`);
}
}
diff --git a/front_end/event_listeners/EventListenersView.js b/front_end/event_listeners/EventListenersView.js
index 6bc7ca8..1f70d74 100644
--- a/front_end/event_listeners/EventListenersView.js
+++ b/front_end/event_listeners/EventListenersView.js
@@ -343,7 +343,7 @@
if (this._eventListener.canRemove()) {
const deleteButton = title.createChild('span', 'event-listener-button');
deleteButton.textContent = Common.UIString.UIString('Remove');
- deleteButton.title = Common.UIString.UIString('Delete event listener');
+ UI.Tooltip.Tooltip.install(deleteButton, Common.UIString.UIString('Delete event listener'));
deleteButton.addEventListener('click', event => {
this._removeListener();
event.consume();
@@ -354,7 +354,8 @@
if (this._eventListener.isScrollBlockingType() && this._eventListener.canTogglePassive()) {
const passiveButton = title.createChild('span', 'event-listener-button');
passiveButton.textContent = Common.UIString.UIString('Toggle Passive');
- passiveButton.title = Common.UIString.UIString('Toggle whether event listener is passive or blocking');
+ UI.Tooltip.Tooltip.install(
+ passiveButton, Common.UIString.UIString('Toggle whether event listener is passive or blocking'));
passiveButton.addEventListener('click', event => {
this._togglePassiveListener();
event.consume();
diff --git a/front_end/help/ReleaseNoteView.js b/front_end/help/ReleaseNoteView.js
index 4764adb..fcb7fd7 100644
--- a/front_end/help/ReleaseNoteView.js
+++ b/front_end/help/ReleaseNoteView.js
@@ -70,12 +70,12 @@
const imageLink = /** @type {!HTMLElement} */ (UI.XLink.XLink.create(releaseNote.link, ' '));
imageLink.classList.add('release-note-image');
- imageLink.title = ls`${latestReleaseNote().header}`;
+ UI.Tooltip.Tooltip.install(imageLink, ls`${latestReleaseNote().header}`);
hbox.appendChild(imageLink);
const image = /** @type {!HTMLImageElement} */ (imageLink.createChild('img'));
image.src = 'Images/whatsnew.png';
- image.title = imageLink.title;
+ UI.Tooltip.Tooltip.install(image, imageLink.title);
image.alt = image.title;
return hbox;
diff --git a/front_end/inspector_main/InspectorMain.js b/front_end/inspector_main/InspectorMain.js
index 7db4a5b..55d85d2 100644
--- a/front_end/inspector_main/InspectorMain.js
+++ b/front_end/inspector_main/InspectorMain.js
@@ -159,7 +159,7 @@
const javaScriptDisabled = Common.Settings.Settings.instance().moduleSetting('javaScriptDisabled').get();
if (javaScriptDisabled) {
icon = UI.Icon.Icon.create('smallicon-warning');
- icon.title = Common.UIString.UIString('JavaScript is disabled');
+ UI.Tooltip.Tooltip.install(icon, Common.UIString.UIString('JavaScript is disabled'));
}
UI.InspectorView.InspectorView.instance().setPanelIcon('sources', icon);
}
diff --git a/front_end/issues/IssuesPane.js b/front_end/issues/IssuesPane.js
index 6d0df64..56baed0 100644
--- a/front_end/issues/IssuesPane.js
+++ b/front_end/issues/IssuesPane.js
@@ -262,13 +262,13 @@
icon.classList.add('link');
url = request.url();
filename = extractShortPath(url);
- icon.title = ls`Click to show request in the network panel`;
+ UI.Tooltip.Tooltip.install(icon, ls`Click to show request in the network panel`);
} else {
- icon.title = ls`Request unavailable in the network panel, try reloading the inspected page`;
+ UI.Tooltip.Tooltip.install(icon, ls`Request unavailable in the network panel, try reloading the inspected page`);
icon.classList.add('unavailable');
}
if (url) {
- requestCell.title = url;
+ UI.Tooltip.Tooltip.install(requestCell, url);
}
requestCell.appendChild(document.createTextNode(filename));
return requestCell;
diff --git a/front_end/lighthouse/LighthouseReportRenderer.js b/front_end/lighthouse/LighthouseReportRenderer.js
index 8b3e6df..a1d80d1 100644
--- a/front_end/lighthouse/LighthouseReportRenderer.js
+++ b/front_end/lighthouse/LighthouseReportRenderer.js
@@ -71,7 +71,7 @@
const label = simulated ? i18nString(UIStrings.viewOriginalTrace) : i18nString(UIStrings.viewTrace);
const timelineButton = UI.UIUtils.createTextButton(label, onViewTraceClick, 'view-trace');
if (simulated) {
- timelineButton.title = i18nString(UIStrings.thePerformanceMetricsAboveAre);
+ UI.Tooltip.Tooltip.install(timelineButton, i18nString(UIStrings.thePerformanceMetricsAboveAre));
}
container.insertBefore(timelineButton, disclaimerEl.nextSibling);
@@ -114,7 +114,7 @@
const element = await Common.Linkifier.Linkifier.linkify(
node, {tooltip: detailsItem.snippet, preventKeyboardFocus: undefined});
- origHTMLElement.title = '';
+ UI.Tooltip.Tooltip.install(origHTMLElement, '');
origHTMLElement.textContent = '';
origHTMLElement.appendChild(element);
}
@@ -143,7 +143,7 @@
tabStop: undefined,
text: undefined
});
- origHTMLElement.title = '';
+ UI.Tooltip.Tooltip.install(origHTMLElement, '');
origHTMLElement.textContent = '';
origHTMLElement.appendChild(element);
}
diff --git a/front_end/mobile_throttling/NetworkPanelIndicator.js b/front_end/mobile_throttling/NetworkPanelIndicator.js
index b23e5d8..7587932 100644
--- a/front_end/mobile_throttling/NetworkPanelIndicator.js
+++ b/front_end/mobile_throttling/NetworkPanelIndicator.js
@@ -23,13 +23,13 @@
let icon = null;
if (manager.isThrottling()) {
icon = UI.Icon.Icon.create('smallicon-warning');
- icon.title = Common.UIString.UIString('Network throttling is enabled');
+ UI.Tooltip.Tooltip.install(icon, Common.UIString.UIString('Network throttling is enabled'));
} else if (SDK.NetworkManager.MultitargetNetworkManager.instance().isIntercepting()) {
icon = UI.Icon.Icon.create('smallicon-warning');
- icon.title = Common.UIString.UIString('Requests may be rewritten by local overrides');
+ UI.Tooltip.Tooltip.install(icon, Common.UIString.UIString('Requests may be rewritten by local overrides'));
} else if (manager.isBlocking()) {
icon = UI.Icon.Icon.create('smallicon-warning');
- icon.title = Common.UIString.UIString('Requests may be blocked');
+ UI.Tooltip.Tooltip.install(icon, Common.UIString.UIString('Requests may be blocked'));
}
UI.InspectorView.InspectorView.instance().setPanelIcon('network', icon);
}
diff --git a/front_end/mobile_throttling/ThrottlingManager.js b/front_end/mobile_throttling/ThrottlingManager.js
index 58acbcb..8015796 100644
--- a/front_end/mobile_throttling/ThrottlingManager.js
+++ b/front_end/mobile_throttling/ThrottlingManager.js
@@ -234,7 +234,7 @@
if (this._cpuThrottlingRate !== CPUThrottlingRates.NoThrottling) {
Host.userMetrics.actionTaken(Host.UserMetrics.Action.CpuThrottlingEnabled);
icon = UI.Icon.Icon.create('smallicon-warning');
- icon.title = Common.UIString.UIString('CPU throttling is enabled');
+ UI.Tooltip.Tooltip.install(icon, Common.UIString.UIString('CPU throttling is enabled'));
}
const index = this._cpuThrottlingRates.indexOf(this._cpuThrottlingRate);
for (const control of this._cpuThrottlingControls) {
diff --git a/front_end/mobile_throttling/ThrottlingSettingsTab.js b/front_end/mobile_throttling/ThrottlingSettingsTab.js
index cf955ca..9876d04 100644
--- a/front_end/mobile_throttling/ThrottlingSettingsTab.js
+++ b/front_end/mobile_throttling/ThrottlingSettingsTab.js
@@ -69,7 +69,7 @@
const title = element.createChild('div', 'conditions-list-text conditions-list-title');
const titleText = title.createChild('div', 'conditions-list-title-text');
titleText.textContent = conditions.title;
- titleText.title = conditions.title;
+ UI.Tooltip.Tooltip.install(titleText, conditions.title);
element.createChild('div', 'conditions-list-separator');
element.createChild('div', 'conditions-list-text').textContent = throughputText(conditions.download);
element.createChild('div', 'conditions-list-separator');
diff --git a/front_end/network/EventSourceMessagesView.js b/front_end/network/EventSourceMessagesView.js
index aefff79..0ab4e4d 100644
--- a/front_end/network/EventSourceMessagesView.js
+++ b/front_end/network/EventSourceMessagesView.js
@@ -114,7 +114,7 @@
('0' + time.getSeconds()).substr(-2) + '.' + ('00' + time.getMilliseconds()).substr(-3);
const timeNode = document.createElement('div');
UI.UIUtils.createTextChild(timeNode, timeText);
- timeNode.title = time.toLocaleString();
+ UI.Tooltip.Tooltip.install(timeNode, time.toLocaleString());
super({id: message.eventId, type: message.eventName, data: message.data, time: timeNode});
this._message = message;
}
diff --git a/front_end/network/NetworkConfigView.js b/front_end/network/NetworkConfigView.js
index 3309c40..06b3994 100644
--- a/front_end/network/NetworkConfigView.js
+++ b/front_end/network/NetworkConfigView.js
@@ -48,7 +48,7 @@
const otherUserAgentElement = UI.UIUtils.createInput('', 'text');
otherUserAgentElement.value = userAgentSetting.get();
- otherUserAgentElement.title = userAgentSetting.get();
+ UI.Tooltip.Tooltip.install(otherUserAgentElement, userAgentSetting.get());
otherUserAgentElement.placeholder = Common.UIString.UIString('Enter a custom user agent');
otherUserAgentElement.required = true;
UI.ARIAUtils.setAccessibleName(otherUserAgentElement, otherUserAgentElement.placeholder);
@@ -70,7 +70,7 @@
if (value !== customOverride.value) {
userAgentSetting.set(value);
otherUserAgentElement.value = value;
- otherUserAgentElement.title = value;
+ UI.Tooltip.Tooltip.install(otherUserAgentElement, value);
} else {
otherUserAgentElement.select();
}
@@ -102,7 +102,7 @@
errorElement.textContent = '';
}
userAgentSetting.set(otherUserAgentElement.value);
- otherUserAgentElement.title = otherUserAgentElement.value;
+ UI.Tooltip.Tooltip.install(otherUserAgentElement, otherUserAgentElement.value);
settingChanged();
}
}
diff --git a/front_end/network/NetworkDataGridNode.js b/front_end/network/NetworkDataGridNode.js
index 90ce4a0..0080d63 100644
--- a/front_end/network/NetworkDataGridNode.js
+++ b/front_end/network/NetworkDataGridNode.js
@@ -945,7 +945,7 @@
*/
_setTextAndTitle(element, text, title) {
UI.UIUtils.createTextChild(element, text);
- element.title = title || text;
+ UI.Tooltip.Tooltip.install(element, title || text);
}
/**
@@ -962,7 +962,7 @@
link.textContent = linkText;
link.addEventListener('click', handler);
element.appendChild(link);
- element.title = cellText;
+ UI.Tooltip.Tooltip.install(element, cellText);
}
/**
@@ -1147,10 +1147,10 @@
const networkManager = SDK.NetworkManager.NetworkManager.forRequest(this._request);
UI.UIUtils.createTextChild(cell, networkManager ? networkManager.target().decorateLabel(name) : name);
this._appendSubtitle(cell, this._request.path());
- cell.title = this._request.url();
+ UI.Tooltip.Tooltip.install(cell, this._request.url());
} else if (text) {
UI.UIUtils.createTextChild(cell, text);
- cell.title = text;
+ UI.Tooltip.Tooltip.install(cell, text);
}
}
@@ -1167,14 +1167,14 @@
if (this._request.localizedFailDescription) {
UI.UIUtils.createTextChild(cell, failText);
this._appendSubtitle(cell, this._request.localizedFailDescription, true);
- cell.title = failText + ' ' + this._request.localizedFailDescription;
+ UI.Tooltip.Tooltip.install(cell, failText + ' ' + this._request.localizedFailDescription);
} else {
this._setTextAndTitle(cell, failText);
}
} else if (this._request.statusCode) {
UI.UIUtils.createTextChild(cell, '' + this._request.statusCode);
this._appendSubtitle(cell, this._request.statusText);
- cell.title = this._request.statusCode + ' ' + this._request.statusText;
+ UI.Tooltip.Tooltip.install(cell, this._request.statusCode + ' ' + this._request.statusText);
} else if (this._request.parsedURL.isDataURL()) {
this._setTextAndTitle(cell, Common.UIString.UIString('(data)'));
} else if (this._request.canceled) {
@@ -1261,7 +1261,7 @@
}
switch (initiator.type) {
case SDK.NetworkRequest.InitiatorType.Parser: {
- cell.title = initiator.url + ':' + (initiator.lineNumber + 1);
+ UI.Tooltip.Tooltip.install(cell, initiator.url + ':' + (initiator.lineNumber + 1));
const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(initiator.url);
cell.appendChild(Components.Linkifier.Linkifier.linkifyURL(
initiator.url, /** @type {!Components.Linkifier.LinkifyURLOptions} */ ({
@@ -1274,7 +1274,7 @@
}
case SDK.NetworkRequest.InitiatorType.Redirect: {
- cell.title = initiator.url;
+ UI.Tooltip.Tooltip.install(cell, initiator.url);
const redirectSource = /** @type {!SDK.NetworkRequest.NetworkRequest} */ (request.redirectSource());
console.assert(redirectSource !== null);
if (this.parentView().nodeForRequest(redirectSource)) {
@@ -1302,7 +1302,7 @@
networkManager.target(), initiator.scriptId, initiator.url, initiator.lineNumber,
{columnNumber: initiator.columnNumber, className: undefined, tabStop: undefined});
}
- /** @type {!HTMLElement} */ (this._linkifiedInitiatorAnchor).title = '';
+ /** @type {!HTMLElement} */ UI.Tooltip.Tooltip.install((this._linkifiedInitiatorAnchor), '');
cell.appendChild(this._linkifiedInitiatorAnchor);
this._appendSubtitle(cell, Common.UIString.UIString('Script'));
cell.classList.add('network-script-initiated');
@@ -1310,7 +1310,7 @@
}
case SDK.NetworkRequest.InitiatorType.Preload: {
- cell.title = Common.UIString.UIString('Preload');
+ UI.Tooltip.Tooltip.install(cell, Common.UIString.UIString('Preload'));
cell.classList.add('network-dim-cell');
cell.appendChild(document.createTextNode(Common.UIString.UIString('Preload')));
break;
@@ -1323,7 +1323,7 @@
}
default: {
- cell.title = Common.UIString.UIString('Other');
+ UI.Tooltip.Tooltip.install(cell, Common.UIString.UIString('Other'));
cell.classList.add('network-dim-cell');
cell.appendChild(document.createTextNode(Common.UIString.UIString('Other')));
}
@@ -1338,28 +1338,28 @@
if (this._request.cachedInMemory()) {
UI.UIUtils.createTextChild(cell, ls`(memory cache)`);
- cell.title = ls`Served from memory cache, resource size: ${resourceSize}`;
+ UI.Tooltip.Tooltip.install(cell, ls`Served from memory cache, resource size: ${resourceSize}`);
cell.classList.add('network-dim-cell');
} else if (this._request.fetchedViaServiceWorker) {
UI.UIUtils.createTextChild(cell, ls`(ServiceWorker)`);
- cell.title = ls`Served from ServiceWorker, resource size: ${resourceSize}`;
+ UI.Tooltip.Tooltip.install(cell, ls`Served from ServiceWorker, resource size: ${resourceSize}`);
cell.classList.add('network-dim-cell');
} else if (this._request.redirectSourceSignedExchangeInfoHasNoErrors()) {
UI.UIUtils.createTextChild(cell, ls`(signed-exchange)`);
- cell.title = ls`Served from Signed HTTP Exchange, resource size: ${resourceSize}`;
+ UI.Tooltip.Tooltip.install(cell, ls`Served from Signed HTTP Exchange, resource size: ${resourceSize}`);
cell.classList.add('network-dim-cell');
} else if (this._request.fromPrefetchCache()) {
UI.UIUtils.createTextChild(cell, ls`(prefetch cache)`);
- cell.title = ls`Served from prefetch cache, resource size: ${resourceSize}`;
+ UI.Tooltip.Tooltip.install(cell, ls`Served from prefetch cache, resource size: ${resourceSize}`);
cell.classList.add('network-dim-cell');
} else if (this._request.cached()) {
UI.UIUtils.createTextChild(cell, ls`(disk cache)`);
- cell.title = ls`Served from disk cache, resource size: ${resourceSize}`;
+ UI.Tooltip.Tooltip.install(cell, ls`Served from disk cache, resource size: ${resourceSize}`);
cell.classList.add('network-dim-cell');
} else {
const transferSize = Platform.NumberUtilities.bytesToString(this._request.transferSize);
UI.UIUtils.createTextChild(cell, transferSize);
- cell.title = `${transferSize} transferred over network, resource size: ${resourceSize}`;
+ UI.Tooltip.Tooltip.install(cell, `${transferSize} transferred over network, resource size: ${resourceSize}`);
}
this._appendSubtitle(cell, resourceSize);
}
diff --git a/front_end/network/NetworkFrameGrouper.js b/front_end/network/NetworkFrameGrouper.js
index 00de907..405803c 100644
--- a/front_end/network/NetworkFrameGrouper.js
+++ b/front_end/network/NetworkFrameGrouper.js
@@ -80,7 +80,7 @@
const name = this.displayName();
cell.appendChild(UI.Icon.Icon.create('largeicon-navigator-frame', 'network-frame-group-icon'));
UI.UIUtils.createTextChild(cell, name);
- cell.title = name;
+ UI.Tooltip.Tooltip.install(cell, name);
this.setCellAccessibleName(cell.textContent || '', cell, columnId);
}
}
diff --git a/front_end/network/NetworkItemView.js b/front_end/network/NetworkItemView.js
index 218de83..d9ea20c 100644
--- a/front_end/network/NetworkItemView.js
+++ b/front_end/network/NetworkItemView.js
@@ -79,7 +79,7 @@
const signedExchangeInfo = request.signedExchangeInfo();
if (signedExchangeInfo && signedExchangeInfo.errors && signedExchangeInfo.errors.length) {
const icon = UI.Icon.Icon.create('smallicon-error');
- icon.title = Common.UIString.UIString('SignedExchange error');
+ UI.Tooltip.Tooltip.install(icon, Common.UIString.UIString('SignedExchange error'));
this.setTabIcon(Tabs.Preview, icon);
}
this.appendTab(
diff --git a/front_end/network/NetworkLogView.js b/front_end/network/NetworkLogView.js
index 909e7e3..74b06cd 100644
--- a/front_end/network/NetworkLogView.js
+++ b/front_end/network/NetworkLogView.js
@@ -145,7 +145,7 @@
'hide-data-url', Common.UIString.UIString('Hide data URLs'), true, this._networkHideDataURLSetting);
this._dataURLFilterUI.addEventListener(
UI.FilterBar.FilterUI.Events.FilterChanged, this._filterChanged.bind(this), this);
- this._dataURLFilterUI.element().title = ls`Hides data: and blob: URLs`;
+ UI.Tooltip.Tooltip.install(this._dataURLFilterUI.element(), ls`Hides data: and blob: URLs`);
filterBar.addFilter(this._dataURLFilterUI);
const filterItems =
@@ -162,14 +162,15 @@
'only-show-issues', ls`Has blocked cookies`, true, this._networkShowIssuesOnlySetting);
this._onlyIssuesFilterUI.addEventListener(
UI.FilterBar.FilterUI.Events.FilterChanged, this._filterChanged.bind(this), this);
- this._onlyIssuesFilterUI.element().title = ls`Only show requests with blocked response cookies`;
+ UI.Tooltip.Tooltip.install(
+ this._onlyIssuesFilterUI.element(), ls`Only show requests with blocked response cookies`);
filterBar.addFilter(this._onlyIssuesFilterUI);
this._onlyBlockedRequestsUI = new UI.FilterBar.CheckboxFilterUI(
'only-show-blocked-requests', ls`Blocked Requests`, true, this._networkOnlyBlockedRequestsSetting);
this._onlyBlockedRequestsUI.addEventListener(
UI.FilterBar.FilterUI.Events.FilterChanged, this._filterChanged.bind(this), this);
- this._onlyBlockedRequestsUI.element().title = ls`Only show blocked requests`;
+ UI.Tooltip.Tooltip.install(this._onlyBlockedRequestsUI.element(), ls`Only show blocked requests`);
filterBar.addFilter(this._onlyBlockedRequestsUI);
diff --git a/front_end/network/NetworkManageCustomHeadersView.js b/front_end/network/NetworkManageCustomHeadersView.js
index 4a9146e..174d4be 100644
--- a/front_end/network/NetworkManageCustomHeadersView.js
+++ b/front_end/network/NetworkManageCustomHeadersView.js
@@ -74,7 +74,7 @@
element.classList.add('custom-headers-list-item');
const header = element.createChild('div', 'custom-header-name');
header.textContent = item.header;
- header.title = item.header;
+ UI.Tooltip.Tooltip.install(header, item.header);
return element;
}
diff --git a/front_end/network/RequestCookiesView.js b/front_end/network/RequestCookiesView.js
index d4f6633..e33ddff 100644
--- a/front_end/network/RequestCookiesView.js
+++ b/front_end/network/RequestCookiesView.js
@@ -53,7 +53,8 @@
this._requestCookiesTitle = this.element.createChild('div');
const titleText = this._requestCookiesTitle.createChild('span', 'request-cookies-title');
titleText.textContent = ls`Request Cookies`;
- titleText.title = ls`Cookies that were sent to the server in the 'cookie' header of the request`;
+ UI.Tooltip.Tooltip.install(
+ titleText, ls`Cookies that were sent to the server in the 'cookie' header of the request`);
const requestCookiesCheckbox = /** @type {!UI.UIUtils.CheckboxLabel} */ (UI.SettingsUI.createSettingCheckbox(
ls`show filtered out request cookies`, this._showFilteredOutCookiesSetting,
diff --git a/front_end/network/RequestHeadersView.js b/front_end/network/RequestHeadersView.js
index ad2b2baf..6e12bc8 100644
--- a/front_end/network/RequestHeadersView.js
+++ b/front_end/network/RequestHeadersView.js
@@ -685,7 +685,7 @@
const statusCodeImage = /** @type {!UI.UIUtils.DevToolsIconLabel} */ (
statusCodeFragment.createChild('span', 'resource-status-image', 'dt-icon-label'));
- statusCodeImage.title = this._request.statusCode + ' ' + this._request.statusText;
+ UI.Tooltip.Tooltip.install(statusCodeImage, this._request.statusCode + ' ' + this._request.statusText);
if (this._request.statusCode < 300 || this._request.statusCode === 304) {
statusCodeImage.type = 'smallicon-green-ball';
@@ -759,7 +759,7 @@
cautionText = ls`Provisional headers are shown`;
}
const cautionElement = document.createElement('div');
- cautionElement.title = cautionTitle;
+ UI.Tooltip.Tooltip.install(cautionElement, cautionTitle);
/** @type {!UI.UIUtils.DevToolsIconLabel} */ (cautionElement.createChild('span', '', 'dt-icon-label')).type =
'smallicon-warning';
cautionElement.createChild('div', 'caution').textContent = cautionText;
@@ -796,7 +796,7 @@
}
titleText += SDK.NetworkRequest.setCookieBlockedReasonToUiString(blockedReason);
}
- icon.title = titleText;
+ UI.Tooltip.Tooltip.install(icon, titleText);
}
}
diff --git a/front_end/network/RequestTimingView.js b/front_end/network/RequestTimingView.js
index be41110..2cbed94 100644
--- a/front_end/network/RequestTimingView.js
+++ b/front_end/network/RequestTimingView.js
@@ -363,7 +363,7 @@
const metric = tr.createChild('td', 'network-timing-metric');
const description = serverTiming.description || serverTiming.metric;
UI.UIUtils.createTextChild(metric, description);
- metric.title = description;
+ UI.Tooltip.Tooltip.install(metric, description);
const row = tr.createChild('td').createChild('div', 'network-timing-row');
if (serverTiming.value === null) {
diff --git a/front_end/network/ResourceWebSocketFrameView.js b/front_end/network/ResourceWebSocketFrameView.js
index 229411b..9f3f233 100644
--- a/front_end/network/ResourceWebSocketFrameView.js
+++ b/front_end/network/ResourceWebSocketFrameView.js
@@ -288,7 +288,7 @@
('0' + time.getSeconds()).substr(-2) + '.' + ('00' + time.getMilliseconds()).substr(-3);
const timeNode = document.createElement('div');
UI.UIUtils.createTextChild(timeNode, timeText);
- timeNode.title = time.toLocaleString();
+ UI.Tooltip.Tooltip.install(timeNode, time.toLocaleString());
let dataText = frame.text;
let description = ResourceWebSocketFrameView.opCodeDescription(frame.opCode, frame.mask);
diff --git a/front_end/object_ui/ObjectPropertiesSection.js b/front_end/object_ui/ObjectPropertiesSection.js
index 7f2fb01..461375b 100644
--- a/front_end/object_ui/ObjectPropertiesSection.js
+++ b/front_end/object_ui/ObjectPropertiesSection.js
@@ -257,7 +257,7 @@
} else {
addElements('\u0192', text, nameAndArguments(text));
}
- valueElement.title = description.trimEndWithMaxLength(500);
+ UI.Tooltip.Tooltip.install(valueElement, description.trimEndWithMaxLength(500));
return valueElement;
/**
@@ -353,7 +353,7 @@
const previewFormatter = new RemoteObjectPreviewFormatter();
previewFormatter.appendObjectPreview(valueElement, value.preview, false /* isEntry */);
propertyValue = new ObjectPropertyValue(valueElement);
- /** @type {!HTMLElement} */ (propertyValue.element).title = description || '';
+ UI.Tooltip.Tooltip.install(propertyValue.element, description || '');
} else if (
description.length > (/** @type {*} */ (self).ObjectUI.ObjectPropertiesSection._maxRenderableStringLength ||
maxRenderableStringLength)) {
@@ -361,7 +361,7 @@
} else {
propertyValue = new ObjectPropertyValue(valueElement);
propertyValue.element.textContent = description;
- /** @type {!HTMLElement} */ (propertyValue.element).title = description;
+ UI.Tooltip.Tooltip.install(propertyValue.element, description);
}
}
@@ -381,7 +381,7 @@
function createUnknownInternalLocationElement() {
const valueElement = document.createElement('span');
valueElement.textContent = '<' + Common.UIString.UIString('unknown') + '>';
- valueElement.title = description || '';
+ UI.Tooltip.Tooltip.install(valueElement, description || '');
return valueElement;
}
@@ -400,7 +400,7 @@
} else {
UI.UIUtils.createTextChild(valueElement, text);
propertyValue = new ObjectPropertyValue(valueElement);
- valueElement.title = description || '';
+ UI.Tooltip.Tooltip.install(valueElement, description || '');
}
valueElement.createChild('span', 'object-value-string-quote').textContent = '"';
return propertyValue;
@@ -422,7 +422,7 @@
UI.UIUtils.createTextChild(valueElement, `${className} `);
valueElement.appendChild(contentString.element);
propertyValue = new ObjectPropertyValue(valueElement);
- valueElement.title = text;
+ UI.Tooltip.Tooltip.install(valueElement, text);
}
return propertyValue;
@@ -455,7 +455,7 @@
valueElement.createChild('span', 'object-value-scientific-notation-mantissa').textContent = numberParts[0];
valueElement.createChild('span', 'object-value-scientific-notation-exponent').textContent = 'e' + numberParts[1];
valueElement.classList.add('object-value-scientific-notation-number');
- valueElement.title = description || '';
+ UI.Tooltip.Tooltip.install(valueElement, description || '');
return valueElement;
}
}
@@ -827,7 +827,7 @@
return rootElement;
}
element.classList.add('object-value-calculate-value-button');
- element.title = Common.UIString.UIString('Invoke property getter');
+ UI.Tooltip.Tooltip.install(element, Common.UIString.UIString('Invoke property getter'));
element.addEventListener('click', onInvokeGetterClick, false);
/**
@@ -919,7 +919,7 @@
const element = document.createElement('div');
element.classList.add('object-value-calculate-value-button');
element.textContent = Common.UIString.UIString('(...)');
- element.title = Common.UIString.UIString('Show all %d', this.childCount());
+ UI.Tooltip.Tooltip.install(element, Common.UIString.UIString('Show all %d', this.childCount()));
const children = this.children();
for (let i = this._maxNumPropertiesToShow; i < this.childCount(); ++i) {
children[i].hidden = true;
@@ -1037,7 +1037,7 @@
valueElement.setTextContentTruncatedIfNeeded(value.description || '');
}
valueElement.classList.add('object-value-' + (value.subtype || value.type));
- valueElement.title = value.description || '';
+ UI.Tooltip.Tooltip.install(valueElement, value.description || '');
return valueElement;
}
@@ -1070,7 +1070,7 @@
this.valueElement = /** @type {!HTMLElement} */ (document.createElement('span'));
this.valueElement.classList.add('object-value-undefined');
this.valueElement.textContent = Common.UIString.UIString('<unreadable>');
- this.valueElement.title = Common.UIString.UIString('No property getter');
+ UI.Tooltip.Tooltip.install(this.valueElement, Common.UIString.UIString('No property getter'));
}
const valueText = this.valueElement.textContent;
@@ -1098,7 +1098,7 @@
const name = this.property.name;
if (this.property.synthetic) {
- this.nameElement.title = name;
+ UI.Tooltip.Tooltip.install(this.nameElement, name);
return;
}
@@ -1112,11 +1112,11 @@
'';
if (this.property.private || useDotNotation.test(name)) {
- this.nameElement.title = parentPath ? `${parentPath}.${name}` : name;
+ UI.Tooltip.Tooltip.install(this.nameElement, parentPath ? `${parentPath}.${name}` : name);
} else if (isInteger.test(name)) {
- this.nameElement.title = `${parentPath}[${name}]`;
+ UI.Tooltip.Tooltip.install(this.nameElement, `${parentPath}[${name}]`);
} else {
- this.nameElement.title = `${parentPath}[${JSON.stringify(name)}]`;
+ UI.Tooltip.Tooltip.install(this.nameElement, `${parentPath}[${JSON.stringify(name)}]`);
}
}
@@ -1843,7 +1843,7 @@
this._text = text;
this._maxLength = maxLength;
container.textContent = text.slice(0, maxLength);
- /** @type {!HTMLElement} */ (container).title = `${text.slice(0, maxLength)}…`;
+ UI.Tooltip.Tooltip.install(container, `${text.slice(0, maxLength)}…`);
/** @type {?Element} */
this._expandElement = container.createChild('span');
diff --git a/front_end/object_ui/RemoteObjectPreviewFormatter.js b/front_end/object_ui/RemoteObjectPreviewFormatter.js
index 32278e3..b397434 100644
--- a/front_end/object_ui/RemoteObjectPreviewFormatter.js
+++ b/front_end/object_ui/RemoteObjectPreviewFormatter.js
@@ -294,7 +294,7 @@
if (type === 'accessor') {
span.textContent = '(...)';
- span.title = Common.UIString.UIString('The property is computed with a getter');
+ UI.Tooltip.Tooltip.install(span, Common.UIString.UIString('The property is computed with a getter'));
return span;
}
@@ -324,7 +324,7 @@
preview = '{…}';
}
span.textContent = preview;
- span.title = description;
+ UI.Tooltip.Tooltip.install(span, description);
return span;
}
diff --git a/front_end/perf_ui/FilmStripView.js b/front_end/perf_ui/FilmStripView.js
index 79cb514..8f215e6 100644
--- a/front_end/perf_ui/FilmStripView.js
+++ b/front_end/perf_ui/FilmStripView.js
@@ -74,7 +74,8 @@
const frameTime = Number.millisToString(time - this._zeroTime);
const element = document.createElement('div');
element.classList.add('frame');
- element.title = Common.UIString.UIString('Doubleclick to zoom image. Click to view preceding requests.');
+ UI.Tooltip.Tooltip.install(
+ element, Common.UIString.UIString('Doubleclick to zoom image. Click to view preceding requests.'));
element.createChild('div', 'time').textContent = frameTime;
element.tabIndex = 0;
element.setAttribute('aria-label', ls`Screenshot for ${frameTime} - select to view preceding requests.`);
@@ -237,9 +238,9 @@
*/
constructor(filmStripFrame, zeroTime) {
const prevButton = UI.UIUtils.createTextButton('\u25C0', this._onPrevFrame.bind(this));
- prevButton.title = Common.UIString.UIString('Previous frame');
+ UI.Tooltip.Tooltip.install(prevButton, Common.UIString.UIString('Previous frame'));
const nextButton = UI.UIUtils.createTextButton('\u25B6', this._onNextFrame.bind(this));
- nextButton.title = Common.UIString.UIString('Next frame');
+ UI.Tooltip.Tooltip.install(nextButton, Common.UIString.UIString('Next frame'));
this._fragment = UI.Fragment.Fragment.build`
<x-widget flex=none margin=12px>
diff --git a/front_end/perf_ui/FlameChart.js b/front_end/perf_ui/FlameChart.js
index 814eed8..d0a3ce5 100644
--- a/front_end/perf_ui/FlameChart.js
+++ b/front_end/perf_ui/FlameChart.js
@@ -2060,7 +2060,7 @@
}
const marker = timelineData.markers[markerIndex];
const barX = this._timeToPositionClipped(marker.startTime());
- element.title = marker.title() || '';
+ UI.Tooltip.Tooltip.install(element, marker.title() || '');
const style = element.style;
style.left = barX + 'px';
style.backgroundColor = marker.color();
diff --git a/front_end/persistence/EditFileSystemView.js b/front_end/persistence/EditFileSystemView.js
index e5f9af8..86e0ddc 100644
--- a/front_end/persistence/EditFileSystemView.js
+++ b/front_end/persistence/EditFileSystemView.js
@@ -112,7 +112,7 @@
const pathPrefix = /** @type {string} */ (editable ? item : Common.UIString.UIString('%s (via .devtools)', item));
const pathPrefixElement = element.createChild('div', 'file-system-value');
pathPrefixElement.textContent = pathPrefix;
- pathPrefixElement.title = pathPrefix;
+ UI.Tooltip.Tooltip.install(pathPrefixElement, pathPrefix);
return element;
}
diff --git a/front_end/persistence/PersistenceUtils.js b/front_end/persistence/PersistenceUtils.js
index 373eaa5..c183ab8 100644
--- a/front_end/persistence/PersistenceUtils.js
+++ b/front_end/persistence/PersistenceUtils.js
@@ -41,7 +41,7 @@
return null;
}
const icon = UI.Icon.Icon.create('mediumicon-file-sync');
- icon.title = PersistenceUtils.tooltipForUISourceCode(binding.network);
+ UI.Tooltip.Tooltip.install(icon, PersistenceUtils.tooltipForUISourceCode(binding.network));
// TODO(allada) This will not work properly with dark theme.
if (NetworkPersistenceManager.instance().project() === binding.fileSystem.project()) {
icon.style.filter = 'hue-rotate(160deg)';
@@ -54,7 +54,7 @@
}
const icon = UI.Icon.Icon.create('mediumicon-file');
- icon.title = PersistenceUtils.tooltipForUISourceCode(uiSourceCode);
+ UI.Tooltip.Tooltip.install(icon, PersistenceUtils.tooltipForUISourceCode(uiSourceCode));
return icon;
}
}
diff --git a/front_end/persistence/WorkspaceSettingsTab.js b/front_end/persistence/WorkspaceSettingsTab.js
index dd848dd..7d62700 100644
--- a/front_end/persistence/WorkspaceSettingsTab.js
+++ b/front_end/persistence/WorkspaceSettingsTab.js
@@ -130,7 +130,7 @@
UI.ARIAUtils.markAsHeading(nameElement, 2);
const path = header.createChild('div', 'file-system-path');
path.textContent = fileSystemPath;
- path.title = fileSystemPath;
+ UI.Tooltip.Tooltip.install(path, fileSystemPath);
const toolbar = new UI.Toolbar.Toolbar('');
const button = new UI.Toolbar.ToolbarButton(Common.UIString.UIString('Remove'), 'largeicon-delete');
diff --git a/front_end/profiler/HeapProfileView.js b/front_end/profiler/HeapProfileView.js
index d2fc31a..b16bc26 100644
--- a/front_end/profiler/HeapProfileView.js
+++ b/front_end/profiler/HeapProfileView.js
@@ -239,7 +239,7 @@
profileHeader.updateStatus(ls`Recording…`);
const icon = UI.Icon.Icon.create('smallicon-warning');
- icon.title = ls`Heap profiler is recording`;
+ UI.Tooltip.Tooltip.install(icon, ls`Heap profiler is recording`);
UI.InspectorView.InspectorView.instance().setPanelIcon('heap_profiler', icon);
this._recording = true;
diff --git a/front_end/profiler/IsolateSelector.js b/front_end/profiler/IsolateSelector.js
index e2e6d22..b313ed2 100644
--- a/front_end/profiler/IsolateSelector.js
+++ b/front_end/profiler/IsolateSelector.js
@@ -33,8 +33,9 @@
this._totalTrendDiv = this._totalElement.createChild('div', 'profile-memory-usage-item-trend');
this._totalElement.createChild('div').textContent = ls`Total JS heap size`;
const trendIntervalMinutes = Math.round(SDK.IsolateManager.MemoryTrendWindowMs / 60e3);
- this._totalTrendDiv.title = ls`Total page JS heap size change trend over the last ${trendIntervalMinutes} minutes.`;
- this._totalValueDiv.title = ls`Total page JS heap size across all VM instances.`;
+ UI.Tooltip.Tooltip.install(
+ this._totalTrendDiv, ls`Total page JS heap size change trend over the last ${trendIntervalMinutes} minutes.`);
+ UI.Tooltip.Tooltip.install(this._totalValueDiv, ls`Total page JS heap size across all VM instances.`);
SDK.IsolateManager.IsolateManager.instance().observeIsolates(this);
SDK.SDKModel.TargetManager.instance().addEventListener(SDK.SDKModel.Events.NameChanged, this._targetChanged, this);
@@ -253,9 +254,10 @@
this.element.classList.add('hbox');
UI.ARIAUtils.markAsOption(this.element);
this._heapDiv = this.element.createChild('div', 'profile-memory-usage-item-size');
- this._heapDiv.title = ls`Heap size in use by live JS objects.`;
+ UI.Tooltip.Tooltip.install(this._heapDiv, ls`Heap size in use by live JS objects.`);
this._trendDiv = this.element.createChild('div', 'profile-memory-usage-item-trend');
- this._trendDiv.title = ls`Heap size change trend over the last ${trendIntervalMinutes} minutes.`;
+ UI.Tooltip.Tooltip.install(
+ this._trendDiv, ls`Heap size change trend over the last ${trendIntervalMinutes} minutes.`);
this._nameDiv = this.element.createChild('div', 'profile-memory-usage-item-name');
this.updateTitle();
}
@@ -290,7 +292,7 @@
titles.push(title);
const titleDiv = this._nameDiv.createChild('div');
titleDiv.textContent = title;
- titleDiv.title = title;
+ UI.Tooltip.Tooltip.install(titleDiv, String(title));
}
}
}
diff --git a/front_end/profiler/ProfileDataGrid.js b/front_end/profiler/ProfileDataGrid.js
index a71e530..ae3b470 100644
--- a/front_end/profiler/ProfileDataGrid.js
+++ b/front_end/profiler/ProfileDataGrid.js
@@ -187,7 +187,7 @@
if (this._deoptReason) {
cell.classList.add('not-optimized');
const warningIcon = UI.Icon.Icon.create('smallicon-warning', 'profile-warn-marker');
- warningIcon.title = Common.UIString.UIString('Not optimized: %s', this._deoptReason);
+ UI.Tooltip.Tooltip.install(warningIcon, Common.UIString.UIString('Not optimized: %s', this._deoptReason));
cell.appendChild(warningIcon);
}
UI.UIUtils.createTextChild(cell, this.functionName);
diff --git a/front_end/profiler/ProfileLauncherView.js b/front_end/profiler/ProfileLauncherView.js
index e8ce495..b3268e5 100644
--- a/front_end/profiler/ProfileLauncherView.js
+++ b/front_end/profiler/ProfileLauncherView.js
@@ -84,7 +84,8 @@
} else {
this._controlButton.setAttribute('disabled', '');
}
- this._controlButton.title = this._recordButtonEnabled ? '' : UI.UIUtils.anotherProfilerActiveLabel();
+ UI.Tooltip.Tooltip.install(
+ this._controlButton, this._recordButtonEnabled ? '' : UI.UIUtils.anotherProfilerActiveLabel());
if (this._isInstantProfile) {
this._controlButton.classList.remove('running');
this._controlButton.classList.add('primary-button');
diff --git a/front_end/resources/ClearStorageView.js b/front_end/resources/ClearStorageView.js
index 12f8b94..3d20db4 100644
--- a/front_end/resources/ClearStorageView.js
+++ b/front_end/resources/ClearStorageView.js
@@ -372,7 +372,7 @@
{PH1: response.usage.toLocaleString(), PH2: response.quota.toLocaleString()});
if (!response.overrideActive && response.quota < 125829120) { // 120 MB
- this._quotaRow.title = ls`Storage quota is limited in Incognito mode`;
+ UI.Tooltip.Tooltip.install(this._quotaRow, ls`Storage quota is limited in Incognito mode`);
this._quotaRow.appendChild(UI.Icon.Icon.create('smallicon-info'));
}
diff --git a/front_end/resources/FrameDetailsView.js b/front_end/resources/FrameDetailsView.js
index 78416c1..238ef19 100644
--- a/front_end/resources/FrameDetailsView.js
+++ b/front_end/resources/FrameDetailsView.js
@@ -71,7 +71,7 @@
async doUpdate() {
this._urlFieldValue.removeChildren();
this._urlStringElement.textContent = this._frame.url;
- this._urlStringElement.title = this._frame.url;
+ UI.Tooltip.Tooltip.install(this._urlStringElement, this._frame.url);
this._urlFieldValue.appendChild(this._urlStringElement);
if (!this._frame.unreachableUrl()) {
const sourceCode = this.uiSourceCodeForFrame(this._frame);
@@ -83,7 +83,7 @@
this._maybeAppendLinkForUnreachableUrl();
if (this._frame.securityOrigin && this._frame.securityOrigin !== '://') {
this._originStringElement.textContent = this._frame.securityOrigin;
- this._originStringElement.title = this._frame.securityOrigin;
+ UI.Tooltip.Tooltip.install(this._originStringElement, this._frame.securityOrigin);
this._generalSection.setFieldVisible(ls`Origin`, true);
} else {
this._generalSection.setFieldVisible(ls`Origin`, false);
@@ -277,12 +277,12 @@
case Protocol.Page.AdFrameType.Root:
this._generalSection.setFieldVisible(ls`Ad Status`, true);
this._adStatus.textContent = ls`root`;
- this._adStatus.title = ls`This frame has been identified as the root frame of an ad`;
+ UI.Tooltip.Tooltip.install(this._adStatus, ls`This frame has been identified as the root frame of an ad`);
break;
case Protocol.Page.AdFrameType.Child:
this._generalSection.setFieldVisible(ls`Ad Status`, true);
this._adStatus.textContent = ls`child`;
- this._adStatus.title = ls`This frame has been identified as the a child frame of an ad`;
+ UI.Tooltip.Tooltip.install(this._adStatus, ls`This frame has been identified as the a child frame of an ad`);
break;
default:
this._generalSection.setFieldVisible(ls`Ad Status`, false);
@@ -300,7 +300,7 @@
function linkifyIcon(iconType, title, eventHandler) {
const icon = UI.Icon.Icon.create(iconType, 'icon-link devtools-link');
const span = document.createElement('span');
- span.title = title;
+ UI.Tooltip.Tooltip.install(span, title);
span.classList.add('devtools-link');
span.tabIndex = 0;
span.appendChild(icon);
@@ -376,7 +376,8 @@
this._openerElementField = this._securitySection.appendField(ls`Opener Frame`);
this._securitySection.setFieldVisible(ls`Opener Frame`, false);
this._hasDOMAccessValue = this._securitySection.appendField(ls`Access to opener`);
- this._hasDOMAccessValue.title = ls`Shows whether the opened window is able to access its opener and vice versa`;
+ UI.Tooltip.Tooltip.install(
+ this._hasDOMAccessValue, ls`Shows whether the opened window is able to access its opener and vice versa`);
this.update();
}
diff --git a/front_end/resources/ServiceWorkerCacheViews.js b/front_end/resources/ServiceWorkerCacheViews.js
index efda8c4..c9969a2 100644
--- a/front_end/resources/ServiceWorkerCacheViews.js
+++ b/front_end/resources/ServiceWorkerCacheViews.js
@@ -436,7 +436,7 @@
value = new Date(this._request.endTime * 1000).toLocaleString();
}
DataGrid.DataGrid.DataGridImpl.setElementText(cell, value || '', true);
- cell.title = this._request.url();
+ UI.Tooltip.Tooltip.install(cell, this._request.url());
return cell;
}
}
diff --git a/front_end/security/SecurityPanel.js b/front_end/security/SecurityPanel.js
index 8cdc470..df31bfa 100644
--- a/front_end/security/SecurityPanel.js
+++ b/front_end/security/SecurityPanel.js
@@ -1128,9 +1128,12 @@
[Protocol.Security.SecurityState.Neutral, lockSpectrum.createChild('div', 'lock-icon lock-icon-neutral')],
[Protocol.Security.SecurityState.Insecure, lockSpectrum.createChild('div', 'lock-icon lock-icon-insecure')],
]);
- this.getLockSpectrumDiv(Protocol.Security.SecurityState.Secure).title = i18nString(UIStrings.secure);
- this.getLockSpectrumDiv(Protocol.Security.SecurityState.Neutral).title = i18nString(UIStrings.info);
- this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure).title = i18nString(UIStrings.notSecure);
+ UI.Tooltip.Tooltip.install(
+ this.getLockSpectrumDiv(Protocol.Security.SecurityState.Secure), i18nString(UIStrings.secure));
+ UI.Tooltip.Tooltip.install(
+ this.getLockSpectrumDiv(Protocol.Security.SecurityState.Neutral), i18nString(UIStrings.info));
+ UI.Tooltip.Tooltip.install(
+ this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure), i18nString(UIStrings.notSecure));
this._summarySection.createChild('div', 'triangle-pointer-container')
.createChild('div', 'triangle-pointer-wrapper')
@@ -1224,11 +1227,13 @@
if (this._securityState === Protocol.Security.SecurityState.Insecure) {
this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure).classList.add('lock-icon-insecure');
this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure).classList.remove('lock-icon-insecure-broken');
- this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure).title = i18nString(UIStrings.notSecure);
+ UI.Tooltip.Tooltip.install(
+ this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure), i18nString(UIStrings.notSecure));
} else if (this._securityState === Protocol.Security.SecurityState.InsecureBroken) {
this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure).classList.add('lock-icon-insecure-broken');
this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure).classList.remove('lock-icon-insecure');
- this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure).title = i18nString(UIStrings.notSecureBroken);
+ UI.Tooltip.Tooltip.install(
+ this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure), i18nString(UIStrings.notSecureBroken));
}
// Use override summary if present, otherwise use base explanation
@@ -1256,11 +1261,13 @@
if (this._securityState === Protocol.Security.SecurityState.Insecure) {
this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure).classList.add('lock-icon-insecure');
this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure).classList.remove('lock-icon-insecure-broken');
- this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure).title = i18nString(UIStrings.notSecure);
+ UI.Tooltip.Tooltip.install(
+ this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure), i18nString(UIStrings.notSecure));
} else if (this._securityState === Protocol.Security.SecurityState.InsecureBroken) {
this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure).classList.add('lock-icon-insecure-broken');
this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure).classList.remove('lock-icon-insecure');
- this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure).title = i18nString(UIStrings.notSecureBroken);
+ UI.Tooltip.Tooltip.install(
+ this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure), i18nString(UIStrings.notSecureBroken));
}
const {summary, explanations} = this._getSecuritySummaryAndExplanations(visibleSecurityState);
diff --git a/front_end/settings/FrameworkBlackboxSettingsTab.js b/front_end/settings/FrameworkBlackboxSettingsTab.js
index 910d63e..f9a4cbc 100644
--- a/front_end/settings/FrameworkBlackboxSettingsTab.js
+++ b/front_end/settings/FrameworkBlackboxSettingsTab.js
@@ -90,7 +90,7 @@
blackboxContentScripts.appendChild(UI.SettingsUI.createSettingCheckbox(
i18nString(UIStrings.blackboxContentScripts),
Common.Settings.Settings.instance().moduleSetting('skipContentScripts'), true));
- blackboxContentScripts.title = i18nString(UIStrings.blackboxContentScriptsExtension);
+ UI.Tooltip.Tooltip.install(blackboxContentScripts, i18nString(UIStrings.blackboxContentScriptsExtension));
this._blackboxLabel = i18nString(UIStrings.blackbox);
this._disabledLabel = i18nString(UIStrings.disabled);
@@ -148,7 +148,7 @@
element.classList.add('blackbox-list-item');
const pattern = element.createChild('div', 'blackbox-pattern');
pattern.textContent = item.pattern;
- pattern.title = i18nString(UIStrings.blackboxScriptsWhoseNamesMatchS, {PH1: item.pattern});
+ UI.Tooltip.Tooltip.install(pattern, i18nString(UIStrings.blackboxScriptsWhoseNamesMatchS, {PH1: item.pattern}));
element.createChild('div', 'blackbox-separator');
element.createChild('div', 'blackbox-behavior').textContent =
item.disabled ? this._disabledLabel : this._blackboxLabel;
diff --git a/front_end/sources/BreakpointEditDialog.js b/front_end/sources/BreakpointEditDialog.js
index d267b0d..125efec 100644
--- a/front_end/sources/BreakpointEditDialog.js
+++ b/front_end/sources/BreakpointEditDialog.js
@@ -109,10 +109,12 @@
const selectedValue = option.value;
if (selectedValue === BreakpointType.Conditional) {
this._editor.setPlaceholder(ls`Expression to check before pausing, e.g. x > 5`);
- /** @type {!HTMLSpanElement} */ (this._typeSelector.element).title = ls`Pause only when the condition is true`;
+ /** @type {!HTMLSpanElement} */ UI.Tooltip.Tooltip.install(
+ (this._typeSelector.element), ls`Pause only when the condition is true`);
} else if (selectedValue === BreakpointType.Logpoint) {
this._editor.setPlaceholder(ls`Log message, e.g. 'x is', x`);
- /** @type {!HTMLSpanElement} */ (this._typeSelector.element).title = ls`Log a message to Console, do not break`;
+ /** @type {!HTMLSpanElement} */ UI.Tooltip.Tooltip.install(
+ (this._typeSelector.element), ls`Log a message to Console, do not break`);
}
}
diff --git a/front_end/sources/CSSPlugin.js b/front_end/sources/CSSPlugin.js
index 8863c18..50fac57 100644
--- a/front_end/sources/CSSPlugin.js
+++ b/front_end/sources/CSSPlugin.js
@@ -237,7 +237,7 @@
}
const swatch = InlineEditor.Swatches.BezierSwatch.create();
swatch.setBezierText(text);
- swatch.iconElement().title = Common.UIString.UIString('Open cubic bezier editor.');
+ UI.Tooltip.Tooltip.install(swatch.iconElement(), Common.UIString.UIString('Open cubic bezier editor.'));
swatch.iconElement().addEventListener('click', this._swatchIconClicked.bind(this, swatch), false);
swatch.hideText(true);
return swatch;
diff --git a/front_end/sources/CallStackSidebarPane.js b/front_end/sources/CallStackSidebarPane.js
index bada52a..10f7b1f2b 100644
--- a/front_end/sources/CallStackSidebarPane.js
+++ b/front_end/sources/CallStackSidebarPane.js
@@ -242,10 +242,10 @@
if (item.isAsyncHeader) {
element.classList.add('async-header');
} else {
- titleElement.title = item.title;
+ UI.Tooltip.Tooltip.install(titleElement, item.title);
const linkElement = element.createChild('div', 'call-frame-location');
linkElement.textContent = item.linkText.trimMiddle(30);
- linkElement.title = item.linkText;
+ UI.Tooltip.Tooltip.install(linkElement, item.linkText);
element.classList.toggle('blackboxed-call-frame', item.isBlackboxed);
if (item.isBlackboxed) {
UI.ARIAUtils.setDescription(element, ls`blackboxed`);
diff --git a/front_end/sources/DebuggerPausedMessage.js b/front_end/sources/DebuggerPausedMessage.js
index da17d5e..1ff7c14 100644
--- a/front_end/sources/DebuggerPausedMessage.js
+++ b/front_end/sources/DebuggerPausedMessage.js
@@ -173,7 +173,7 @@
if (subText) {
const subElement = messageWrapper.createChild('div', 'status-sub monospace');
subElement.textContent = subText;
- subElement.title = title || subText;
+ UI.Tooltip.Tooltip.install(subElement, title || subText);
}
return messageWrapper;
}
diff --git a/front_end/sources/FilteredUISourceCodeListProvider.js b/front_end/sources/FilteredUISourceCodeListProvider.js
index 08c9471..251be68 100644
--- a/front_end/sources/FilteredUISourceCodeListProvider.js
+++ b/front_end/sources/FilteredUISourceCodeListProvider.js
@@ -157,7 +157,7 @@
subtitleElement.classList.add('monospace');
titleElement.textContent = uiSourceCode.displayName() + (this._queryLineNumberAndColumnNumber || '');
this._renderSubtitleElement(subtitleElement, fullDisplayName);
- /** @type {!HTMLElement} */ (subtitleElement).title = fullDisplayName;
+ /** @type {!HTMLElement} */ UI.Tooltip.Tooltip.install((subtitleElement), fullDisplayName);
const ranges = [];
for (let i = 0; i < indexes.length; ++i) {
ranges.push({offset: indexes[i], length: 1});
@@ -187,7 +187,7 @@
first.textContent = text.substring(0, splitPosition);
const second = element.createChild('div', 'second-part');
second.textContent = text.substring(splitPosition);
- /** @type {!HTMLElement} */ (element).title = text;
+ /** @type {!HTMLElement} */ UI.Tooltip.Tooltip.install((element), text);
}
/**
diff --git a/front_end/sources/NavigatorView.js b/front_end/sources/NavigatorView.js
index 95c40ae..5b2df86 100644
--- a/front_end/sources/NavigatorView.js
+++ b/front_end/sources/NavigatorView.js
@@ -1202,7 +1202,8 @@
}
container.appendChild(icon);
container.appendChild(badge);
- container.title = Persistence.PersistenceUtils.PersistenceUtils.tooltipForUISourceCode(this._uiSourceCode);
+ UI.Tooltip.Tooltip.install(
+ container, Persistence.PersistenceUtils.PersistenceUtils.tooltipForUISourceCode(this._uiSourceCode));
this.setLeadingIcons([/** @type {!UI.Icon.Icon} */ (container)]);
} else {
let iconType = 'largeicon-navigator-file';
diff --git a/front_end/sources/TabbedEditorContainer.js b/front_end/sources/TabbedEditorContainer.js
index f85abad..9dda7bf 100644
--- a/front_end/sources/TabbedEditorContainer.js
+++ b/front_end/sources/TabbedEditorContainer.js
@@ -561,7 +561,7 @@
*/
_addLoadErrorIcon(tabId) {
const icon = UI.Icon.Icon.create('smallicon-error');
- icon.title = ls`Unable to load this content.`;
+ UI.Tooltip.Tooltip.install(icon, ls`Unable to load this content.`);
if (this._tabbedPane.tabView(tabId)) {
this._tabbedPane.setTabIcon(tabId, icon);
}
@@ -661,10 +661,11 @@
let icon = null;
if (uiSourceCode.loadError()) {
icon = UI.Icon.Icon.create('smallicon-error');
- icon.title = ls`Unable to load this content.`;
+ UI.Tooltip.Tooltip.install(icon, ls`Unable to load this content.`);
} else if (Persistence.Persistence.PersistenceImpl.instance().hasUnsavedCommittedChanges(uiSourceCode)) {
icon = UI.Icon.Icon.create('smallicon-warning');
- icon.title = Common.UIString.UIString('Changes to this file were not saved to file system.');
+ UI.Tooltip.Tooltip.install(
+ icon, Common.UIString.UIString('Changes to this file were not saved to file system.'));
} else {
icon = Persistence.PersistenceUtils.PersistenceUtils.iconForUISourceCode(uiSourceCode);
}
diff --git a/front_end/sources/WatchExpressionsSidebarPane.js b/front_end/sources/WatchExpressionsSidebarPane.js
index acc6471..1622f79 100644
--- a/front_end/sources/WatchExpressionsSidebarPane.js
+++ b/front_end/sources/WatchExpressionsSidebarPane.js
@@ -465,7 +465,7 @@
_createWatchExpressionHeader(expressionValue, exceptionDetails) {
const headerElement = this._element.createChild('div', 'watch-expression-header');
const deleteButton = UI.Icon.Icon.create('smallicon-cross', 'watch-expression-delete-button');
- deleteButton.title = ls`Delete watch expression`;
+ UI.Tooltip.Tooltip.install(deleteButton, ls`Delete watch expression`);
deleteButton.addEventListener('click', this._deleteWatchExpression.bind(this), false);
const titleElement = headerElement.createChild('div', 'watch-expression-title tree-element-title');
diff --git a/front_end/timeline/TimelineUIUtils.js b/front_end/timeline/TimelineUIUtils.js
index 632a842..49625c3 100644
--- a/front_end/timeline/TimelineUIUtils.js
+++ b/front_end/timeline/TimelineUIUtils.js
@@ -1855,7 +1855,8 @@
const eventDivider = document.createElement('div');
eventDivider.classList.add('resources-event-divider');
const startTime = Number.millisToString(event.startTime - zeroTime);
- eventDivider.title = Common.UIString.UIString('%s at %s', TimelineUIUtils.eventTitle(event), startTime);
+ UI.Tooltip.Tooltip.install(
+ eventDivider, Common.UIString.UIString('%s at %s', TimelineUIUtils.eventTitle(event), startTime));
const style = TimelineUIUtils.markerStyleForEvent(event);
if (style.tall) {
eventDivider.style.backgroundColor = style.color;
diff --git a/front_end/ui/FilterBar.js b/front_end/ui/FilterBar.js
index bf85eb5..114b564 100644
--- a/front_end/ui/FilterBar.js
+++ b/front_end/ui/FilterBar.js
@@ -30,14 +30,15 @@
import * as Common from '../common/common.js';
import * as Host from '../host/host.js';
-import * as ARIAUtils from './ARIAUtils.js';
+import * as ARIAUtils from './ARIAUtils.js';
import {Icon} from './Icon.js';
import {KeyboardShortcut, Modifiers} from './KeyboardShortcut.js';
import {bindCheckbox} from './SettingsUI.js';
import {Suggestions} from './SuggestBox.js'; // eslint-disable-line no-unused-vars
import {Events, TextPrompt} from './TextPrompt.js';
import {ToolbarButton, ToolbarSettingToggle} from './Toolbar.js'; // eslint-disable-line no-unused-vars
+import {Tooltip} from './Tooltip.js';
import {CheckboxLabel, createTextChild} from './UIUtils.js';
import {HBox} from './Widget.js';
@@ -211,7 +212,7 @@
this._prompt.initialize(this._completions.bind(this), ' ');
/** @type {!HTMLElement} */
this._proxyElement = /** @type {!HTMLElement} */ (this._prompt.attach(this._filterInputElement));
- this._proxyElement.title = Common.UIString.UIString('e.g. /small[\\d]+/ url:a.com/b');
+ Tooltip.install(this._proxyElement, Common.UIString.UIString('e.g. /small[\\d]+/ url:a.com/b'));
this._prompt.setPlaceholder(Common.UIString.UIString('Filter'));
this._prompt.addEventListener(Events.TextChanged, this._valueChanged.bind(this));
diff --git a/front_end/ui/ListWidget.js b/front_end/ui/ListWidget.js
index 4dbc985..65f6a9b 100644
--- a/front_end/ui/ListWidget.js
+++ b/front_end/ui/ListWidget.js
@@ -6,6 +6,7 @@
import * as ARIAUtils from './ARIAUtils.js';
import {Toolbar, ToolbarButton} from './Toolbar.js';
+import {Tooltip} from './Tooltip.js';
import {createInput, createTextButton, ElementFocusRestorer} from './UIUtils.js';
import {VBox} from './Widget.js';
@@ -386,7 +387,7 @@
option.textContent = options[index];
}
if (title) {
- select.title = title;
+ Tooltip.install(select, title);
ARIAUtils.setAccessibleName(select, title);
}
select.addEventListener('input', this._validateControls.bind(this, false), false);
diff --git a/front_end/ui/ReportView.js b/front_end/ui/ReportView.js
index fdf7f07..b79557a 100644
--- a/front_end/ui/ReportView.js
+++ b/front_end/ui/ReportView.js
@@ -4,6 +4,7 @@
import * as ARIAUtils from './ARIAUtils.js';
import {Toolbar} from './Toolbar.js';
+import {Tooltip} from './Tooltip.js';
import {VBox} from './Widget.js';
/**
@@ -152,7 +153,7 @@
if (this._titleElement.textContent !== title) {
this._titleElement.textContent = title;
}
- this._titleElement.title = tooltip || '';
+ Tooltip.install(this._titleElement, tooltip || '');
this._titleElement.classList.toggle('hidden', !this._titleElement.textContent);
}
diff --git a/front_end/ui/SearchableView.js b/front_end/ui/SearchableView.js
index 109cdaf..072d330 100644
--- a/front_end/ui/SearchableView.js
+++ b/front_end/ui/SearchableView.js
@@ -35,6 +35,7 @@
import {HistoryInput} from './HistoryInput.js';
import {InspectorView} from './InspectorView.js';
import {Toolbar, ToolbarButton, ToolbarToggle} from './Toolbar.js';
+import {Tooltip} from './Tooltip.js';
import {createTextButton} from './UIUtils.js';
import {VBox} from './Widget.js';
@@ -86,13 +87,13 @@
this._searchNavigationPrevElement =
searchNavigationElement.createChild('div', 'toolbar-search-navigation toolbar-search-navigation-prev');
this._searchNavigationPrevElement.addEventListener('click', this._onPrevButtonSearch.bind(this), false);
- this._searchNavigationPrevElement.title = Common.UIString.UIString('Search previous');
+ Tooltip.install(this._searchNavigationPrevElement, Common.UIString.UIString('Search previous'));
ARIAUtils.setAccessibleName(this._searchNavigationPrevElement, Common.UIString.UIString('Search previous'));
this._searchNavigationNextElement =
searchNavigationElement.createChild('div', 'toolbar-search-navigation toolbar-search-navigation-next');
this._searchNavigationNextElement.addEventListener('click', this._onNextButtonSearch.bind(this), false);
- this._searchNavigationNextElement.title = Common.UIString.UIString('Search next');
+ Tooltip.install(this._searchNavigationNextElement, Common.UIString.UIString('Search next'));
ARIAUtils.setAccessibleName(this._searchNavigationNextElement, Common.UIString.UIString('Search next'));
this._searchInputElement.addEventListener('keydown', this._onSearchKeyDown.bind(this), true);
diff --git a/front_end/ui/SegmentedButton.js b/front_end/ui/SegmentedButton.js
index 01b31f7..6f881fc 100644
--- a/front_end/ui/SegmentedButton.js
+++ b/front_end/ui/SegmentedButton.js
@@ -2,6 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
+import {Tooltip} from './Tooltip.js';
import {HBox} from './Widget.js';
export class SegmentedButton extends HBox {
@@ -25,7 +26,7 @@
const button = this.contentElement.createChild('button', 'segmented-button-segment');
button.textContent = label;
if (tooltip) {
- button.title = tooltip;
+ Tooltip.install(button, tooltip);
}
this._buttons.set(value, button);
button.addEventListener('click', () => this.select(value));
diff --git a/front_end/ui/SettingsUI.js b/front_end/ui/SettingsUI.js
index 21c6dd4..9c87dff 100644
--- a/front_end/ui/SettingsUI.js
+++ b/front_end/ui/SettingsUI.js
@@ -33,6 +33,7 @@
import * as ARIAUtils from './ARIAUtils.js';
import {InspectorView} from './InspectorView.js';
+import {Tooltip} from './Tooltip.js';
import {CheckboxLabel} from './UIUtils.js';
/**
@@ -45,7 +46,7 @@
export const createSettingCheckbox = function(name, setting, omitParagraphElement, tooltip) {
const label = CheckboxLabel.create(name);
if (tooltip) {
- label.title = tooltip;
+ Tooltip.install(label, tooltip);
}
const input = label.checkboxElement;
diff --git a/front_end/ui/TabbedPane.js b/front_end/ui/TabbedPane.js
index 76fbd39..e1cf96a 100644
--- a/front_end/ui/TabbedPane.js
+++ b/front_end/ui/TabbedPane.js
@@ -36,6 +36,7 @@
import {Constraints, Size} from './Geometry.js';
import {Icon} from './Icon.js';
import {Toolbar} from './Toolbar.js';
+import {Tooltip} from './Tooltip.js';
import {installDragHandle, invokeOnceAfterBatchUpdate} from './UIUtils.js';
import {VBox, Widget} from './Widget.js'; // eslint-disable-line no-unused-vars
import {Events as ZoomManagerEvents, ZoomManager} from './ZoomManager.js';
@@ -1189,7 +1190,7 @@
set tooltip(tooltip) {
this._tooltip = tooltip;
if (this._titleElement) {
- this._titleElement.title = tooltip || '';
+ Tooltip.install(this._titleElement, tooltip || '');
}
}
@@ -1263,7 +1264,7 @@
const titleElement = tabElement.createChild('span', 'tabbed-pane-header-tab-title');
titleElement.textContent = this.title;
- titleElement.title = this.tooltip || '';
+ Tooltip.install(titleElement, this.tooltip || '');
this._createIconElement(tabElement, titleElement, measuring);
if (!measuring) {
this._titleElement = titleElement;
diff --git a/front_end/ui/TextPrompt.js b/front_end/ui/TextPrompt.js
index aea720d..a054cf4 100644
--- a/front_end/ui/TextPrompt.js
+++ b/front_end/ui/TextPrompt.js
@@ -34,6 +34,7 @@
import * as ARIAUtils from './ARIAUtils.js';
import {SuggestBox, SuggestBoxDelegate, Suggestion, Suggestions} from './SuggestBox.js'; // eslint-disable-line no-unused-vars
+import {Tooltip} from './Tooltip.js';
import {ElementFocusRestorer} from './UIUtils.js';
import {appendStyle} from './utils/append-style.js';
@@ -151,7 +152,7 @@
this._suggestBox = new SuggestBox(this, 20);
if (this._title) {
- this._proxyElement.title = this._title;
+ Tooltip.install(this._proxyElement, this._title);
}
return this._proxyElement;
@@ -265,7 +266,7 @@
setTitle(title) {
this._title = title;
if (this._proxyElement) {
- this._proxyElement.title = title;
+ Tooltip.install(this._proxyElement, title);
}
}
diff --git a/front_end/ui/Tooltip.js b/front_end/ui/Tooltip.js
index 79dd3fe..a7f409d 100644
--- a/front_end/ui/Tooltip.js
+++ b/front_end/ui/Tooltip.js
@@ -189,7 +189,7 @@
// Check if native tooltips should be used.
if (this._shouldUseNativeTooltips()) {
Object.defineProperty(this._anchorElement, 'title', /** @type {!Object} */ (_nativeTitle));
- /** @type {!HTMLElement} */ (this._anchorElement).title = tooltip.content;
+ Tooltip.install(this._anchorElement, tooltip.content);
return;
}
diff --git a/front_end/ui/Treeoutline.js b/front_end/ui/Treeoutline.js
index 3a57670..925b347 100644
--- a/front_end/ui/Treeoutline.js
+++ b/front_end/ui/Treeoutline.js
@@ -36,6 +36,7 @@
import {Icon} from './Icon.js'; // eslint-disable-line no-unused-vars
import {Config, InplaceEditor} from './InplaceEditor.js'; // eslint-disable-line no-unused-vars
import {Keys} from './KeyboardShortcut.js';
+import {Tooltip} from './Tooltip.js';
import {deepElementFromPoint, enclosingNodeOrSelfWithNodeNameInArray, isEditing} from './UIUtils.js';
import {appendStyle} from './utils/append-style.js';
import {createShadowRootWithCoreStyles} from './utils/create-shadow-root-with-core-styles.js';
@@ -931,7 +932,7 @@
return;
}
this._tooltip = x;
- this._listItemNode.title = x;
+ Tooltip.install(this._listItemNode, x);
}
/**
diff --git a/front_end/ui/XLink.js b/front_end/ui/XLink.js
index 3ad9b28..62b1fd3 100644
--- a/front_end/ui/XLink.js
+++ b/front_end/ui/XLink.js
@@ -7,6 +7,7 @@
import * as ARIAUtils from './ARIAUtils.js';
import {ContextMenu, Provider} from './ContextMenu.js'; // eslint-disable-line no-unused-vars
import {html} from './Fragment.js';
+import {Tooltip} from './Tooltip.js';
import {addReferrerToURLIfNecessary, copyLinkAddressLabel, MaxLengthForDisplayedURLs, openLinkExternallyLabel} from './UIUtils.js';
import {XElement} from './XElement.js';
@@ -102,7 +103,7 @@
}
this._href = href;
- this.title = newValue;
+ Tooltip.install(this, newValue);
this._updateClick();
return;
}
diff --git a/front_end/webauthn/WebauthnPane.js b/front_end/webauthn/WebauthnPane.js
index 982ace1..5f52732 100644
--- a/front_end/webauthn/WebauthnPane.js
+++ b/front_end/webauthn/WebauthnPane.js
@@ -166,7 +166,7 @@
*/
createCell(columnId) {
const cell = super.createCell(columnId);
- cell.title = cell.textContent || '';
+ UI.Tooltip.Tooltip.install(cell, cell.textContent || '');
if (columnId !== 'actions') {
return cell;
@@ -745,7 +745,8 @@
* @param {string} authenticatorName
*/
_updateActiveLabelTitle(activeLabel, authenticatorName) {
- activeLabel.radioElement.title = i18nString(UIStrings.setSAsTheActiveAuthenticator, {PH1: authenticatorName});
+ UI.Tooltip.Tooltip.install(
+ activeLabel.radioElement, i18nString(UIStrings.setSAsTheActiveAuthenticator, {PH1: authenticatorName}));
}
/**
