| Index: third_party/WebKit/Source/devtools/front_end/ui/Tooltip.js
|
| diff --git a/third_party/WebKit/Source/devtools/front_end/ui/Tooltip.js b/third_party/WebKit/Source/devtools/front_end/ui/Tooltip.js
|
| index 8f11ebed18a60cd3cbec0ad47f2c9cb9bb32af9f..7fd8bdb8fb5d742ec75fbf57a00ae733a29ccbc5 100644
|
| --- a/third_party/WebKit/Source/devtools/front_end/ui/Tooltip.js
|
| +++ b/third_party/WebKit/Source/devtools/front_end/ui/Tooltip.js
|
| @@ -1,205 +1,201 @@
|
| // Copyright (c) 2015 The Chromium Authors. All rights reserved.
|
| // Use of this source code is governed by a BSD-style license that can be
|
| // found in the LICENSE file.
|
| -
|
| /**
|
| - * @constructor
|
| - * @param {!Document} doc
|
| + * @unrestricted
|
| */
|
| -WebInspector.Tooltip = function(doc)
|
| -{
|
| - this.element = doc.body.createChild("div");
|
| - this._shadowRoot = WebInspector.createShadowRootWithCoreStyles(this.element, "ui/tooltip.css");
|
| -
|
| - this._tooltipElement = this._shadowRoot.createChild("div", "tooltip");
|
| - doc.addEventListener("mousemove", this._mouseMove.bind(this), true);
|
| - doc.addEventListener("mousedown", this._hide.bind(this, true), true);
|
| - doc.addEventListener("mouseleave", this._hide.bind(this, false), true);
|
| - doc.addEventListener("keydown", this._hide.bind(this, true), true);
|
| +WebInspector.Tooltip = class {
|
| + /**
|
| + * @param {!Document} doc
|
| + */
|
| + constructor(doc) {
|
| + this.element = doc.body.createChild('div');
|
| + this._shadowRoot = WebInspector.createShadowRootWithCoreStyles(this.element, 'ui/tooltip.css');
|
| +
|
| + this._tooltipElement = this._shadowRoot.createChild('div', 'tooltip');
|
| + doc.addEventListener('mousemove', this._mouseMove.bind(this), true);
|
| + doc.addEventListener('mousedown', this._hide.bind(this, true), true);
|
| + doc.addEventListener('mouseleave', this._hide.bind(this, false), true);
|
| + doc.addEventListener('keydown', this._hide.bind(this, true), true);
|
| WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._reset, this);
|
| - doc.defaultView.addEventListener("resize", this._reset.bind(this), false);
|
| -};
|
| + doc.defaultView.addEventListener('resize', this._reset.bind(this), false);
|
| + }
|
|
|
| -WebInspector.Tooltip.Timing = {
|
| - // Max time between tooltips showing that no opening delay is required.
|
| - "InstantThreshold": 300,
|
| - // Wait time before opening a tooltip.
|
| - "OpeningDelay": 600
|
| -};
|
| -
|
| -WebInspector.Tooltip.prototype = {
|
| - /**
|
| - * @param {!Event} event
|
| - */
|
| - _mouseMove: function(event)
|
| - {
|
| - var mouseEvent = /** @type {!MouseEvent} */ (event);
|
| - var path = mouseEvent.path;
|
| - if (!path || mouseEvent.buttons !== 0 || (mouseEvent.movementX === 0 && mouseEvent.movementY === 0))
|
| - return;
|
| -
|
| - if (this._anchorElement && path.indexOf(this._anchorElement) === -1)
|
| - this._hide(false);
|
| -
|
| - for (var element of path) {
|
| - if (element === this._anchorElement) {
|
| - return;
|
| - } else if (element[WebInspector.Tooltip._symbol]) {
|
| - this._show(element, mouseEvent);
|
| - return;
|
| - }
|
| - }
|
| - },
|
| -
|
| - /**
|
| - * @param {!Element} anchorElement
|
| - * @param {!Event} event
|
| - */
|
| - _show: function(anchorElement, event)
|
| - {
|
| - var tooltip = anchorElement[WebInspector.Tooltip._symbol];
|
| - this._anchorElement = anchorElement;
|
| - this._tooltipElement.removeChildren();
|
| -
|
| - // Check if native tooltips should be used.
|
| - for (var element of WebInspector.Tooltip._nativeOverrideContainer) {
|
| - if (this._anchorElement.isSelfOrDescendant(element)) {
|
| - Object.defineProperty(this._anchorElement, "title", WebInspector.Tooltip._nativeTitle);
|
| - this._anchorElement.title = tooltip.content;
|
| - return;
|
| - }
|
| - }
|
| -
|
| - if (typeof tooltip.content === "string")
|
| - this._tooltipElement.setTextContentTruncatedIfNeeded(tooltip.content);
|
| - else
|
| - this._tooltipElement.appendChild(tooltip.content);
|
| -
|
| - if (tooltip.actionId) {
|
| - var shortcuts = WebInspector.shortcutRegistry.shortcutDescriptorsForAction(tooltip.actionId);
|
| - for (var shortcut of shortcuts) {
|
| - var shortcutElement = this._tooltipElement.createChild("div", "tooltip-shortcut");
|
| - shortcutElement.textContent = shortcut.name;
|
| - }
|
| - }
|
| -
|
| - this._tooltipElement.classList.add("shown");
|
| - // Reposition to ensure text doesn't overflow unnecessarily.
|
| - this._tooltipElement.positionAt(0, 0);
|
| -
|
| - // Show tooltip instantly if a tooltip was shown recently.
|
| - var now = Date.now();
|
| - var instant = (this._tooltipLastClosed && now - this._tooltipLastClosed < WebInspector.Tooltip.Timing.InstantThreshold);
|
| - this._tooltipElement.classList.toggle("instant", instant);
|
| - this._tooltipLastOpened = instant ? now : now + WebInspector.Tooltip.Timing.OpeningDelay;
|
| -
|
| - // Get container element.
|
| - var container = WebInspector.Dialog.modalHostView().element;
|
| - if (!anchorElement.isDescendant(container))
|
| - container = this.element.parentElement;
|
| -
|
| - // Posititon tooltip based on the anchor element.
|
| - var containerBox = container.boxInWindow(this.element.window());
|
| - var anchorBox = this._anchorElement.boxInWindow(this.element.window());
|
| - const anchorOffset = 2;
|
| - const pageMargin = 2;
|
| - var cursorOffset = 10;
|
| - this._tooltipElement.classList.toggle("tooltip-breakword", !this._tooltipElement.textContent.match("\\s"));
|
| - this._tooltipElement.style.maxWidth = (containerBox.width - pageMargin * 2) + "px";
|
| - this._tooltipElement.style.maxHeight = "";
|
| - var tooltipWidth = this._tooltipElement.offsetWidth;
|
| - var tooltipHeight = this._tooltipElement.offsetHeight;
|
| - var anchorTooltipAtElement = this._anchorElement.nodeName === "BUTTON" || this._anchorElement.nodeName === "LABEL";
|
| - var tooltipX = anchorTooltipAtElement ? anchorBox.x : event.x + cursorOffset;
|
| - tooltipX = Number.constrain(tooltipX,
|
| - containerBox.x + pageMargin,
|
| - containerBox.x + containerBox.width - tooltipWidth - pageMargin);
|
| - var tooltipY;
|
| - if (!anchorTooltipAtElement) {
|
| - tooltipY = event.y + cursorOffset + tooltipHeight < containerBox.y + containerBox.height ? event.y + cursorOffset : event.y - tooltipHeight;
|
| - } else {
|
| - var onBottom = anchorBox.y + anchorOffset + anchorBox.height + tooltipHeight < containerBox.y + containerBox.height;
|
| - tooltipY = onBottom ? anchorBox.y + anchorBox.height + anchorOffset : anchorBox.y - tooltipHeight - anchorOffset;
|
| - }
|
| - this._tooltipElement.positionAt(tooltipX, tooltipY);
|
| - },
|
| -
|
| - /**
|
| - * @param {boolean} removeInstant
|
| - */
|
| - _hide: function(removeInstant)
|
| - {
|
| - delete this._anchorElement;
|
| - this._tooltipElement.classList.remove("shown");
|
| - if (Date.now() > this._tooltipLastOpened)
|
| - this._tooltipLastClosed = Date.now();
|
| - if (removeInstant)
|
| - delete this._tooltipLastClosed;
|
| - },
|
| -
|
| - _reset: function()
|
| - {
|
| - this._hide(true);
|
| - this._tooltipElement.positionAt(0, 0);
|
| - this._tooltipElement.style.maxWidth = "0";
|
| - this._tooltipElement.style.maxHeight = "0";
|
| + /**
|
| + * @param {!Document} doc
|
| + */
|
| + static installHandler(doc) {
|
| + new WebInspector.Tooltip(doc);
|
| + }
|
| +
|
| + /**
|
| + * @param {!Element} element
|
| + * @param {!Element|string} tooltipContent
|
| + * @param {string=} actionId
|
| + * @param {!Object=} options
|
| + */
|
| + static install(element, tooltipContent, actionId, options) {
|
| + if (typeof tooltipContent === 'string' && tooltipContent === '') {
|
| + delete element[WebInspector.Tooltip._symbol];
|
| + return;
|
| }
|
| -};
|
| + element[WebInspector.Tooltip._symbol] = {content: tooltipContent, actionId: actionId, options: options || {}};
|
| + }
|
|
|
| -WebInspector.Tooltip._symbol = Symbol("Tooltip");
|
| + /**
|
| + * @param {!Element} element
|
| + */
|
| + static addNativeOverrideContainer(element) {
|
| + WebInspector.Tooltip._nativeOverrideContainer.push(element);
|
| + }
|
| +
|
| + /**
|
| + * @param {!Event} event
|
| + */
|
| + _mouseMove(event) {
|
| + var mouseEvent = /** @type {!MouseEvent} */ (event);
|
| + var path = mouseEvent.path;
|
| + if (!path || mouseEvent.buttons !== 0 || (mouseEvent.movementX === 0 && mouseEvent.movementY === 0))
|
| + return;
|
| +
|
| + if (this._anchorElement && path.indexOf(this._anchorElement) === -1)
|
| + this._hide(false);
|
| +
|
| + for (var element of path) {
|
| + if (element === this._anchorElement) {
|
| + return;
|
| + } else if (element[WebInspector.Tooltip._symbol]) {
|
| + this._show(element, mouseEvent);
|
| + return;
|
| + }
|
| + }
|
| + }
|
| +
|
| + /**
|
| + * @param {!Element} anchorElement
|
| + * @param {!Event} event
|
| + */
|
| + _show(anchorElement, event) {
|
| + var tooltip = anchorElement[WebInspector.Tooltip._symbol];
|
| + this._anchorElement = anchorElement;
|
| + this._tooltipElement.removeChildren();
|
| +
|
| + // Check if native tooltips should be used.
|
| + for (var element of WebInspector.Tooltip._nativeOverrideContainer) {
|
| + if (this._anchorElement.isSelfOrDescendant(element)) {
|
| + Object.defineProperty(this._anchorElement, 'title', WebInspector.Tooltip._nativeTitle);
|
| + this._anchorElement.title = tooltip.content;
|
| + return;
|
| + }
|
| + }
|
|
|
| -/**
|
| - * @param {!Document} doc
|
| - */
|
| -WebInspector.Tooltip.installHandler = function(doc)
|
| -{
|
| - new WebInspector.Tooltip(doc);
|
| -};
|
| + if (typeof tooltip.content === 'string')
|
| + this._tooltipElement.setTextContentTruncatedIfNeeded(tooltip.content);
|
| + else
|
| + this._tooltipElement.appendChild(tooltip.content);
|
| +
|
| + if (tooltip.actionId) {
|
| + var shortcuts = WebInspector.shortcutRegistry.shortcutDescriptorsForAction(tooltip.actionId);
|
| + for (var shortcut of shortcuts) {
|
| + var shortcutElement = this._tooltipElement.createChild('div', 'tooltip-shortcut');
|
| + shortcutElement.textContent = shortcut.name;
|
| + }
|
| + }
|
|
|
| -/**
|
| - * @param {!Element} element
|
| - * @param {!Element|string} tooltipContent
|
| - * @param {string=} actionId
|
| - * @param {!Object=} options
|
| - */
|
| -WebInspector.Tooltip.install = function(element, tooltipContent, actionId, options)
|
| -{
|
| - if (typeof tooltipContent === "string" && tooltipContent === "") {
|
| - delete element[WebInspector.Tooltip._symbol];
|
| - return;
|
| + this._tooltipElement.classList.add('shown');
|
| + // Reposition to ensure text doesn't overflow unnecessarily.
|
| + this._tooltipElement.positionAt(0, 0);
|
| +
|
| + // Show tooltip instantly if a tooltip was shown recently.
|
| + var now = Date.now();
|
| + var instant =
|
| + (this._tooltipLastClosed && now - this._tooltipLastClosed < WebInspector.Tooltip.Timing.InstantThreshold);
|
| + this._tooltipElement.classList.toggle('instant', instant);
|
| + this._tooltipLastOpened = instant ? now : now + WebInspector.Tooltip.Timing.OpeningDelay;
|
| +
|
| + // Get container element.
|
| + var container = WebInspector.Dialog.modalHostView().element;
|
| + if (!anchorElement.isDescendant(container))
|
| + container = this.element.parentElement;
|
| +
|
| + // Posititon tooltip based on the anchor element.
|
| + var containerBox = container.boxInWindow(this.element.window());
|
| + var anchorBox = this._anchorElement.boxInWindow(this.element.window());
|
| + const anchorOffset = 2;
|
| + const pageMargin = 2;
|
| + var cursorOffset = 10;
|
| + this._tooltipElement.classList.toggle('tooltip-breakword', !this._tooltipElement.textContent.match('\\s'));
|
| + this._tooltipElement.style.maxWidth = (containerBox.width - pageMargin * 2) + 'px';
|
| + this._tooltipElement.style.maxHeight = '';
|
| + var tooltipWidth = this._tooltipElement.offsetWidth;
|
| + var tooltipHeight = this._tooltipElement.offsetHeight;
|
| + var anchorTooltipAtElement = this._anchorElement.nodeName === 'BUTTON' || this._anchorElement.nodeName === 'LABEL';
|
| + var tooltipX = anchorTooltipAtElement ? anchorBox.x : event.x + cursorOffset;
|
| + tooltipX = Number.constrain(
|
| + tooltipX, containerBox.x + pageMargin, containerBox.x + containerBox.width - tooltipWidth - pageMargin);
|
| + var tooltipY;
|
| + if (!anchorTooltipAtElement) {
|
| + tooltipY = event.y + cursorOffset + tooltipHeight < containerBox.y + containerBox.height ?
|
| + event.y + cursorOffset :
|
| + event.y - tooltipHeight;
|
| + } else {
|
| + var onBottom =
|
| + anchorBox.y + anchorOffset + anchorBox.height + tooltipHeight < containerBox.y + containerBox.height;
|
| + tooltipY = onBottom ? anchorBox.y + anchorBox.height + anchorOffset : anchorBox.y - tooltipHeight - anchorOffset;
|
| }
|
| - element[WebInspector.Tooltip._symbol] = { content: tooltipContent, actionId: actionId, options: options || {} };
|
| + this._tooltipElement.positionAt(tooltipX, tooltipY);
|
| + }
|
| +
|
| + /**
|
| + * @param {boolean} removeInstant
|
| + */
|
| + _hide(removeInstant) {
|
| + delete this._anchorElement;
|
| + this._tooltipElement.classList.remove('shown');
|
| + if (Date.now() > this._tooltipLastOpened)
|
| + this._tooltipLastClosed = Date.now();
|
| + if (removeInstant)
|
| + delete this._tooltipLastClosed;
|
| + }
|
| +
|
| + _reset() {
|
| + this._hide(true);
|
| + this._tooltipElement.positionAt(0, 0);
|
| + this._tooltipElement.style.maxWidth = '0';
|
| + this._tooltipElement.style.maxHeight = '0';
|
| + }
|
| };
|
|
|
| -/**
|
| - * @param {!Element} element
|
| - */
|
| -WebInspector.Tooltip.addNativeOverrideContainer = function(element)
|
| -{
|
| - WebInspector.Tooltip._nativeOverrideContainer.push(element);
|
| +WebInspector.Tooltip.Timing = {
|
| + // Max time between tooltips showing that no opening delay is required.
|
| + 'InstantThreshold': 300,
|
| + // Wait time before opening a tooltip.
|
| + 'OpeningDelay': 600
|
| };
|
|
|
| +WebInspector.Tooltip._symbol = Symbol('Tooltip');
|
| +
|
| +
|
| /** @type {!Array.<!Element>} */
|
| WebInspector.Tooltip._nativeOverrideContainer = [];
|
| -WebInspector.Tooltip._nativeTitle = /** @type {!ObjectPropertyDescriptor} */(Object.getOwnPropertyDescriptor(HTMLElement.prototype, "title"));
|
| -
|
| -Object.defineProperty(HTMLElement.prototype, "title", {
|
| - /**
|
| - * @return {!Element|string}
|
| - * @this {!Element}
|
| - */
|
| - get: function()
|
| - {
|
| - var tooltip = this[WebInspector.Tooltip._symbol];
|
| - return tooltip ? tooltip.content : "";
|
| - },
|
| -
|
| - /**
|
| - * @param {!Element|string} x
|
| - * @this {!Element}
|
| - */
|
| - set: function(x)
|
| - {
|
| - WebInspector.Tooltip.install(this, x);
|
| - }
|
| +WebInspector.Tooltip._nativeTitle =
|
| + /** @type {!ObjectPropertyDescriptor} */ (Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'title'));
|
| +
|
| +Object.defineProperty(HTMLElement.prototype, 'title', {
|
| + /**
|
| + * @return {!Element|string}
|
| + * @this {!Element}
|
| + */
|
| + get: function() {
|
| + var tooltip = this[WebInspector.Tooltip._symbol];
|
| + return tooltip ? tooltip.content : '';
|
| + },
|
| +
|
| + /**
|
| + * @param {!Element|string} x
|
| + * @this {!Element}
|
| + */
|
| + set: function(x) {
|
| + WebInspector.Tooltip.install(this, x);
|
| + }
|
| });
|
|
|