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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js

Issue 2466123002: DevTools: reformat front-end code to match chromium style. (Closed)
Patch Set: all done 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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/elements/ElementsBreadcrumbs.js ('k') | third_party/WebKit/Source/devtools/front_end/elements/ElementsSidebarPane.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js b/third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js
index f46137781f9810ba6c5c7ba8b310831006daf6a8..1e1f2255f5386974f0258dabffc67fc0ce1fbd96 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js
@@ -27,45 +27,45 @@
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-
/**
- * @constructor
* @implements {WebInspector.Searchable}
* @implements {WebInspector.TargetManager.Observer}
* @implements {WebInspector.ViewLocationResolver}
- * @extends {WebInspector.Panel}
+ * @unrestricted
*/
-WebInspector.ElementsPanel = function()
-{
- WebInspector.Panel.call(this, "elements");
- this.registerRequiredCSS("elements/elementsPanel.css");
-
- this._splitWidget = new WebInspector.SplitWidget(true, true, "elementsPanelSplitViewState", 325, 325);
- this._splitWidget.addEventListener(WebInspector.SplitWidget.Events.SidebarSizeChanged, this._updateTreeOutlineVisibleWidth.bind(this));
+WebInspector.ElementsPanel = class extends WebInspector.Panel {
+ constructor() {
+ super('elements');
+ this.registerRequiredCSS('elements/elementsPanel.css');
+
+ this._splitWidget = new WebInspector.SplitWidget(true, true, 'elementsPanelSplitViewState', 325, 325);
+ this._splitWidget.addEventListener(
+ WebInspector.SplitWidget.Events.SidebarSizeChanged, this._updateTreeOutlineVisibleWidth.bind(this));
this._splitWidget.show(this.element);
this._searchableView = new WebInspector.SearchableView(this);
this._searchableView.setMinimumSize(25, 28);
- this._searchableView.setPlaceholder(WebInspector.UIString("Find by string, selector, or XPath"));
+ this._searchableView.setPlaceholder(WebInspector.UIString('Find by string, selector, or XPath'));
var stackElement = this._searchableView.element;
- this._contentElement = createElement("div");
- var crumbsContainer = createElement("div");
+ this._contentElement = createElement('div');
+ var crumbsContainer = createElement('div');
stackElement.appendChild(this._contentElement);
stackElement.appendChild(crumbsContainer);
this._splitWidget.setMainWidget(this._searchableView);
- this._contentElement.id = "elements-content";
+ this._contentElement.id = 'elements-content';
// FIXME: crbug.com/425984
- if (WebInspector.moduleSetting("domWordWrap").get())
- this._contentElement.classList.add("elements-wrap");
- WebInspector.moduleSetting("domWordWrap").addChangeListener(this._domWordWrapSettingChanged.bind(this));
+ if (WebInspector.moduleSetting('domWordWrap').get())
+ this._contentElement.classList.add('elements-wrap');
+ WebInspector.moduleSetting('domWordWrap').addChangeListener(this._domWordWrapSettingChanged.bind(this));
- crumbsContainer.id = "elements-crumbs";
+ crumbsContainer.id = 'elements-crumbs';
this._breadcrumbs = new WebInspector.ElementsBreadcrumbs();
this._breadcrumbs.show(crumbsContainer);
- this._breadcrumbs.addEventListener(WebInspector.ElementsBreadcrumbs.Events.NodeSelected, this._crumbNodeSelected, this);
+ this._breadcrumbs.addEventListener(
+ WebInspector.ElementsBreadcrumbs.Events.NodeSelected, this._crumbNodeSelected, this);
this._currentToolbarPane = null;
@@ -75,1056 +75,1001 @@ WebInspector.ElementsPanel = function()
this._stylesSidebarToolbar = this._createStylesSidebarToolbar();
- WebInspector.moduleSetting("sidebarPosition").addChangeListener(this._updateSidebarPosition.bind(this));
+ WebInspector.moduleSetting('sidebarPosition').addChangeListener(this._updateSidebarPosition.bind(this));
this._updateSidebarPosition();
/** @type {!Array.<!WebInspector.ElementsTreeOutline>} */
this._treeOutlines = [];
WebInspector.targetManager.observeTargets(this);
- WebInspector.moduleSetting("showUAShadowDOM").addChangeListener(this._showUAShadowDOMChanged.bind(this));
- WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdatedEvent, this);
- WebInspector.extensionServer.addEventListener(WebInspector.ExtensionServer.Events.SidebarPaneAdded, this._extensionSidebarPaneAdded, this);
-};
-
-WebInspector.ElementsPanel._elementsSidebarViewTitleSymbol = Symbol("title");
-
-WebInspector.ElementsPanel.prototype = {
- /**
- * @param {!WebInspector.CSSProperty} cssProperty
- */
- _revealProperty: function(cssProperty)
- {
- return this.sidebarPaneView.showView(this._stylesViewToReveal).then(() => {
- this._stylesWidget.revealProperty(/** @type {!WebInspector.CSSProperty} */(cssProperty));
- });
- },
-
- /**
- * @return {!Element}
- */
- _createStylesSidebarToolbar: function()
- {
- var container = createElementWithClass("div", "styles-sidebar-pane-toolbar-container");
- var hbox = container.createChild("div", "hbox styles-sidebar-pane-toolbar");
- var filterContainerElement = hbox.createChild("div", "styles-sidebar-pane-filter-box");
- var filterInput = WebInspector.StylesSidebarPane.createPropertyFilterElement(WebInspector.UIString("Filter"), hbox, this._stylesWidget.onFilterChanged.bind(this._stylesWidget));
- filterContainerElement.appendChild(filterInput);
- var toolbar = new WebInspector.Toolbar("styles-pane-toolbar", hbox);
- toolbar.makeToggledGray();
- toolbar.appendLocationItems("styles-sidebarpane-toolbar");
- var toolbarPaneContainer = container.createChild("div", "styles-sidebar-toolbar-pane-container");
- this._toolbarPaneElement = createElementWithClass("div", "styles-sidebar-toolbar-pane");
- toolbarPaneContainer.appendChild(this._toolbarPaneElement);
- return container;
- },
-
- /**
- * @override
- * @param {string} locationName
- * @return {?WebInspector.ViewLocation}
- */
- resolveLocation: function(locationName)
- {
- return this.sidebarPaneView;
- },
-
- /**
- * @param {?WebInspector.Widget} widget
- * @param {!WebInspector.ToolbarToggle=} toggle
- */
- showToolbarPane: function(widget, toggle)
- {
- if (this._pendingWidgetToggle)
- this._pendingWidgetToggle.setToggled(false);
- this._pendingWidgetToggle = toggle;
-
- if (this._animatedToolbarPane !== undefined)
- this._pendingWidget = widget;
- else
- this._startToolbarPaneAnimation(widget);
-
- if (widget && toggle)
- toggle.setToggled(true);
- },
-
- /**
- * @param {?WebInspector.Widget} widget
- */
- _startToolbarPaneAnimation: function(widget)
- {
- if (widget === this._currentToolbarPane)
- return;
-
- if (widget && this._currentToolbarPane) {
- this._currentToolbarPane.detach();
- widget.show(this._toolbarPaneElement);
- this._currentToolbarPane = widget;
- this._currentToolbarPane.focus();
- return;
- }
-
- this._animatedToolbarPane = widget;
-
- if (this._currentToolbarPane)
- this._toolbarPaneElement.style.animationName = "styles-element-state-pane-slideout";
- else if (widget)
- this._toolbarPaneElement.style.animationName = "styles-element-state-pane-slidein";
-
- if (widget)
- widget.show(this._toolbarPaneElement);
-
- var listener = onAnimationEnd.bind(this);
- this._toolbarPaneElement.addEventListener("animationend", listener, false);
-
- /**
- * @this {WebInspector.ElementsPanel}
- */
- function onAnimationEnd()
- {
- this._toolbarPaneElement.style.removeProperty("animation-name");
- this._toolbarPaneElement.removeEventListener("animationend", listener, false);
+ WebInspector.moduleSetting('showUAShadowDOM').addChangeListener(this._showUAShadowDOMChanged.bind(this));
+ WebInspector.targetManager.addModelListener(
+ WebInspector.DOMModel, WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdatedEvent, this);
+ WebInspector.extensionServer.addEventListener(
+ WebInspector.ExtensionServer.Events.SidebarPaneAdded, this._extensionSidebarPaneAdded, this);
+ }
+
+ /**
+ * @return {!WebInspector.ElementsPanel}
+ */
+ static instance() {
+ return /** @type {!WebInspector.ElementsPanel} */ (self.runtime.sharedInstance(WebInspector.ElementsPanel));
+ }
+
+ /**
+ * @param {!WebInspector.CSSProperty} cssProperty
+ */
+ _revealProperty(cssProperty) {
+ return this.sidebarPaneView.showView(this._stylesViewToReveal).then(() => {
+ this._stylesWidget.revealProperty(/** @type {!WebInspector.CSSProperty} */ (cssProperty));
+ });
+ }
+
+ /**
+ * @return {!Element}
+ */
+ _createStylesSidebarToolbar() {
+ var container = createElementWithClass('div', 'styles-sidebar-pane-toolbar-container');
+ var hbox = container.createChild('div', 'hbox styles-sidebar-pane-toolbar');
+ var filterContainerElement = hbox.createChild('div', 'styles-sidebar-pane-filter-box');
+ var filterInput = WebInspector.StylesSidebarPane.createPropertyFilterElement(
+ WebInspector.UIString('Filter'), hbox, this._stylesWidget.onFilterChanged.bind(this._stylesWidget));
+ filterContainerElement.appendChild(filterInput);
+ var toolbar = new WebInspector.Toolbar('styles-pane-toolbar', hbox);
+ toolbar.makeToggledGray();
+ toolbar.appendLocationItems('styles-sidebarpane-toolbar');
+ var toolbarPaneContainer = container.createChild('div', 'styles-sidebar-toolbar-pane-container');
+ this._toolbarPaneElement = createElementWithClass('div', 'styles-sidebar-toolbar-pane');
+ toolbarPaneContainer.appendChild(this._toolbarPaneElement);
+ return container;
+ }
+
+ /**
+ * @override
+ * @param {string} locationName
+ * @return {?WebInspector.ViewLocation}
+ */
+ resolveLocation(locationName) {
+ return this.sidebarPaneView;
+ }
+
+ /**
+ * @param {?WebInspector.Widget} widget
+ * @param {!WebInspector.ToolbarToggle=} toggle
+ */
+ showToolbarPane(widget, toggle) {
+ if (this._pendingWidgetToggle)
+ this._pendingWidgetToggle.setToggled(false);
+ this._pendingWidgetToggle = toggle;
+
+ if (this._animatedToolbarPane !== undefined)
+ this._pendingWidget = widget;
+ else
+ this._startToolbarPaneAnimation(widget);
+
+ if (widget && toggle)
+ toggle.setToggled(true);
+ }
+
+ /**
+ * @param {?WebInspector.Widget} widget
+ */
+ _startToolbarPaneAnimation(widget) {
+ if (widget === this._currentToolbarPane)
+ return;
+
+ if (widget && this._currentToolbarPane) {
+ this._currentToolbarPane.detach();
+ widget.show(this._toolbarPaneElement);
+ this._currentToolbarPane = widget;
+ this._currentToolbarPane.focus();
+ return;
+ }
- if (this._currentToolbarPane)
- this._currentToolbarPane.detach();
+ this._animatedToolbarPane = widget;
- this._currentToolbarPane = this._animatedToolbarPane;
- if (this._currentToolbarPane)
- this._currentToolbarPane.focus();
- delete this._animatedToolbarPane;
+ if (this._currentToolbarPane)
+ this._toolbarPaneElement.style.animationName = 'styles-element-state-pane-slideout';
+ else if (widget)
+ this._toolbarPaneElement.style.animationName = 'styles-element-state-pane-slidein';
- if (this._pendingWidget !== undefined) {
- this._startToolbarPaneAnimation(this._pendingWidget);
- delete this._pendingWidget;
- }
- }
- },
+ if (widget)
+ widget.show(this._toolbarPaneElement);
- /**
- * @override
- * @param {!WebInspector.Target} target
- */
- targetAdded: function(target)
- {
- var domModel = WebInspector.DOMModel.fromTarget(target);
- if (!domModel)
- return;
- var treeOutline = new WebInspector.ElementsTreeOutline(domModel, true, true);
- treeOutline.setWordWrap(WebInspector.moduleSetting("domWordWrap").get());
- treeOutline.wireToDOMModel();
- treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this);
- treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated, this._updateBreadcrumbIfNeeded, this);
- new WebInspector.ElementsTreeElementHighlighter(treeOutline);
- this._treeOutlines.push(treeOutline);
-
- // Perform attach if necessary.
- if (this.isShowing())
- this.wasShown();
-
- },
+ var listener = onAnimationEnd.bind(this);
+ this._toolbarPaneElement.addEventListener('animationend', listener, false);
/**
- * @override
- * @param {!WebInspector.Target} target
+ * @this {WebInspector.ElementsPanel}
*/
- targetRemoved: function(target)
- {
- var domModel = WebInspector.DOMModel.fromTarget(target);
- if (!domModel)
- return;
- var treeOutline = WebInspector.ElementsTreeOutline.forDOMModel(domModel);
- treeOutline.unwireFromDOMModel();
- this._treeOutlines.remove(treeOutline);
- treeOutline.element.remove();
- },
-
- _updateTreeOutlineVisibleWidth: function()
- {
- if (!this._treeOutlines.length)
- return;
-
- var width = this._splitWidget.element.offsetWidth;
- if (this._splitWidget.isVertical())
- width -= this._splitWidget.sidebarSize();
- for (var i = 0; i < this._treeOutlines.length; ++i) {
- this._treeOutlines[i].setVisibleWidth(width);
- }
- this._breadcrumbs.updateSizes();
- },
+ function onAnimationEnd() {
+ this._toolbarPaneElement.style.removeProperty('animation-name');
+ this._toolbarPaneElement.removeEventListener('animationend', listener, false);
+
+ if (this._currentToolbarPane)
+ this._currentToolbarPane.detach();
+
+ this._currentToolbarPane = this._animatedToolbarPane;
+ if (this._currentToolbarPane)
+ this._currentToolbarPane.focus();
+ delete this._animatedToolbarPane;
+
+ if (this._pendingWidget !== undefined) {
+ this._startToolbarPaneAnimation(this._pendingWidget);
+ delete this._pendingWidget;
+ }
+ }
+ }
+
+ /**
+ * @override
+ * @param {!WebInspector.Target} target
+ */
+ targetAdded(target) {
+ var domModel = WebInspector.DOMModel.fromTarget(target);
+ if (!domModel)
+ return;
+ var treeOutline = new WebInspector.ElementsTreeOutline(domModel, true, true);
+ treeOutline.setWordWrap(WebInspector.moduleSetting('domWordWrap').get());
+ treeOutline.wireToDOMModel();
+ treeOutline.addEventListener(
+ WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this);
+ treeOutline.addEventListener(
+ WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated, this._updateBreadcrumbIfNeeded, this);
+ new WebInspector.ElementsTreeElementHighlighter(treeOutline);
+ this._treeOutlines.push(treeOutline);
+
+ // Perform attach if necessary.
+ if (this.isShowing())
+ this.wasShown();
+ }
+
+ /**
+ * @override
+ * @param {!WebInspector.Target} target
+ */
+ targetRemoved(target) {
+ var domModel = WebInspector.DOMModel.fromTarget(target);
+ if (!domModel)
+ return;
+ var treeOutline = WebInspector.ElementsTreeOutline.forDOMModel(domModel);
+ treeOutline.unwireFromDOMModel();
+ this._treeOutlines.remove(treeOutline);
+ treeOutline.element.remove();
+ }
+
+ _updateTreeOutlineVisibleWidth() {
+ if (!this._treeOutlines.length)
+ return;
+
+ var width = this._splitWidget.element.offsetWidth;
+ if (this._splitWidget.isVertical())
+ width -= this._splitWidget.sidebarSize();
+ for (var i = 0; i < this._treeOutlines.length; ++i) {
+ this._treeOutlines[i].setVisibleWidth(width);
+ }
+ this._breadcrumbs.updateSizes();
+ }
+
+ /**
+ * @override
+ */
+ focus() {
+ if (this._treeOutlines.length)
+ this._treeOutlines[0].focus();
+ }
+
+ /**
+ * @override
+ * @return {!WebInspector.SearchableView}
+ */
+ searchableView() {
+ return this._searchableView;
+ }
+
+ /**
+ * @override
+ */
+ wasShown() {
+ WebInspector.context.setFlavor(WebInspector.ElementsPanel, this);
+
+ for (var i = 0; i < this._treeOutlines.length; ++i) {
+ var treeOutline = this._treeOutlines[i];
+ // Attach heavy component lazily
+ if (treeOutline.element.parentElement !== this._contentElement)
+ this._contentElement.appendChild(treeOutline.element);
+ }
+ super.wasShown();
+ this._breadcrumbs.update();
- /**
- * @override
- */
- focus: function()
- {
- if (this._treeOutlines.length)
- this._treeOutlines[0].focus();
- },
+ for (var i = 0; i < this._treeOutlines.length; ++i) {
+ var treeOutline = this._treeOutlines[i];
+ treeOutline.setVisible(true);
- /**
- * @override
- * @return {!WebInspector.SearchableView}
- */
- searchableView: function()
- {
- return this._searchableView;
- },
-
- wasShown: function()
- {
- WebInspector.context.setFlavor(WebInspector.ElementsPanel, this);
-
- for (var i = 0; i < this._treeOutlines.length; ++i) {
- var treeOutline = this._treeOutlines[i];
- // Attach heavy component lazily
- if (treeOutline.element.parentElement !== this._contentElement)
- this._contentElement.appendChild(treeOutline.element);
- }
- WebInspector.Panel.prototype.wasShown.call(this);
- this._breadcrumbs.update();
-
- for (var i = 0; i < this._treeOutlines.length; ++i) {
- var treeOutline = this._treeOutlines[i];
- treeOutline.setVisible(true);
-
- if (!treeOutline.rootDOMNode)
- if (treeOutline.domModel().existingDocument())
- this._documentUpdated(treeOutline.domModel(), treeOutline.domModel().existingDocument());
- else
- treeOutline.domModel().requestDocument();
- }
- this.focus();
- },
-
- willHide: function()
- {
- WebInspector.context.setFlavor(WebInspector.ElementsPanel, null);
-
- WebInspector.DOMModel.hideDOMNodeHighlight();
- for (var i = 0; i < this._treeOutlines.length; ++i) {
- var treeOutline = this._treeOutlines[i];
- treeOutline.setVisible(false);
- // Detach heavy component on hide
- this._contentElement.removeChild(treeOutline.element);
- }
- if (this._popoverHelper)
- this._popoverHelper.hidePopover();
- WebInspector.Panel.prototype.willHide.call(this);
- },
-
- onResize: function()
- {
- if (WebInspector.moduleSetting("sidebarPosition").get() === "auto")
- this.element.window().requestAnimationFrame(this._updateSidebarPosition.bind(this)); // Do not force layout.
- this._updateTreeOutlineVisibleWidth();
- },
+ if (!treeOutline.rootDOMNode)
+ if (treeOutline.domModel().existingDocument())
+ this._documentUpdated(treeOutline.domModel(), treeOutline.domModel().existingDocument());
+ else
+ treeOutline.domModel().requestDocument();
+ }
+ this.focus();
+ }
+
+ /**
+ * @override
+ */
+ willHide() {
+ WebInspector.context.setFlavor(WebInspector.ElementsPanel, null);
+
+ WebInspector.DOMModel.hideDOMNodeHighlight();
+ for (var i = 0; i < this._treeOutlines.length; ++i) {
+ var treeOutline = this._treeOutlines[i];
+ treeOutline.setVisible(false);
+ // Detach heavy component on hide
+ this._contentElement.removeChild(treeOutline.element);
+ }
+ if (this._popoverHelper)
+ this._popoverHelper.hidePopover();
+ super.willHide();
+ }
+
+ /**
+ * @override
+ */
+ onResize() {
+ if (WebInspector.moduleSetting('sidebarPosition').get() === 'auto')
+ this.element.window().requestAnimationFrame(this._updateSidebarPosition.bind(this)); // Do not force layout.
+ this._updateTreeOutlineVisibleWidth();
+ }
+
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _selectedNodeChanged(event) {
+ var selectedNode = /** @type {?WebInspector.DOMNode} */ (event.data.node);
+ var focus = /** @type {boolean} */ (event.data.focus);
+ for (var i = 0; i < this._treeOutlines.length; ++i) {
+ if (!selectedNode || selectedNode.domModel() !== this._treeOutlines[i].domModel())
+ this._treeOutlines[i].selectDOMNode(null);
+ }
- /**
- * @param {!WebInspector.Event} event
- */
- _selectedNodeChanged: function(event)
- {
- var selectedNode = /** @type {?WebInspector.DOMNode} */ (event.data.node);
- var focus = /** @type {boolean} */ (event.data.focus);
- for (var i = 0; i < this._treeOutlines.length; ++i) {
- if (!selectedNode || selectedNode.domModel() !== this._treeOutlines[i].domModel())
- this._treeOutlines[i].selectDOMNode(null);
- }
+ this._breadcrumbs.setSelectedNode(selectedNode);
- this._breadcrumbs.setSelectedNode(selectedNode);
+ WebInspector.context.setFlavor(WebInspector.DOMNode, selectedNode);
- WebInspector.context.setFlavor(WebInspector.DOMNode, selectedNode);
+ if (!selectedNode)
+ return;
+ selectedNode.setAsInspectedNode();
+ if (focus) {
+ this._selectedNodeOnReset = selectedNode;
+ this._hasNonDefaultSelectedNode = true;
+ }
- if (!selectedNode)
- return;
- selectedNode.setAsInspectedNode();
- if (focus) {
- this._selectedNodeOnReset = selectedNode;
- this._hasNonDefaultSelectedNode = true;
- }
+ var executionContexts = selectedNode.target().runtimeModel.executionContexts();
+ var nodeFrameId = selectedNode.frameId();
+ for (var context of executionContexts) {
+ if (context.frameId === nodeFrameId) {
+ WebInspector.context.setFlavor(WebInspector.ExecutionContext, context);
+ break;
+ }
+ }
+ }
+
+ _reset() {
+ delete this.currentQuery;
+ }
+
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _documentUpdatedEvent(event) {
+ this._documentUpdated(
+ /** @type {!WebInspector.DOMModel} */ (event.target), /** @type {?WebInspector.DOMDocument} */ (event.data));
+ }
+
+ /**
+ * @param {!WebInspector.DOMModel} domModel
+ * @param {?WebInspector.DOMDocument} inspectedRootDocument
+ */
+ _documentUpdated(domModel, inspectedRootDocument) {
+ this._reset();
+ this.searchCanceled();
+
+ var treeOutline = WebInspector.ElementsTreeOutline.forDOMModel(domModel);
+ treeOutline.rootDOMNode = inspectedRootDocument;
+
+ if (!inspectedRootDocument) {
+ if (this.isShowing())
+ domModel.requestDocument();
+ return;
+ }
- var executionContexts = selectedNode.target().runtimeModel.executionContexts();
- var nodeFrameId = selectedNode.frameId();
- for (var context of executionContexts) {
- if (context.frameId === nodeFrameId) {
- WebInspector.context.setFlavor(WebInspector.ExecutionContext, context);
- break;
- }
- }
- },
+ this._hasNonDefaultSelectedNode = false;
+ WebInspector.domBreakpointsSidebarPane.restoreBreakpoints(inspectedRootDocument);
- _reset: function()
- {
- delete this.currentQuery;
- },
+ if (this._omitDefaultSelection)
+ return;
- /**
- * @param {!WebInspector.Event} event
- */
- _documentUpdatedEvent: function(event)
- {
- this._documentUpdated(/** @type {!WebInspector.DOMModel} */ (event.target), /** @type {?WebInspector.DOMDocument} */ (event.data));
- },
+ var savedSelectedNodeOnReset = this._selectedNodeOnReset;
+ restoreNode.call(this, domModel, this._selectedNodeOnReset);
/**
* @param {!WebInspector.DOMModel} domModel
- * @param {?WebInspector.DOMDocument} inspectedRootDocument
- */
- _documentUpdated: function(domModel, inspectedRootDocument)
- {
- this._reset();
- this.searchCanceled();
-
- var treeOutline = WebInspector.ElementsTreeOutline.forDOMModel(domModel);
- treeOutline.rootDOMNode = inspectedRootDocument;
-
- if (!inspectedRootDocument) {
- if (this.isShowing())
- domModel.requestDocument();
- return;
- }
-
- this._hasNonDefaultSelectedNode = false;
- WebInspector.domBreakpointsSidebarPane.restoreBreakpoints(inspectedRootDocument);
-
- if (this._omitDefaultSelection)
- return;
-
- var savedSelectedNodeOnReset = this._selectedNodeOnReset;
- restoreNode.call(this, domModel, this._selectedNodeOnReset);
-
- /**
- * @param {!WebInspector.DOMModel} domModel
- * @param {?WebInspector.DOMNode} staleNode
- * @this {WebInspector.ElementsPanel}
- */
- function restoreNode(domModel, staleNode)
- {
- var nodePath = staleNode ? staleNode.path() : null;
- if (!nodePath) {
- onNodeRestored.call(this, null);
- return;
- }
- domModel.pushNodeByPathToFrontend(nodePath, onNodeRestored.bind(this));
- }
-
- /**
- * @param {?DOMAgent.NodeId} restoredNodeId
- * @this {WebInspector.ElementsPanel}
- */
- function onNodeRestored(restoredNodeId)
- {
- if (savedSelectedNodeOnReset !== this._selectedNodeOnReset)
- return;
- var node = restoredNodeId ? domModel.nodeForId(restoredNodeId) : null;
- if (!node) {
- var inspectedDocument = domModel.existingDocument();
- node = inspectedDocument ? inspectedDocument.body || inspectedDocument.documentElement : null;
- }
- this._setDefaultSelectedNode(node);
- this._lastSelectedNodeSelectedForTest();
- }
- },
-
- _lastSelectedNodeSelectedForTest: function() { },
-
- /**
- * @param {?WebInspector.DOMNode} node
+ * @param {?WebInspector.DOMNode} staleNode
+ * @this {WebInspector.ElementsPanel}
*/
- _setDefaultSelectedNode: function(node)
- {
- if (!node || this._hasNonDefaultSelectedNode || this._pendingNodeReveal)
- return;
- var treeOutline = WebInspector.ElementsTreeOutline.forDOMModel(node.domModel());
- if (!treeOutline)
- return;
- this.selectDOMNode(node);
- if (treeOutline.selectedTreeElement)
- treeOutline.selectedTreeElement.expand();
- },
-
- /**
- * @override
- */
- searchCanceled: function()
- {
- delete this._searchQuery;
- this._hideSearchHighlights();
-
- this._searchableView.updateSearchMatchesCount(0);
-
- delete this._currentSearchResultIndex;
- delete this._searchResults;
-
- WebInspector.DOMModel.cancelSearch();
- },
-
- /**
- * @override
- * @param {!WebInspector.SearchableView.SearchConfig} searchConfig
- * @param {boolean} shouldJump
- * @param {boolean=} jumpBackwards
- */
- performSearch: function(searchConfig, shouldJump, jumpBackwards)
- {
- var query = searchConfig.query;
- // Call searchCanceled since it will reset everything we need before doing a new search.
- this.searchCanceled();
-
- const whitespaceTrimmedQuery = query.trim();
- if (!whitespaceTrimmedQuery.length)
- return;
-
- this._searchQuery = query;
-
- var promises = [];
- var domModels = WebInspector.DOMModel.instances();
- for (var domModel of domModels)
- promises.push(domModel.performSearchPromise(whitespaceTrimmedQuery, WebInspector.moduleSetting("showUAShadowDOM").get()));
- Promise.all(promises).then(resultCountCallback.bind(this));
-
- /**
- * @param {!Array.<number>} resultCounts
- * @this {WebInspector.ElementsPanel}
- */
- function resultCountCallback(resultCounts)
- {
- /**
- * @type {!Array.<{domModel: !WebInspector.DOMModel, index: number, node: (?WebInspector.DOMNode|undefined)}>}
- */
- this._searchResults = [];
- for (var i = 0; i < resultCounts.length; ++i) {
- var resultCount = resultCounts[i];
- for (var j = 0; j < resultCount; ++j)
- this._searchResults.push({domModel: domModels[i], index: j, node: undefined});
- }
- this._searchableView.updateSearchMatchesCount(this._searchResults.length);
- if (!this._searchResults.length)
- return;
- this._currentSearchResultIndex = -1;
-
- if (shouldJump)
- this._jumpToSearchResult(jumpBackwards ? -1 : 0);
- }
- },
-
- _domWordWrapSettingChanged: function(event)
- {
- // FIXME: crbug.com/425984
- this._contentElement.classList.toggle("elements-wrap", event.data);
- for (var i = 0; i < this._treeOutlines.length; ++i)
- this._treeOutlines[i].setWordWrap(/** @type {boolean} */ (event.data));
- },
-
- switchToAndFocus: function(node)
- {
- // Reset search restore.
- this._searchableView.cancelSearch();
- WebInspector.viewManager.showView("elements").then(() => this.selectDOMNode(node, true));
- },
-
- /**
- * @param {!Element} element
- * @param {!Event} event
- * @return {!Element|!AnchorBox|undefined}
- */
- _getPopoverAnchor: function(element, event)
- {
- var anchor = element.enclosingNodeOrSelfWithClass("webkit-html-resource-link");
- if (!anchor || !anchor.href)
- return;
-
- return anchor;
- },
-
- /**
- * @param {!Element} anchor
- * @param {!WebInspector.Popover} popover
- */
- _showPopover: function(anchor, popover)
- {
- var node = this.selectedDOMNode();
- if (node)
- WebInspector.DOMPresentationUtils.buildImagePreviewContents(node.target(), anchor.href, true, showPopover);
-
- /**
- * @param {!Element=} contents
- */
- function showPopover(contents)
- {
- if (!contents)
- return;
- popover.setCanShrink(false);
- popover.showForAnchor(contents, anchor);
- }
- },
-
- _jumpToSearchResult: function(index)
- {
- this._hideSearchHighlights();
- this._currentSearchResultIndex = (index + this._searchResults.length) % this._searchResults.length;
- this._highlightCurrentSearchResult();
- },
-
- /**
- * @override
- */
- jumpToNextSearchResult: function()
- {
- if (!this._searchResults)
- return;
- this._jumpToSearchResult(this._currentSearchResultIndex + 1);
- },
-
- /**
- * @override
- */
- jumpToPreviousSearchResult: function()
- {
- if (!this._searchResults)
- return;
- this._jumpToSearchResult(this._currentSearchResultIndex - 1);
- },
+ function restoreNode(domModel, staleNode) {
+ var nodePath = staleNode ? staleNode.path() : null;
+ if (!nodePath) {
+ onNodeRestored.call(this, null);
+ return;
+ }
+ domModel.pushNodeByPathToFrontend(nodePath, onNodeRestored.bind(this));
+ }
/**
- * @override
- * @return {boolean}
+ * @param {?DOMAgent.NodeId} restoredNodeId
+ * @this {WebInspector.ElementsPanel}
*/
- supportsCaseSensitiveSearch: function()
- {
- return false;
- },
+ function onNodeRestored(restoredNodeId) {
+ if (savedSelectedNodeOnReset !== this._selectedNodeOnReset)
+ return;
+ var node = restoredNodeId ? domModel.nodeForId(restoredNodeId) : null;
+ if (!node) {
+ var inspectedDocument = domModel.existingDocument();
+ node = inspectedDocument ? inspectedDocument.body || inspectedDocument.documentElement : null;
+ }
+ this._setDefaultSelectedNode(node);
+ this._lastSelectedNodeSelectedForTest();
+ }
+ }
+
+ _lastSelectedNodeSelectedForTest() {
+ }
+
+ /**
+ * @param {?WebInspector.DOMNode} node
+ */
+ _setDefaultSelectedNode(node) {
+ if (!node || this._hasNonDefaultSelectedNode || this._pendingNodeReveal)
+ return;
+ var treeOutline = WebInspector.ElementsTreeOutline.forDOMModel(node.domModel());
+ if (!treeOutline)
+ return;
+ this.selectDOMNode(node);
+ if (treeOutline.selectedTreeElement)
+ treeOutline.selectedTreeElement.expand();
+ }
+
+ /**
+ * @override
+ */
+ searchCanceled() {
+ delete this._searchQuery;
+ this._hideSearchHighlights();
+
+ this._searchableView.updateSearchMatchesCount(0);
+
+ delete this._currentSearchResultIndex;
+ delete this._searchResults;
+
+ WebInspector.DOMModel.cancelSearch();
+ }
+
+ /**
+ * @override
+ * @param {!WebInspector.SearchableView.SearchConfig} searchConfig
+ * @param {boolean} shouldJump
+ * @param {boolean=} jumpBackwards
+ */
+ performSearch(searchConfig, shouldJump, jumpBackwards) {
+ var query = searchConfig.query;
+ // Call searchCanceled since it will reset everything we need before doing a new search.
+ this.searchCanceled();
+
+ const whitespaceTrimmedQuery = query.trim();
+ if (!whitespaceTrimmedQuery.length)
+ return;
+
+ this._searchQuery = query;
+
+ var promises = [];
+ var domModels = WebInspector.DOMModel.instances();
+ for (var domModel of domModels)
+ promises.push(
+ domModel.performSearchPromise(whitespaceTrimmedQuery, WebInspector.moduleSetting('showUAShadowDOM').get()));
+ Promise.all(promises).then(resultCountCallback.bind(this));
/**
- * @override
- * @return {boolean}
+ * @param {!Array.<number>} resultCounts
+ * @this {WebInspector.ElementsPanel}
*/
- supportsRegexSearch: function()
- {
- return false;
- },
-
- _highlightCurrentSearchResult: function()
- {
- var index = this._currentSearchResultIndex;
- var searchResults = this._searchResults;
- var searchResult = searchResults[index];
-
- if (searchResult.node === null) {
- this._searchableView.updateCurrentMatchIndex(index);
- return;
- }
-
- /**
- * @param {?WebInspector.DOMNode} node
- * @this {WebInspector.ElementsPanel}
- */
- function searchCallback(node)
- {
- searchResult.node = node;
- this._highlightCurrentSearchResult();
- }
-
- if (typeof searchResult.node === "undefined") {
- // No data for slot, request it.
- searchResult.domModel.searchResult(searchResult.index, searchCallback.bind(this));
- return;
- }
-
- this._searchableView.updateCurrentMatchIndex(index);
+ function resultCountCallback(resultCounts) {
+ /**
+ * @type {!Array.<{domModel: !WebInspector.DOMModel, index: number, node: (?WebInspector.DOMNode|undefined)}>}
+ */
+ this._searchResults = [];
+ for (var i = 0; i < resultCounts.length; ++i) {
+ var resultCount = resultCounts[i];
+ for (var j = 0; j < resultCount; ++j)
+ this._searchResults.push({domModel: domModels[i], index: j, node: undefined});
+ }
+ this._searchableView.updateSearchMatchesCount(this._searchResults.length);
+ if (!this._searchResults.length)
+ return;
+ this._currentSearchResultIndex = -1;
+
+ if (shouldJump)
+ this._jumpToSearchResult(jumpBackwards ? -1 : 0);
+ }
+ }
- var treeElement = this._treeElementForNode(searchResult.node);
- if (treeElement) {
- treeElement.highlightSearchResults(this._searchQuery);
- treeElement.reveal();
- var matches = treeElement.listItemElement.getElementsByClassName(WebInspector.highlightedSearchResultClassName);
- if (matches.length)
- matches[0].scrollIntoViewIfNeeded(false);
- }
- },
-
- _hideSearchHighlights: function()
- {
- if (!this._searchResults || !this._searchResults.length || this._currentSearchResultIndex < 0)
- return;
- var searchResult = this._searchResults[this._currentSearchResultIndex];
- if (!searchResult.node)
- return;
- var treeOutline = WebInspector.ElementsTreeOutline.forDOMModel(searchResult.node.domModel());
- var treeElement = treeOutline.findTreeElement(searchResult.node);
- if (treeElement)
- treeElement.hideSearchHighlights();
- },
+ _domWordWrapSettingChanged(event) {
+ // FIXME: crbug.com/425984
+ this._contentElement.classList.toggle('elements-wrap', event.data);
+ for (var i = 0; i < this._treeOutlines.length; ++i)
+ this._treeOutlines[i].setWordWrap(/** @type {boolean} */ (event.data));
+ }
+
+ switchToAndFocus(node) {
+ // Reset search restore.
+ this._searchableView.cancelSearch();
+ WebInspector.viewManager.showView('elements').then(() => this.selectDOMNode(node, true));
+ }
+
+ /**
+ * @param {!Element} element
+ * @param {!Event} event
+ * @return {!Element|!AnchorBox|undefined}
+ */
+ _getPopoverAnchor(element, event) {
+ var anchor = element.enclosingNodeOrSelfWithClass('webkit-html-resource-link');
+ if (!anchor || !anchor.href)
+ return;
+
+ return anchor;
+ }
+
+ /**
+ * @param {!Element} anchor
+ * @param {!WebInspector.Popover} popover
+ */
+ _showPopover(anchor, popover) {
+ var node = this.selectedDOMNode();
+ if (node)
+ WebInspector.DOMPresentationUtils.buildImagePreviewContents(node.target(), anchor.href, true, showPopover);
/**
- * @return {?WebInspector.DOMNode}
+ * @param {!Element=} contents
*/
- selectedDOMNode: function()
- {
- for (var i = 0; i < this._treeOutlines.length; ++i) {
- var treeOutline = this._treeOutlines[i];
- if (treeOutline.selectedDOMNode())
- return treeOutline.selectedDOMNode();
- }
- return null;
- },
+ function showPopover(contents) {
+ if (!contents)
+ return;
+ popover.setCanShrink(false);
+ popover.showForAnchor(contents, anchor);
+ }
+ }
+
+ _jumpToSearchResult(index) {
+ this._hideSearchHighlights();
+ this._currentSearchResultIndex = (index + this._searchResults.length) % this._searchResults.length;
+ this._highlightCurrentSearchResult();
+ }
+
+ /**
+ * @override
+ */
+ jumpToNextSearchResult() {
+ if (!this._searchResults)
+ return;
+ this._jumpToSearchResult(this._currentSearchResultIndex + 1);
+ }
+
+ /**
+ * @override
+ */
+ jumpToPreviousSearchResult() {
+ if (!this._searchResults)
+ return;
+ this._jumpToSearchResult(this._currentSearchResultIndex - 1);
+ }
+
+ /**
+ * @override
+ * @return {boolean}
+ */
+ supportsCaseSensitiveSearch() {
+ return false;
+ }
+
+ /**
+ * @override
+ * @return {boolean}
+ */
+ supportsRegexSearch() {
+ return false;
+ }
+
+ _highlightCurrentSearchResult() {
+ var index = this._currentSearchResultIndex;
+ var searchResults = this._searchResults;
+ var searchResult = searchResults[index];
+
+ if (searchResult.node === null) {
+ this._searchableView.updateCurrentMatchIndex(index);
+ return;
+ }
/**
- * @param {!WebInspector.DOMNode} node
- * @param {boolean=} focus
+ * @param {?WebInspector.DOMNode} node
+ * @this {WebInspector.ElementsPanel}
*/
- selectDOMNode: function(node, focus)
- {
- for (var i = 0; i < this._treeOutlines.length; ++i) {
- var treeOutline = this._treeOutlines[i];
- if (treeOutline.domModel() === node.domModel())
- treeOutline.selectDOMNode(node, focus);
- else
- treeOutline.selectDOMNode(null);
- }
- },
+ function searchCallback(node) {
+ searchResult.node = node;
+ this._highlightCurrentSearchResult();
+ }
- /**
- * @param {!WebInspector.Event} event
- */
- _updateBreadcrumbIfNeeded: function(event)
- {
- var nodes = /** @type {!Array.<!WebInspector.DOMNode>} */ (event.data);
- this._breadcrumbs.updateNodes(nodes);
- },
+ if (typeof searchResult.node === 'undefined') {
+ // No data for slot, request it.
+ searchResult.domModel.searchResult(searchResult.index, searchCallback.bind(this));
+ return;
+ }
- /**
- * @param {!WebInspector.Event} event
- */
- _crumbNodeSelected: function(event)
- {
- var node = /** @type {!WebInspector.DOMNode} */ (event.data);
- this.selectDOMNode(node, true);
- },
+ this._searchableView.updateCurrentMatchIndex(index);
+ var treeElement = this._treeElementForNode(searchResult.node);
+ if (treeElement) {
+ treeElement.highlightSearchResults(this._searchQuery);
+ treeElement.reveal();
+ var matches = treeElement.listItemElement.getElementsByClassName(WebInspector.highlightedSearchResultClassName);
+ if (matches.length)
+ matches[0].scrollIntoViewIfNeeded(false);
+ }
+ }
+
+ _hideSearchHighlights() {
+ if (!this._searchResults || !this._searchResults.length || this._currentSearchResultIndex < 0)
+ return;
+ var searchResult = this._searchResults[this._currentSearchResultIndex];
+ if (!searchResult.node)
+ return;
+ var treeOutline = WebInspector.ElementsTreeOutline.forDOMModel(searchResult.node.domModel());
+ var treeElement = treeOutline.findTreeElement(searchResult.node);
+ if (treeElement)
+ treeElement.hideSearchHighlights();
+ }
+
+ /**
+ * @return {?WebInspector.DOMNode}
+ */
+ selectedDOMNode() {
+ for (var i = 0; i < this._treeOutlines.length; ++i) {
+ var treeOutline = this._treeOutlines[i];
+ if (treeOutline.selectedDOMNode())
+ return treeOutline.selectedDOMNode();
+ }
+ return null;
+ }
+
+ /**
+ * @param {!WebInspector.DOMNode} node
+ * @param {boolean=} focus
+ */
+ selectDOMNode(node, focus) {
+ for (var i = 0; i < this._treeOutlines.length; ++i) {
+ var treeOutline = this._treeOutlines[i];
+ if (treeOutline.domModel() === node.domModel())
+ treeOutline.selectDOMNode(node, focus);
+ else
+ treeOutline.selectDOMNode(null);
+ }
+ }
+
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _updateBreadcrumbIfNeeded(event) {
+ var nodes = /** @type {!Array.<!WebInspector.DOMNode>} */ (event.data);
+ this._breadcrumbs.updateNodes(nodes);
+ }
+
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _crumbNodeSelected(event) {
+ var node = /** @type {!WebInspector.DOMNode} */ (event.data);
+ this.selectDOMNode(node, true);
+ }
+
+ /**
+ * @override
+ * @param {!KeyboardEvent} event
+ */
+ handleShortcut(event) {
/**
- * @override
- * @param {!KeyboardEvent} event
+ * @param {!WebInspector.ElementsTreeOutline} treeOutline
*/
- handleShortcut: function(event)
- {
- /**
- * @param {!WebInspector.ElementsTreeOutline} treeOutline
- */
- function handleUndoRedo(treeOutline)
- {
- if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && !event.shiftKey && (event.key === "Z" || event.key === "z")) { // Z key
- treeOutline.domModel().undo();
- event.handled = true;
- return;
- }
-
- var isRedoKey = WebInspector.isMac() ? event.metaKey && event.shiftKey && (event.key === "Z" || event.key === "z") : // Z key
- event.ctrlKey && (event.key === "Y" || event.key === "y"); // Y key
- if (isRedoKey) {
- treeOutline.domModel().redo();
- event.handled = true;
- }
- }
-
- if (WebInspector.isEditing() && event.keyCode !== WebInspector.KeyboardShortcut.Keys.F2.code)
- return;
+ function handleUndoRedo(treeOutline) {
+ if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && !event.shiftKey &&
+ (event.key === 'Z' || event.key === 'z')) { // Z key
+ treeOutline.domModel().undo();
+ event.handled = true;
+ return;
+ }
+
+ var isRedoKey = WebInspector.isMac() ?
+ event.metaKey && event.shiftKey && (event.key === 'Z' || event.key === 'z') : // Z key
+ event.ctrlKey && (event.key === 'Y' || event.key === 'y'); // Y key
+ if (isRedoKey) {
+ treeOutline.domModel().redo();
+ event.handled = true;
+ }
+ }
- var treeOutline = null;
- for (var i = 0; i < this._treeOutlines.length; ++i) {
- if (this._treeOutlines[i].selectedDOMNode())
- treeOutline = this._treeOutlines[i];
- }
- if (!treeOutline)
- return;
-
- if (!treeOutline.editing()) {
- handleUndoRedo.call(null, treeOutline);
- if (event.handled) {
- this._stylesWidget.forceUpdate();
- return;
- }
- }
+ if (WebInspector.isEditing() && event.keyCode !== WebInspector.KeyboardShortcut.Keys.F2.code)
+ return;
- treeOutline.handleShortcut(event);
- if (event.handled)
- return;
+ var treeOutline = null;
+ for (var i = 0; i < this._treeOutlines.length; ++i) {
+ if (this._treeOutlines[i].selectedDOMNode())
+ treeOutline = this._treeOutlines[i];
+ }
+ if (!treeOutline)
+ return;
+
+ if (!treeOutline.editing()) {
+ handleUndoRedo.call(null, treeOutline);
+ if (event.handled) {
+ this._stylesWidget.forceUpdate();
+ return;
+ }
+ }
- WebInspector.Panel.prototype.handleShortcut.call(this, event);
- },
+ treeOutline.handleShortcut(event);
+ if (event.handled)
+ return;
+
+ super.handleShortcut(event);
+ }
+
+ /**
+ * @param {?WebInspector.DOMNode} node
+ * @return {?WebInspector.ElementsTreeOutline}
+ */
+ _treeOutlineForNode(node) {
+ if (!node)
+ return null;
+ return WebInspector.ElementsTreeOutline.forDOMModel(node.domModel());
+ }
+
+ /**
+ * @param {!WebInspector.DOMNode} node
+ * @return {?WebInspector.ElementsTreeElement}
+ */
+ _treeElementForNode(node) {
+ var treeOutline = this._treeOutlineForNode(node);
+ return /** @type {?WebInspector.ElementsTreeElement} */ (treeOutline.findTreeElement(node));
+ }
+
+ /**
+ * @param {!WebInspector.DOMNode} node
+ * @return {!WebInspector.DOMNode}
+ */
+ _leaveUserAgentShadowDOM(node) {
+ var userAgentShadowRoot;
+ while ((userAgentShadowRoot = node.ancestorUserAgentShadowRoot()) && userAgentShadowRoot.parentNode)
+ node = userAgentShadowRoot.parentNode;
+ return node;
+ }
+
+ /**
+ * @param {!WebInspector.DOMNode} node
+ * @return {!Promise}
+ */
+ revealAndSelectNode(node) {
+ if (WebInspector.inspectElementModeController && WebInspector.inspectElementModeController.isInInspectElementMode())
+ WebInspector.inspectElementModeController.stopInspection();
+
+ this._omitDefaultSelection = true;
+
+ node = WebInspector.moduleSetting('showUAShadowDOM').get() ? node : this._leaveUserAgentShadowDOM(node);
+ node.highlightForTwoSeconds();
+
+ return WebInspector.viewManager.showView('elements').then(() => {
+ this.selectDOMNode(node, true);
+ delete this._omitDefaultSelection;
+
+ if (!this._notFirstInspectElement)
+ InspectorFrontendHost.inspectElementCompleted();
+ this._notFirstInspectElement = true;
+ });
+ }
+
+ _sidebarContextMenuEventFired(event) {
+ var contextMenu = new WebInspector.ContextMenu(event);
+ contextMenu.appendApplicableItems(/** @type {!Object} */ (event.deepElementFromPoint()));
+ contextMenu.show();
+ }
+
+ _showUAShadowDOMChanged() {
+ for (var i = 0; i < this._treeOutlines.length; ++i)
+ this._treeOutlines[i].update();
+ }
+
+ _updateSidebarPosition() {
+ var horizontally;
+ var position = WebInspector.moduleSetting('sidebarPosition').get();
+ if (position === 'right')
+ horizontally = false;
+ else if (position === 'bottom')
+ horizontally = true;
+ else
+ horizontally = WebInspector.inspectorView.element.offsetWidth < 680;
+
+ if (this.sidebarPaneView && horizontally === !this._splitWidget.isVertical())
+ return;
+
+ if (this.sidebarPaneView && this.sidebarPaneView.tabbedPane().shouldHideOnDetach())
+ return; // We can't reparent extension iframes.
+
+ var extensionSidebarPanes = WebInspector.extensionServer.sidebarPanes();
+ if (this.sidebarPaneView) {
+ this.sidebarPaneView.tabbedPane().detach();
+ this._splitWidget.uninstallResizer(this.sidebarPaneView.tabbedPane().headerElement());
+ }
- /**
- * @param {?WebInspector.DOMNode} node
- * @return {?WebInspector.ElementsTreeOutline}
- */
- _treeOutlineForNode: function(node)
- {
- if (!node)
- return null;
- return WebInspector.ElementsTreeOutline.forDOMModel(node.domModel());
- },
+ this._splitWidget.setVertical(!horizontally);
+ this.showToolbarPane(null);
- /**
- * @param {!WebInspector.DOMNode} node
- * @return {?WebInspector.ElementsTreeElement}
- */
- _treeElementForNode: function(node)
- {
- var treeOutline = this._treeOutlineForNode(node);
- return /** @type {?WebInspector.ElementsTreeElement} */ (treeOutline.findTreeElement(node));
- },
+ var matchedStylesContainer = new WebInspector.VBox();
+ matchedStylesContainer.element.appendChild(this._stylesSidebarToolbar);
+ var matchedStylePanesWrapper = new WebInspector.VBox();
+ matchedStylePanesWrapper.element.classList.add('style-panes-wrapper');
+ matchedStylePanesWrapper.show(matchedStylesContainer.element);
+ this._stylesWidget.show(matchedStylePanesWrapper.element);
- /**
- * @param {!WebInspector.DOMNode} node
- * @return {!WebInspector.DOMNode}
- */
- _leaveUserAgentShadowDOM: function(node)
- {
- var userAgentShadowRoot;
- while ((userAgentShadowRoot = node.ancestorUserAgentShadowRoot()) && userAgentShadowRoot.parentNode)
- node = userAgentShadowRoot.parentNode;
- return node;
- },
+ var computedStylePanesWrapper = new WebInspector.VBox();
+ computedStylePanesWrapper.element.classList.add('style-panes-wrapper');
+ this._computedStyleWidget.show(computedStylePanesWrapper.element);
/**
- * @param {!WebInspector.DOMNode} node
- * @return {!Promise}
+ * @param {boolean} inComputedStyle
+ * @this {WebInspector.ElementsPanel}
*/
- revealAndSelectNode: function(node)
- {
- if (WebInspector.inspectElementModeController && WebInspector.inspectElementModeController.isInInspectElementMode())
- WebInspector.inspectElementModeController.stopInspection();
-
- this._omitDefaultSelection = true;
-
- node = WebInspector.moduleSetting("showUAShadowDOM").get() ? node : this._leaveUserAgentShadowDOM(node);
- node.highlightForTwoSeconds();
-
- return WebInspector.viewManager.showView("elements").then(() => {
- this.selectDOMNode(node, true);
- delete this._omitDefaultSelection;
-
- if (!this._notFirstInspectElement)
- InspectorFrontendHost.inspectElementCompleted();
- this._notFirstInspectElement = true;
- });
- },
-
- _sidebarContextMenuEventFired: function(event)
- {
- var contextMenu = new WebInspector.ContextMenu(event);
- contextMenu.appendApplicableItems(/** @type {!Object} */ (event.deepElementFromPoint()));
- contextMenu.show();
- },
-
- _showUAShadowDOMChanged: function()
- {
- for (var i = 0; i < this._treeOutlines.length; ++i)
- this._treeOutlines[i].update();
- },
-
- _updateSidebarPosition: function()
- {
- var horizontally;
- var position = WebInspector.moduleSetting("sidebarPosition").get();
- if (position === "right")
- horizontally = false;
- else if (position === "bottom")
- horizontally = true;
- else
- horizontally = WebInspector.inspectorView.element.offsetWidth < 680;
-
- if (this.sidebarPaneView && horizontally === !this._splitWidget.isVertical())
- return;
-
- if (this.sidebarPaneView && this.sidebarPaneView.tabbedPane().shouldHideOnDetach())
- return; // We can't reparent extension iframes.
-
- var extensionSidebarPanes = WebInspector.extensionServer.sidebarPanes();
- if (this.sidebarPaneView) {
- this.sidebarPaneView.tabbedPane().detach();
- this._splitWidget.uninstallResizer(this.sidebarPaneView.tabbedPane().headerElement());
- }
-
- this._splitWidget.setVertical(!horizontally);
- this.showToolbarPane(null);
-
- var matchedStylesContainer = new WebInspector.VBox();
- matchedStylesContainer.element.appendChild(this._stylesSidebarToolbar);
- var matchedStylePanesWrapper = new WebInspector.VBox();
- matchedStylePanesWrapper.element.classList.add("style-panes-wrapper");
- matchedStylePanesWrapper.show(matchedStylesContainer.element);
- this._stylesWidget.show(matchedStylePanesWrapper.element);
-
- var computedStylePanesWrapper = new WebInspector.VBox();
- computedStylePanesWrapper.element.classList.add("style-panes-wrapper");
- this._computedStyleWidget.show(computedStylePanesWrapper.element);
-
- /**
- * @param {boolean} inComputedStyle
- * @this {WebInspector.ElementsPanel}
- */
- function showMetrics(inComputedStyle)
- {
- if (inComputedStyle)
- this._metricsWidget.show(computedStylePanesWrapper.element, this._computedStyleWidget.element);
- else
- this._metricsWidget.show(matchedStylePanesWrapper.element);
- }
-
- /**
- * @param {!WebInspector.Event} event
- * @this {WebInspector.ElementsPanel}
- */
- function tabSelected(event)
- {
- var tabId = /** @type {string} */ (event.data.tabId);
- if (tabId === WebInspector.UIString("Computed"))
- showMetrics.call(this, true);
- else if (tabId === WebInspector.UIString("Styles"))
- showMetrics.call(this, false);
- }
-
- this.sidebarPaneView = WebInspector.viewManager.createTabbedLocation(() => WebInspector.viewManager.showView("elements"));
- var tabbedPane = this.sidebarPaneView.tabbedPane();
- tabbedPane.element.addEventListener("contextmenu", this._sidebarContextMenuEventFired.bind(this), false);
- if (this._popoverHelper)
- this._popoverHelper.hidePopover();
- this._popoverHelper = new WebInspector.PopoverHelper(tabbedPane.element);
- this._popoverHelper.initializeCallbacks(this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
- this._popoverHelper.setTimeout(0);
-
- if (horizontally) {
- // Styles and computed are merged into a single tab.
- this._splitWidget.installResizer(tabbedPane.headerElement());
-
- var stylesView = new WebInspector.SimpleView(WebInspector.UIString("Styles"));
- stylesView.element.classList.add("flex-auto");
-
- var splitWidget = new WebInspector.SplitWidget(true, true, "stylesPaneSplitViewState", 215);
- splitWidget.show(stylesView.element);
-
- splitWidget.setMainWidget(matchedStylesContainer);
- splitWidget.setSidebarWidget(computedStylePanesWrapper);
-
- this.sidebarPaneView.appendView(stylesView);
- this._stylesViewToReveal = stylesView;
- } else {
- // Styles and computed are in separate tabs.
- var stylesView = new WebInspector.SimpleView(WebInspector.UIString("Styles"));
- stylesView.element.classList.add("flex-auto", "metrics-and-styles");
- matchedStylesContainer.show(stylesView.element);
-
- var computedView = new WebInspector.SimpleView(WebInspector.UIString("Computed"));
- computedView.element.classList.add("composite", "fill", "metrics-and-computed");
- computedStylePanesWrapper.show(computedView.element);
-
- tabbedPane.addEventListener(WebInspector.TabbedPane.Events.TabSelected, tabSelected, this);
- this.sidebarPaneView.appendView(stylesView);
- this.sidebarPaneView.appendView(computedView);
- this._stylesViewToReveal = stylesView;
- }
-
- showMetrics.call(this, horizontally);
-
- this.sidebarPaneView.appendApplicableItems("elements-sidebar");
- for (var i = 0; i < extensionSidebarPanes.length; ++i)
- this._addExtensionSidebarPane(extensionSidebarPanes[i]);
-
- this._splitWidget.setSidebarWidget(this.sidebarPaneView.tabbedPane());
- },
+ function showMetrics(inComputedStyle) {
+ if (inComputedStyle)
+ this._metricsWidget.show(computedStylePanesWrapper.element, this._computedStyleWidget.element);
+ else
+ this._metricsWidget.show(matchedStylePanesWrapper.element);
+ }
/**
* @param {!WebInspector.Event} event
+ * @this {WebInspector.ElementsPanel}
*/
- _extensionSidebarPaneAdded: function(event)
- {
- var pane = /** @type {!WebInspector.ExtensionSidebarPane} */ (event.data);
- this._addExtensionSidebarPane(pane);
- },
+ function tabSelected(event) {
+ var tabId = /** @type {string} */ (event.data.tabId);
+ if (tabId === WebInspector.UIString('Computed'))
+ showMetrics.call(this, true);
+ else if (tabId === WebInspector.UIString('Styles'))
+ showMetrics.call(this, false);
+ }
- /**
- * @param {!WebInspector.ExtensionSidebarPane} pane
- */
- _addExtensionSidebarPane: function(pane)
- {
- if (pane.panelName() === this.name)
- this.sidebarPaneView.appendView(pane);
- },
+ this.sidebarPaneView =
+ WebInspector.viewManager.createTabbedLocation(() => WebInspector.viewManager.showView('elements'));
+ var tabbedPane = this.sidebarPaneView.tabbedPane();
+ tabbedPane.element.addEventListener('contextmenu', this._sidebarContextMenuEventFired.bind(this), false);
+ if (this._popoverHelper)
+ this._popoverHelper.hidePopover();
+ this._popoverHelper = new WebInspector.PopoverHelper(tabbedPane.element);
+ this._popoverHelper.initializeCallbacks(this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
+ this._popoverHelper.setTimeout(0);
+
+ if (horizontally) {
+ // Styles and computed are merged into a single tab.
+ this._splitWidget.installResizer(tabbedPane.headerElement());
+
+ var stylesView = new WebInspector.SimpleView(WebInspector.UIString('Styles'));
+ stylesView.element.classList.add('flex-auto');
+
+ var splitWidget = new WebInspector.SplitWidget(true, true, 'stylesPaneSplitViewState', 215);
+ splitWidget.show(stylesView.element);
+
+ splitWidget.setMainWidget(matchedStylesContainer);
+ splitWidget.setSidebarWidget(computedStylePanesWrapper);
+
+ this.sidebarPaneView.appendView(stylesView);
+ this._stylesViewToReveal = stylesView;
+ } else {
+ // Styles and computed are in separate tabs.
+ var stylesView = new WebInspector.SimpleView(WebInspector.UIString('Styles'));
+ stylesView.element.classList.add('flex-auto', 'metrics-and-styles');
+ matchedStylesContainer.show(stylesView.element);
+
+ var computedView = new WebInspector.SimpleView(WebInspector.UIString('Computed'));
+ computedView.element.classList.add('composite', 'fill', 'metrics-and-computed');
+ computedStylePanesWrapper.show(computedView.element);
+
+ tabbedPane.addEventListener(WebInspector.TabbedPane.Events.TabSelected, tabSelected, this);
+ this.sidebarPaneView.appendView(stylesView);
+ this.sidebarPaneView.appendView(computedView);
+ this._stylesViewToReveal = stylesView;
+ }
- __proto__: WebInspector.Panel.prototype
+ showMetrics.call(this, horizontally);
+
+ this.sidebarPaneView.appendApplicableItems('elements-sidebar');
+ for (var i = 0; i < extensionSidebarPanes.length; ++i)
+ this._addExtensionSidebarPane(extensionSidebarPanes[i]);
+
+ this._splitWidget.setSidebarWidget(this.sidebarPaneView.tabbedPane());
+ }
+
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _extensionSidebarPaneAdded(event) {
+ var pane = /** @type {!WebInspector.ExtensionSidebarPane} */ (event.data);
+ this._addExtensionSidebarPane(pane);
+ }
+
+ /**
+ * @param {!WebInspector.ExtensionSidebarPane} pane
+ */
+ _addExtensionSidebarPane(pane) {
+ if (pane.panelName() === this.name)
+ this.sidebarPaneView.appendView(pane);
+ }
};
+WebInspector.ElementsPanel._elementsSidebarViewTitleSymbol = Symbol('title');
+
/**
- * @constructor
* @implements {WebInspector.ContextMenu.Provider}
+ * @unrestricted
*/
-WebInspector.ElementsPanel.ContextMenuProvider = function()
-{
-};
-
-WebInspector.ElementsPanel.ContextMenuProvider.prototype = {
- /**
- * @override
- * @param {!Event} event
- * @param {!WebInspector.ContextMenu} contextMenu
- * @param {!Object} object
- */
- appendApplicableItems: function(event, contextMenu, object)
- {
- if (!(object instanceof WebInspector.RemoteObject && (/** @type {!WebInspector.RemoteObject} */ (object)).isNode())
- && !(object instanceof WebInspector.DOMNode)
- && !(object instanceof WebInspector.DeferredDOMNode)) {
- return;
- }
-
- // Add debbuging-related actions
- if (object instanceof WebInspector.DOMNode) {
- contextMenu.appendSeparator();
- WebInspector.domBreakpointsSidebarPane.populateNodeContextMenu(object, contextMenu, true);
- }
+WebInspector.ElementsPanel.ContextMenuProvider = class {
+ /**
+ * @override
+ * @param {!Event} event
+ * @param {!WebInspector.ContextMenu} contextMenu
+ * @param {!Object} object
+ */
+ appendApplicableItems(event, contextMenu, object) {
+ if (!(object instanceof WebInspector.RemoteObject &&
+ (/** @type {!WebInspector.RemoteObject} */ (object)).isNode()) &&
+ !(object instanceof WebInspector.DOMNode) && !(object instanceof WebInspector.DeferredDOMNode)) {
+ return;
+ }
- // Skip adding "Reveal..." menu item for our own tree outline.
- if (WebInspector.ElementsPanel.instance().element.isAncestor(/** @type {!Node} */ (event.target)))
- return;
- var commandCallback = WebInspector.Revealer.reveal.bind(WebInspector.Revealer, object);
- contextMenu.appendItem(WebInspector.UIString.capitalize("Reveal in Elements ^panel"), commandCallback);
+ // Add debbuging-related actions
+ if (object instanceof WebInspector.DOMNode) {
+ contextMenu.appendSeparator();
+ WebInspector.domBreakpointsSidebarPane.populateNodeContextMenu(object, contextMenu, true);
}
+
+ // Skip adding "Reveal..." menu item for our own tree outline.
+ if (WebInspector.ElementsPanel.instance().element.isAncestor(/** @type {!Node} */ (event.target)))
+ return;
+ var commandCallback = WebInspector.Revealer.reveal.bind(WebInspector.Revealer, object);
+ contextMenu.appendItem(WebInspector.UIString.capitalize('Reveal in Elements ^panel'), commandCallback);
+ }
};
/**
- * @constructor
* @implements {WebInspector.Revealer}
+ * @unrestricted
*/
-WebInspector.ElementsPanel.DOMNodeRevealer = function() { };
+WebInspector.ElementsPanel.DOMNodeRevealer = class {
+ /**
+ * @override
+ * @param {!Object} node
+ * @return {!Promise}
+ */
+ reveal(node) {
+ var panel = WebInspector.ElementsPanel.instance();
+ panel._pendingNodeReveal = true;
+
+ return new Promise(revealPromise);
-WebInspector.ElementsPanel.DOMNodeRevealer.prototype = {
/**
- * @override
- * @param {!Object} node
- * @return {!Promise}
+ * @param {function(undefined)} resolve
+ * @param {function(!Error)} reject
*/
- reveal: function(node)
- {
- var panel = WebInspector.ElementsPanel.instance();
- panel._pendingNodeReveal = true;
-
- return new Promise(revealPromise);
-
- /**
- * @param {function(undefined)} resolve
- * @param {function(!Error)} reject
- */
- function revealPromise(resolve, reject)
- {
- if (node instanceof WebInspector.DOMNode) {
- onNodeResolved(/** @type {!WebInspector.DOMNode} */ (node));
- } else if (node instanceof WebInspector.DeferredDOMNode) {
- (/** @type {!WebInspector.DeferredDOMNode} */ (node)).resolve(onNodeResolved);
- } else if (node instanceof WebInspector.RemoteObject) {
- var domModel = WebInspector.DOMModel.fromTarget(/** @type {!WebInspector.RemoteObject} */ (node).target());
- if (domModel)
- domModel.pushObjectAsNodeToFrontend(node, onNodeResolved);
- else
- reject(new Error("Could not resolve a node to reveal."));
- } else {
- reject(new Error("Can't reveal a non-node."));
- panel._pendingNodeReveal = false;
- }
-
- /**
- * @param {?WebInspector.DOMNode} resolvedNode
- */
- function onNodeResolved(resolvedNode)
- {
- panel._pendingNodeReveal = false;
-
- if (resolvedNode) {
- panel.revealAndSelectNode(resolvedNode).then(resolve);
- return;
- }
- reject(new Error("Could not resolve node to reveal."));
- }
+ function revealPromise(resolve, reject) {
+ if (node instanceof WebInspector.DOMNode) {
+ onNodeResolved(/** @type {!WebInspector.DOMNode} */ (node));
+ } else if (node instanceof WebInspector.DeferredDOMNode) {
+ (/** @type {!WebInspector.DeferredDOMNode} */ (node)).resolve(onNodeResolved);
+ } else if (node instanceof WebInspector.RemoteObject) {
+ var domModel = WebInspector.DOMModel.fromTarget(/** @type {!WebInspector.RemoteObject} */ (node).target());
+ if (domModel)
+ domModel.pushObjectAsNodeToFrontend(node, onNodeResolved);
+ else
+ reject(new Error('Could not resolve a node to reveal.'));
+ } else {
+ reject(new Error('Can\'t reveal a non-node.'));
+ panel._pendingNodeReveal = false;
+ }
+
+ /**
+ * @param {?WebInspector.DOMNode} resolvedNode
+ */
+ function onNodeResolved(resolvedNode) {
+ panel._pendingNodeReveal = false;
+
+ if (resolvedNode) {
+ panel.revealAndSelectNode(resolvedNode).then(resolve);
+ return;
}
+ reject(new Error('Could not resolve node to reveal.'));
+ }
}
+ }
};
/**
- * @constructor
* @implements {WebInspector.Revealer}
+ * @unrestricted
*/
-WebInspector.ElementsPanel.CSSPropertyRevealer = function() { };
-
-WebInspector.ElementsPanel.CSSPropertyRevealer.prototype = {
- /**
- * @override
- * @param {!Object} property
- * @return {!Promise}
- */
- reveal: function(property)
- {
- var panel = WebInspector.ElementsPanel.instance();
- return panel._revealProperty(/** @type {!WebInspector.CSSProperty} */ (property));
- }
+WebInspector.ElementsPanel.CSSPropertyRevealer = class {
+ /**
+ * @override
+ * @param {!Object} property
+ * @return {!Promise}
+ */
+ reveal(property) {
+ var panel = WebInspector.ElementsPanel.instance();
+ return panel._revealProperty(/** @type {!WebInspector.CSSProperty} */ (property));
+ }
};
-/**
- * @return {!WebInspector.ElementsPanel}
- */
-WebInspector.ElementsPanel.instance = function()
-{
- return /** @type {!WebInspector.ElementsPanel} */ (self.runtime.sharedInstance(WebInspector.ElementsPanel));
-};
/**
- * @constructor
* @implements {WebInspector.ActionDelegate}
+ * @unrestricted
*/
-WebInspector.ElementsActionDelegate = function() { };
-
-WebInspector.ElementsActionDelegate.prototype = {
- /**
- * @override
- * @param {!WebInspector.Context} context
- * @param {string} actionId
- * @return {boolean}
- */
- handleAction: function(context, actionId)
- {
- var node = WebInspector.context.flavor(WebInspector.DOMNode);
- if (!node)
- return true;
- var treeOutline = WebInspector.ElementsTreeOutline.forDOMModel(node.domModel());
- if (!treeOutline)
- return true;
-
- switch (actionId) {
- case "elements.hide-element":
- treeOutline.toggleHideElement(node);
- return true;
- case "elements.edit-as-html":
- treeOutline.toggleEditAsHTML(node);
- return true;
- }
- return false;
+WebInspector.ElementsActionDelegate = class {
+ /**
+ * @override
+ * @param {!WebInspector.Context} context
+ * @param {string} actionId
+ * @return {boolean}
+ */
+ handleAction(context, actionId) {
+ var node = WebInspector.context.flavor(WebInspector.DOMNode);
+ if (!node)
+ return true;
+ var treeOutline = WebInspector.ElementsTreeOutline.forDOMModel(node.domModel());
+ if (!treeOutline)
+ return true;
+
+ switch (actionId) {
+ case 'elements.hide-element':
+ treeOutline.toggleHideElement(node);
+ return true;
+ case 'elements.edit-as-html':
+ treeOutline.toggleEditAsHTML(node);
+ return true;
}
+ return false;
+ }
};
/**
- * @constructor
* @implements {WebInspector.DOMPresentationUtils.MarkerDecorator}
+ * @unrestricted
*/
-WebInspector.ElementsPanel.PseudoStateMarkerDecorator = function()
-{
-};
-
-WebInspector.ElementsPanel.PseudoStateMarkerDecorator.prototype = {
- /**
- * @override
- * @param {!WebInspector.DOMNode} node
- * @return {?{title: string, color: string}}
- */
- decorate: function(node)
- {
- return { color: "orange", title: WebInspector.UIString("Element state: %s", ":" + WebInspector.CSSModel.fromNode(node).pseudoState(node).join(", :")) };
- }
+WebInspector.ElementsPanel.PseudoStateMarkerDecorator = class {
+ /**
+ * @override
+ * @param {!WebInspector.DOMNode} node
+ * @return {?{title: string, color: string}}
+ */
+ decorate(node) {
+ return {
+ color: 'orange',
+ title: WebInspector.UIString(
+ 'Element state: %s', ':' + WebInspector.CSSModel.fromNode(node).pseudoState(node).join(', :'))
+ };
+ }
};
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/elements/ElementsBreadcrumbs.js ('k') | third_party/WebKit/Source/devtools/front_end/elements/ElementsSidebarPane.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698