Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(16)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/ui/Tooltip.js

Issue 2493373002: DevTools: rename WebInspector into modules. (Closed)
Patch Set: for bots Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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 });
OLDNEW
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js ('k') | third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698