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

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/elements/ElementsBreadcrumbs.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 2014 The Chromium Authors. All rights reserved. 1 // Copyright 2014 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.ElementsBreadcrumbs = class extends WebInspector.HBox { 7 Elements.ElementsBreadcrumbs = class extends UI.HBox {
8 constructor() { 8 constructor() {
9 super(true); 9 super(true);
10 this.registerRequiredCSS('elements/breadcrumbs.css'); 10 this.registerRequiredCSS('elements/breadcrumbs.css');
11 11
12 this.crumbsElement = this.contentElement.createChild('div', 'crumbs'); 12 this.crumbsElement = this.contentElement.createChild('div', 'crumbs');
13 this.crumbsElement.addEventListener('mousemove', this._mouseMovedInCrumbs.bi nd(this), false); 13 this.crumbsElement.addEventListener('mousemove', this._mouseMovedInCrumbs.bi nd(this), false);
14 this.crumbsElement.addEventListener('mouseleave', this._mouseMovedOutOfCrumb s.bind(this), false); 14 this.crumbsElement.addEventListener('mouseleave', this._mouseMovedOutOfCrumb s.bind(this), false);
15 this._nodeSymbol = Symbol('node'); 15 this._nodeSymbol = Symbol('node');
16 } 16 }
17 17
18 /** 18 /**
19 * @override 19 * @override
20 */ 20 */
21 wasShown() { 21 wasShown() {
22 this.update(); 22 this.update();
23 } 23 }
24 24
25 /** 25 /**
26 * @param {!Array.<!WebInspector.DOMNode>} nodes 26 * @param {!Array.<!SDK.DOMNode>} nodes
27 */ 27 */
28 updateNodes(nodes) { 28 updateNodes(nodes) {
29 if (!nodes.length) 29 if (!nodes.length)
30 return; 30 return;
31 31
32 var crumbs = this.crumbsElement; 32 var crumbs = this.crumbsElement;
33 for (var crumb = crumbs.firstChild; crumb; crumb = crumb.nextSibling) { 33 for (var crumb = crumbs.firstChild; crumb; crumb = crumb.nextSibling) {
34 if (nodes.indexOf(crumb[this._nodeSymbol]) !== -1) { 34 if (nodes.indexOf(crumb[this._nodeSymbol]) !== -1) {
35 this.update(true); 35 this.update(true);
36 return; 36 return;
37 } 37 }
38 } 38 }
39 } 39 }
40 40
41 /** 41 /**
42 * @param {?WebInspector.DOMNode} node 42 * @param {?SDK.DOMNode} node
43 */ 43 */
44 setSelectedNode(node) { 44 setSelectedNode(node) {
45 this._currentDOMNode = node; 45 this._currentDOMNode = node;
46 this.update(); 46 this.update();
47 } 47 }
48 48
49 _mouseMovedInCrumbs(event) { 49 _mouseMovedInCrumbs(event) {
50 var nodeUnderMouse = event.target; 50 var nodeUnderMouse = event.target;
51 var crumbElement = nodeUnderMouse.enclosingNodeOrSelfWithClass('crumb'); 51 var crumbElement = nodeUnderMouse.enclosingNodeOrSelfWithClass('crumb');
52 var node = /** @type {?WebInspector.DOMNode} */ (crumbElement ? crumbElement [this._nodeSymbol] : null); 52 var node = /** @type {?SDK.DOMNode} */ (crumbElement ? crumbElement[this._no deSymbol] : null);
53 if (node) 53 if (node)
54 node.highlight(); 54 node.highlight();
55 } 55 }
56 56
57 _mouseMovedOutOfCrumbs(event) { 57 _mouseMovedOutOfCrumbs(event) {
58 if (this._currentDOMNode) 58 if (this._currentDOMNode)
59 WebInspector.DOMModel.hideDOMNodeHighlight(); 59 SDK.DOMModel.hideDOMNodeHighlight();
60 } 60 }
61 61
62 /** 62 /**
63 * @param {boolean=} force 63 * @param {boolean=} force
64 */ 64 */
65 update(force) { 65 update(force) {
66 if (!this.isShowing()) 66 if (!this.isShowing())
67 return; 67 return;
68 68
69 var currentDOMNode = this._currentDOMNode; 69 var currentDOMNode = this._currentDOMNode;
(...skipping 18 matching lines...) Expand all
88 this.updateSizes(); 88 this.updateSizes();
89 return; 89 return;
90 } 90 }
91 91
92 crumbs.removeChildren(); 92 crumbs.removeChildren();
93 93
94 var panel = this; 94 var panel = this;
95 95
96 /** 96 /**
97 * @param {!Event} event 97 * @param {!Event} event
98 * @this {WebInspector.ElementsBreadcrumbs} 98 * @this {Elements.ElementsBreadcrumbs}
99 */ 99 */
100 function selectCrumb(event) { 100 function selectCrumb(event) {
101 event.preventDefault(); 101 event.preventDefault();
102 var crumb = /** @type {!Element} */ (event.currentTarget); 102 var crumb = /** @type {!Element} */ (event.currentTarget);
103 if (!crumb.classList.contains('collapsed')) { 103 if (!crumb.classList.contains('collapsed')) {
104 this.dispatchEventToListeners(WebInspector.ElementsBreadcrumbs.Events.No deSelected, crumb[this._nodeSymbol]); 104 this.dispatchEventToListeners(Elements.ElementsBreadcrumbs.Events.NodeSe lected, crumb[this._nodeSymbol]);
105 return; 105 return;
106 } 106 }
107 107
108 // Clicking a collapsed crumb will expose the hidden crumbs. 108 // Clicking a collapsed crumb will expose the hidden crumbs.
109 if (crumb === panel.crumbsElement.firstChild) { 109 if (crumb === panel.crumbsElement.firstChild) {
110 // If the focused crumb is the first child, pick the farthest crumb 110 // If the focused crumb is the first child, pick the farthest crumb
111 // that is still hidden. This allows the user to expose every crumb. 111 // that is still hidden. This allows the user to expose every crumb.
112 var currentCrumb = crumb; 112 var currentCrumb = crumb;
113 while (currentCrumb) { 113 while (currentCrumb) {
114 var hidden = currentCrumb.classList.contains('hidden'); 114 var hidden = currentCrumb.classList.contains('hidden');
(...skipping 16 matching lines...) Expand all
131 crumb = createElementWithClass('span', 'crumb'); 131 crumb = createElementWithClass('span', 'crumb');
132 crumb[this._nodeSymbol] = current; 132 crumb[this._nodeSymbol] = current;
133 crumb.addEventListener('mousedown', boundSelectCrumb, false); 133 crumb.addEventListener('mousedown', boundSelectCrumb, false);
134 134
135 var crumbTitle = ''; 135 var crumbTitle = '';
136 switch (current.nodeType()) { 136 switch (current.nodeType()) {
137 case Node.ELEMENT_NODE: 137 case Node.ELEMENT_NODE:
138 if (current.pseudoType()) 138 if (current.pseudoType())
139 crumbTitle = '::' + current.pseudoType(); 139 crumbTitle = '::' + current.pseudoType();
140 else 140 else
141 WebInspector.DOMPresentationUtils.decorateNodeLabel(current, crumb); 141 Components.DOMPresentationUtils.decorateNodeLabel(current, crumb);
142 break; 142 break;
143 143
144 case Node.TEXT_NODE: 144 case Node.TEXT_NODE:
145 crumbTitle = WebInspector.UIString('(text)'); 145 crumbTitle = Common.UIString('(text)');
146 break; 146 break;
147 147
148 case Node.COMMENT_NODE: 148 case Node.COMMENT_NODE:
149 crumbTitle = '<!-->'; 149 crumbTitle = '<!-->';
150 break; 150 break;
151 151
152 case Node.DOCUMENT_TYPE_NODE: 152 case Node.DOCUMENT_TYPE_NODE:
153 crumbTitle = '<!DOCTYPE>'; 153 crumbTitle = '<!DOCTYPE>';
154 break; 154 break;
155 155
(...skipping 252 matching lines...) Expand 10 before | Expand all | Expand 10 after
408 compact(selectedCrumb); 408 compact(selectedCrumb);
409 if (crumbsAreSmallerThanContainer()) 409 if (crumbsAreSmallerThanContainer())
410 return; 410 return;
411 411
412 // Collapse the selected crumb as a last resort. Pass true to prevent coales cing. 412 // Collapse the selected crumb as a last resort. Pass true to prevent coales cing.
413 collapse(selectedCrumb, true); 413 collapse(selectedCrumb, true);
414 } 414 }
415 }; 415 };
416 416
417 /** @enum {symbol} */ 417 /** @enum {symbol} */
418 WebInspector.ElementsBreadcrumbs.Events = { 418 Elements.ElementsBreadcrumbs.Events = {
419 NodeSelected: Symbol('NodeSelected') 419 NodeSelected: Symbol('NodeSelected')
420 }; 420 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698