| OLD | NEW |
| 1 // Copyright (c) 2015 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2015 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 /** | 4 /** |
| 5 * @unrestricted | 5 * @unrestricted |
| 6 */ | 6 */ |
| 7 WebInspector.Tooltip = class { | 7 UI.Tooltip = class { |
| 8 /** | 8 /** |
| 9 * @param {!Document} doc | 9 * @param {!Document} doc |
| 10 */ | 10 */ |
| 11 constructor(doc) { | 11 constructor(doc) { |
| 12 this.element = doc.body.createChild('div'); | 12 this.element = doc.body.createChild('div'); |
| 13 this._shadowRoot = WebInspector.createShadowRootWithCoreStyles(this.element,
'ui/tooltip.css'); | 13 this._shadowRoot = UI.createShadowRootWithCoreStyles(this.element, 'ui/toolt
ip.css'); |
| 14 | 14 |
| 15 this._tooltipElement = this._shadowRoot.createChild('div', 'tooltip'); | 15 this._tooltipElement = this._shadowRoot.createChild('div', 'tooltip'); |
| 16 doc.addEventListener('mousemove', this._mouseMove.bind(this), true); | 16 doc.addEventListener('mousemove', this._mouseMove.bind(this), true); |
| 17 doc.addEventListener('mousedown', this._hide.bind(this, true), true); | 17 doc.addEventListener('mousedown', this._hide.bind(this, true), true); |
| 18 doc.addEventListener('mouseleave', this._hide.bind(this, false), true); | 18 doc.addEventListener('mouseleave', this._hide.bind(this, false), true); |
| 19 doc.addEventListener('keydown', this._hide.bind(this, true), true); | 19 doc.addEventListener('keydown', this._hide.bind(this, true), true); |
| 20 WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.Zo
omChanged, this._reset, this); | 20 UI.zoomManager.addEventListener(UI.ZoomManager.Events.ZoomChanged, this._res
et, this); |
| 21 doc.defaultView.addEventListener('resize', this._reset.bind(this), false); | 21 doc.defaultView.addEventListener('resize', this._reset.bind(this), false); |
| 22 } | 22 } |
| 23 | 23 |
| 24 /** | 24 /** |
| 25 * @param {!Document} doc | 25 * @param {!Document} doc |
| 26 */ | 26 */ |
| 27 static installHandler(doc) { | 27 static installHandler(doc) { |
| 28 new WebInspector.Tooltip(doc); | 28 new UI.Tooltip(doc); |
| 29 } | 29 } |
| 30 | 30 |
| 31 /** | 31 /** |
| 32 * @param {!Element} element | 32 * @param {!Element} element |
| 33 * @param {!Element|string} tooltipContent | 33 * @param {!Element|string} tooltipContent |
| 34 * @param {string=} actionId | 34 * @param {string=} actionId |
| 35 * @param {!Object=} options | 35 * @param {!Object=} options |
| 36 */ | 36 */ |
| 37 static install(element, tooltipContent, actionId, options) { | 37 static install(element, tooltipContent, actionId, options) { |
| 38 if (typeof tooltipContent === 'string' && tooltipContent === '') { | 38 if (typeof tooltipContent === 'string' && tooltipContent === '') { |
| 39 delete element[WebInspector.Tooltip._symbol]; | 39 delete element[UI.Tooltip._symbol]; |
| 40 return; | 40 return; |
| 41 } | 41 } |
| 42 element[WebInspector.Tooltip._symbol] = {content: tooltipContent, actionId:
actionId, options: options || {}}; | 42 element[UI.Tooltip._symbol] = {content: tooltipContent, actionId: actionId,
options: options || {}}; |
| 43 } | 43 } |
| 44 | 44 |
| 45 /** | 45 /** |
| 46 * @param {!Element} element | 46 * @param {!Element} element |
| 47 */ | 47 */ |
| 48 static addNativeOverrideContainer(element) { | 48 static addNativeOverrideContainer(element) { |
| 49 WebInspector.Tooltip._nativeOverrideContainer.push(element); | 49 UI.Tooltip._nativeOverrideContainer.push(element); |
| 50 } | 50 } |
| 51 | 51 |
| 52 /** | 52 /** |
| 53 * @param {!Event} event | 53 * @param {!Event} event |
| 54 */ | 54 */ |
| 55 _mouseMove(event) { | 55 _mouseMove(event) { |
| 56 var mouseEvent = /** @type {!MouseEvent} */ (event); | 56 var mouseEvent = /** @type {!MouseEvent} */ (event); |
| 57 var path = mouseEvent.path; | 57 var path = mouseEvent.path; |
| 58 if (!path || mouseEvent.buttons !== 0 || (mouseEvent.movementX === 0 && mous
eEvent.movementY === 0)) | 58 if (!path || mouseEvent.buttons !== 0 || (mouseEvent.movementX === 0 && mous
eEvent.movementY === 0)) |
| 59 return; | 59 return; |
| 60 | 60 |
| 61 if (this._anchorElement && path.indexOf(this._anchorElement) === -1) | 61 if (this._anchorElement && path.indexOf(this._anchorElement) === -1) |
| 62 this._hide(false); | 62 this._hide(false); |
| 63 | 63 |
| 64 for (var element of path) { | 64 for (var element of path) { |
| 65 if (element === this._anchorElement) { | 65 if (element === this._anchorElement) { |
| 66 return; | 66 return; |
| 67 } else if (element[WebInspector.Tooltip._symbol]) { | 67 } else if (element[UI.Tooltip._symbol]) { |
| 68 this._show(element, mouseEvent); | 68 this._show(element, mouseEvent); |
| 69 return; | 69 return; |
| 70 } | 70 } |
| 71 } | 71 } |
| 72 } | 72 } |
| 73 | 73 |
| 74 /** | 74 /** |
| 75 * @param {!Element} anchorElement | 75 * @param {!Element} anchorElement |
| 76 * @param {!Event} event | 76 * @param {!Event} event |
| 77 */ | 77 */ |
| 78 _show(anchorElement, event) { | 78 _show(anchorElement, event) { |
| 79 var tooltip = anchorElement[WebInspector.Tooltip._symbol]; | 79 var tooltip = anchorElement[UI.Tooltip._symbol]; |
| 80 this._anchorElement = anchorElement; | 80 this._anchorElement = anchorElement; |
| 81 this._tooltipElement.removeChildren(); | 81 this._tooltipElement.removeChildren(); |
| 82 | 82 |
| 83 // Check if native tooltips should be used. | 83 // Check if native tooltips should be used. |
| 84 for (var element of WebInspector.Tooltip._nativeOverrideContainer) { | 84 for (var element of UI.Tooltip._nativeOverrideContainer) { |
| 85 if (this._anchorElement.isSelfOrDescendant(element)) { | 85 if (this._anchorElement.isSelfOrDescendant(element)) { |
| 86 Object.defineProperty(this._anchorElement, 'title', WebInspector.Tooltip
._nativeTitle); | 86 Object.defineProperty(this._anchorElement, 'title', UI.Tooltip._nativeTi
tle); |
| 87 this._anchorElement.title = tooltip.content; | 87 this._anchorElement.title = tooltip.content; |
| 88 return; | 88 return; |
| 89 } | 89 } |
| 90 } | 90 } |
| 91 | 91 |
| 92 if (typeof tooltip.content === 'string') | 92 if (typeof tooltip.content === 'string') |
| 93 this._tooltipElement.setTextContentTruncatedIfNeeded(tooltip.content); | 93 this._tooltipElement.setTextContentTruncatedIfNeeded(tooltip.content); |
| 94 else | 94 else |
| 95 this._tooltipElement.appendChild(tooltip.content); | 95 this._tooltipElement.appendChild(tooltip.content); |
| 96 | 96 |
| 97 if (tooltip.actionId) { | 97 if (tooltip.actionId) { |
| 98 var shortcuts = WebInspector.shortcutRegistry.shortcutDescriptorsForAction
(tooltip.actionId); | 98 var shortcuts = UI.shortcutRegistry.shortcutDescriptorsForAction(tooltip.a
ctionId); |
| 99 for (var shortcut of shortcuts) { | 99 for (var shortcut of shortcuts) { |
| 100 var shortcutElement = this._tooltipElement.createChild('div', 'tooltip-s
hortcut'); | 100 var shortcutElement = this._tooltipElement.createChild('div', 'tooltip-s
hortcut'); |
| 101 shortcutElement.textContent = shortcut.name; | 101 shortcutElement.textContent = shortcut.name; |
| 102 } | 102 } |
| 103 } | 103 } |
| 104 | 104 |
| 105 this._tooltipElement.classList.add('shown'); | 105 this._tooltipElement.classList.add('shown'); |
| 106 // Reposition to ensure text doesn't overflow unnecessarily. | 106 // Reposition to ensure text doesn't overflow unnecessarily. |
| 107 this._tooltipElement.positionAt(0, 0); | 107 this._tooltipElement.positionAt(0, 0); |
| 108 | 108 |
| 109 // Show tooltip instantly if a tooltip was shown recently. | 109 // Show tooltip instantly if a tooltip was shown recently. |
| 110 var now = Date.now(); | 110 var now = Date.now(); |
| 111 var instant = | 111 var instant = |
| 112 (this._tooltipLastClosed && now - this._tooltipLastClosed < WebInspector
.Tooltip.Timing.InstantThreshold); | 112 (this._tooltipLastClosed && now - this._tooltipLastClosed < UI.Tooltip.T
iming.InstantThreshold); |
| 113 this._tooltipElement.classList.toggle('instant', instant); | 113 this._tooltipElement.classList.toggle('instant', instant); |
| 114 this._tooltipLastOpened = instant ? now : now + WebInspector.Tooltip.Timing.
OpeningDelay; | 114 this._tooltipLastOpened = instant ? now : now + UI.Tooltip.Timing.OpeningDel
ay; |
| 115 | 115 |
| 116 // Get container element. | 116 // Get container element. |
| 117 var container = WebInspector.Dialog.modalHostView().element; | 117 var container = UI.Dialog.modalHostView().element; |
| 118 if (!anchorElement.isDescendant(container)) | 118 if (!anchorElement.isDescendant(container)) |
| 119 container = this.element.parentElement; | 119 container = this.element.parentElement; |
| 120 | 120 |
| 121 // Posititon tooltip based on the anchor element. | 121 // Posititon tooltip based on the anchor element. |
| 122 var containerBox = container.boxInWindow(this.element.window()); | 122 var containerBox = container.boxInWindow(this.element.window()); |
| 123 var anchorBox = this._anchorElement.boxInWindow(this.element.window()); | 123 var anchorBox = this._anchorElement.boxInWindow(this.element.window()); |
| 124 const anchorOffset = 2; | 124 const anchorOffset = 2; |
| 125 const pageMargin = 2; | 125 const pageMargin = 2; |
| 126 var cursorOffset = 10; | 126 var cursorOffset = 10; |
| 127 this._tooltipElement.classList.toggle('tooltip-breakword', !this._tooltipEle
ment.textContent.match('\\s')); | 127 this._tooltipElement.classList.toggle('tooltip-breakword', !this._tooltipEle
ment.textContent.match('\\s')); |
| (...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 159 } | 159 } |
| 160 | 160 |
| 161 _reset() { | 161 _reset() { |
| 162 this._hide(true); | 162 this._hide(true); |
| 163 this._tooltipElement.positionAt(0, 0); | 163 this._tooltipElement.positionAt(0, 0); |
| 164 this._tooltipElement.style.maxWidth = '0'; | 164 this._tooltipElement.style.maxWidth = '0'; |
| 165 this._tooltipElement.style.maxHeight = '0'; | 165 this._tooltipElement.style.maxHeight = '0'; |
| 166 } | 166 } |
| 167 }; | 167 }; |
| 168 | 168 |
| 169 WebInspector.Tooltip.Timing = { | 169 UI.Tooltip.Timing = { |
| 170 // Max time between tooltips showing that no opening delay is required. | 170 // Max time between tooltips showing that no opening delay is required. |
| 171 'InstantThreshold': 300, | 171 'InstantThreshold': 300, |
| 172 // Wait time before opening a tooltip. | 172 // Wait time before opening a tooltip. |
| 173 'OpeningDelay': 600 | 173 'OpeningDelay': 600 |
| 174 }; | 174 }; |
| 175 | 175 |
| 176 WebInspector.Tooltip._symbol = Symbol('Tooltip'); | 176 UI.Tooltip._symbol = Symbol('Tooltip'); |
| 177 | 177 |
| 178 | 178 |
| 179 /** @type {!Array.<!Element>} */ | 179 /** @type {!Array.<!Element>} */ |
| 180 WebInspector.Tooltip._nativeOverrideContainer = []; | 180 UI.Tooltip._nativeOverrideContainer = []; |
| 181 WebInspector.Tooltip._nativeTitle = | 181 UI.Tooltip._nativeTitle = |
| 182 /** @type {!ObjectPropertyDescriptor} */ (Object.getOwnPropertyDescriptor(HT
MLElement.prototype, 'title')); | 182 /** @type {!ObjectPropertyDescriptor} */ (Object.getOwnPropertyDescriptor(HT
MLElement.prototype, 'title')); |
| 183 | 183 |
| 184 Object.defineProperty(HTMLElement.prototype, 'title', { | 184 Object.defineProperty(HTMLElement.prototype, 'title', { |
| 185 /** | 185 /** |
| 186 * @return {!Element|string} | 186 * @return {!Element|string} |
| 187 * @this {!Element} | 187 * @this {!Element} |
| 188 */ | 188 */ |
| 189 get: function() { | 189 get: function() { |
| 190 var tooltip = this[WebInspector.Tooltip._symbol]; | 190 var tooltip = this[UI.Tooltip._symbol]; |
| 191 return tooltip ? tooltip.content : ''; | 191 return tooltip ? tooltip.content : ''; |
| 192 }, | 192 }, |
| 193 | 193 |
| 194 /** | 194 /** |
| 195 * @param {!Element|string} x | 195 * @param {!Element|string} x |
| 196 * @this {!Element} | 196 * @this {!Element} |
| 197 */ | 197 */ |
| 198 set: function(x) { | 198 set: function(x) { |
| 199 WebInspector.Tooltip.install(this, x); | 199 UI.Tooltip.install(this, x); |
| 200 } | 200 } |
| 201 }); | 201 }); |
| OLD | NEW |