| OLD | NEW |
| 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 Loading... |
| 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 Loading... |
| 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 Loading... |
| 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 }; |
| OLD | NEW |