src/third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js

   1 /*
   2  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
   3  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
   4  * Copyright (C) 2009 Joseph Pecoraro
   5  *
   6  * Redistribution and use in source and binary forms, with or without
   7  * modification, are permitted provided that the following conditions
   8  * are met:
   9  *
  10  * 1.  Redistributions of source code must retain the above copyright
  11  *     notice, this list of conditions and the following disclaimer.
  12  * 2.  Redistributions in binary form must reproduce the above copyright
  13  *     notice, this list of conditions and the following disclaimer in the
  14  *     documentation and/or other materials provided with the distribution.
  15  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  16  *     its contributors may be used to endorse or promote products derived
  17  *     from this software without specific prior written permission.
  18  *
  19  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  20  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  21  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  22  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  23  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  24  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  25  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  26  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  28  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29  */
  30
  31 importScript("DOMSyntaxHighlighter.js");
  32 importScript("ElementsTreeOutline.js");
  33 importScript("EventListenersSidebarPane.js");
  34 importScript("MetricsSidebarPane.js");
  35 importScript("OverridesView.js");
  36 importScript("PlatformFontsSidebarPane.js");
  37 importScript("PropertiesSidebarPane.js");
  38 importScript("RenderingOptionsView.js");
  39 importScript("StylesSidebarPane.js");
  40
  41 /**
  42  * @constructor
  43  * @implements {WebInspector.Searchable}
  44  * @implements {WebInspector.TargetManager.Observer}
  45  * @extends {WebInspector.Panel}
  46  */
  47 WebInspector.ElementsPanel = function()
  48 {
  49     WebInspector.Panel.call(this, "elements");
  50     this.registerRequiredCSS("breadcrumbList.css");
  51     this.registerRequiredCSS("elementsPanel.css");
  52     this.registerRequiredCSS("suggestBox.css");
  53     this.setHideOnDetach();
  54
  55     this._splitView = new WebInspector.SplitView(true, true, "elementsPanelSplitViewState", 325, 325);
  56     this._splitView.addEventListener(WebInspector.SplitView.Events.SidebarSizeChanged, this._updateTreeOutlineVisibleWidth.bind(this));
  57     this._splitView.show(this.element);
  58
  59     this._searchableView = new WebInspector.SearchableView(this);
  60     this._searchableView.setMinimumSize(25, 19);
  61     this._searchableView.show(this._splitView.mainElement());
  62     var stackElement = this._searchableView.element;
  63
  64     this.contentElement = stackElement.createChild("div");
  65     this.contentElement.id = "elements-content";
  66     this.contentElement.classList.add("outline-disclosure");
  67     this.contentElement.classList.add("source-code");
  68     if (!WebInspector.settings.domWordWrap.get())
  69         this.contentElement.classList.add("nowrap");
  70     WebInspector.settings.domWordWrap.addChangeListener(this._domWordWrapSettingChanged.bind(this));
  71
  72     this.contentElement.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
  73     this._splitView.sidebarElement().addEventListener("contextmenu", this._sidebarContextMenuEventFired.bind(this), false);
  74
  75     var crumbsContainer = stackElement.createChild("div");
  76     crumbsContainer.id = "elements-crumbs";
  77     this.crumbsElement = crumbsContainer.createChild("div", "crumbs");
  78     this.crumbsElement.addEventListener("mousemove", this._mouseMovedInCrumbs.bind(this), false);
  79     this.crumbsElement.addEventListener("mouseout", this._mouseMovedOutOfCrumbs.bind(this), false);
  80
  81     this.sidebarPanes = {};
  82     this.sidebarPanes.platformFonts = new WebInspector.PlatformFontsSidebarPane();
  83     this.sidebarPanes.computedStyle = new WebInspector.ComputedStyleSidebarPane();
  84     this.sidebarPanes.styles = new WebInspector.StylesSidebarPane(this.sidebarPanes.computedStyle, this._setPseudoClassForNode.bind(this));
  85
  86     this._matchedStylesFilterBoxContainer = document.createElement("div");
  87     this._matchedStylesFilterBoxContainer.className = "sidebar-pane-filter-box";
  88     this._computedStylesFilterBoxContainer = document.createElement("div");
  89     this._computedStylesFilterBoxContainer.className = "sidebar-pane-filter-box";
  90     this.sidebarPanes.styles.setFilterBoxContainers(this._matchedStylesFilterBoxContainer, this._computedStylesFilterBoxContainer);
  91
  92     this.sidebarPanes.metrics = new WebInspector.MetricsSidebarPane();
  93     this.sidebarPanes.properties = new WebInspector.PropertiesSidebarPane();
  94     this.sidebarPanes.domBreakpoints = WebInspector.domBreakpointsSidebarPane.createProxy(this);
  95     this.sidebarPanes.eventListeners = new WebInspector.EventListenersSidebarPane();
  96
  97     this.sidebarPanes.styles.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateStyles.bind(this, false));
  98     this.sidebarPanes.metrics.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateMetrics.bind(this));
  99     this.sidebarPanes.platformFonts.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updatePlatformFonts.bind(this));
 100     this.sidebarPanes.properties.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateProperties.bind(this));
 101     this.sidebarPanes.eventListeners.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateEventListeners.bind(this));
 102
 103     this.sidebarPanes.styles.addEventListener("style edited", this._stylesPaneEdited, this);
 104     this.sidebarPanes.styles.addEventListener("style property toggled", this._stylesPaneEdited, this);
 105     this.sidebarPanes.metrics.addEventListener("metrics edited", this._metricsPaneEdited, this);
 106     this._extensionSidebarPanes = [];
 107
 108     WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._dockSideChanged.bind(this));
 109     WebInspector.settings.splitVerticallyWhenDockedToRight.addChangeListener(this._dockSideChanged.bind(this));
 110     this._dockSideChanged();
 111
 112     this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
 113     this._popoverHelper.setTimeout(0);
 114
 115     /** @type {!Array.<!WebInspector.ElementsTreeOutline>} */
 116     this._treeOutlines = [];
 117     /** @type {!Map.<!WebInspector.Target, !WebInspector.ElementsTreeOutline>} */
 118     this._targetToTreeOutline = new Map();
 119     WebInspector.targetManager.observeTargets(this);
 120     WebInspector.settings.showUAShadowDOM.addChangeListener(this._showUAShadowDOMChanged.bind(this));
 121 }
 122
 123 WebInspector.ElementsPanel.prototype = {
 124     /**
 125      * @param {!WebInspector.Target} target
 126      */
 127     targetAdded: function(target)
 128     {
 129         var treeOutline = new WebInspector.ElementsTreeOutline(target, true, true, this._populateContextMenu.bind(this), this._setPseudoClassForNode.bind(this));
 130         treeOutline.wireToDOMModel();
 131         treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this);
 132         treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated, this._updateBreadcrumbIfNeeded, this);
 133         this._treeOutlines.push(treeOutline);
 134         this._targetToTreeOutline.put(target, treeOutline);
 135
 136         target.domModel.addEventListener(WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdatedEvent, this);
 137         target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.ModelWasEnabled, this._updateSidebars, this);
 138
 139         // Perform attach if necessary.
 140         if (this.isShowing())
 141             this.wasShown();
 142     },
 143
 144     /**
 145      * @param {!WebInspector.Target} target
 146      */
 147     targetRemoved: function(target)
 148     {
 149         var treeOutline = this._targetToTreeOutline.get(target);
 150         treeOutline.unwireFromDOMModel();
 151         this._treeOutlines.remove(treeOutline);
 152         treeOutline.element.remove();
 153
 154         target.domModel.removeEventListener(WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdatedEvent, this);
 155         target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.ModelWasEnabled, this._updateSidebars, this);
 156     },
 157
 158     /**
 159      * @return {?WebInspector.ElementsTreeOutline}
 160      */
 161     _firstTreeOutlineDeprecated: function()
 162     {
 163         return this._treeOutlines[0] || null;
 164     },
 165
 166     _updateTreeOutlineVisibleWidth: function()
 167     {
 168         if (!this._treeOutlines.length)
 169             return;
 170
 171         var width = this._splitView.element.offsetWidth;
 172         if (this._splitView.isVertical())
 173             width -= this._splitView.sidebarSize();
 174         for (var i = 0; i < this._treeOutlines.length; ++i) {
 175             this._treeOutlines[i].setVisibleWidth(width);
 176             this._treeOutlines[i].updateSelection();
 177         }
 178         this.updateBreadcrumbSizes();
 179     },
 180
 181     /**
 182      * @return {!Element}
 183      */
 184     defaultFocusedElement: function()
 185     {
 186         return this._treeOutlines.length ? this._treeOutlines[0].element : this.element;
 187     },
 188
 189     /**
 190      * @return {!WebInspector.SearchableView}
 191      */
 192     searchableView: function()
 193     {
 194         return this._searchableView;
 195     },
 196
 197     wasShown: function()
 198     {
 199         for (var i = 0; i < this._treeOutlines.length; ++i) {
 200             var treeOutline = this._treeOutlines[i];
 201             // Attach heavy component lazily
 202             if (treeOutline.element.parentElement !== this.contentElement)
 203                 this.contentElement.appendChild(treeOutline.element);
 204         }
 205         WebInspector.Panel.prototype.wasShown.call(this);
 206         this.updateBreadcrumb();
 207
 208         for (var i = 0; i < this._treeOutlines.length; ++i) {
 209             var treeOutline = this._treeOutlines[i];
 210             treeOutline.updateSelection();
 211             treeOutline.setVisible(true);
 212
 213             if (!treeOutline.rootDOMNode)
 214                 if (treeOutline.domModel().existingDocument())
 215                     this._documentUpdated(treeOutline.domModel(), treeOutline.domModel().existingDocument());
 216                 else
 217                     treeOutline.domModel().requestDocument();
 218         }
 219
 220     },
 221
 222     willHide: function()
 223     {
 224         for (var i = 0; i < this._treeOutlines.length; ++i) {
 225             var treeOutline = this._treeOutlines[i];
 226             treeOutline.domModel().hideDOMNodeHighlight();
 227             treeOutline.setVisible(false);
 228             // Detach heavy component on hide
 229             this.contentElement.removeChild(treeOutline.element);
 230         }
 231         this._popoverHelper.hidePopover();
 232         WebInspector.Panel.prototype.willHide.call(this);
 233     },
 234
 235     onResize: function()
 236     {
 237         this._updateTreeOutlineVisibleWidth();
 238     },
 239
 240     omitDefaultSelection: function()
 241     {
 242         this._omitDefaultSelection = true;
 243     },
 244
 245     stopOmittingDefaultSelection: function()
 246     {
 247         delete this._omitDefaultSelection;
 248     },
 249
 250     /**
 251      * @param {!WebInspector.DOMNode} node
 252      * @param {string} pseudoClass
 253      * @param {boolean} enable
 254      */
 255     _setPseudoClassForNode: function(node, pseudoClass, enable)
 256     {
 257         if (!node || !node.target().cssModel.forcePseudoState(node, pseudoClass, enable))
 258             return;
 259
 260         this._targetToTreeOutline.get(node.target()).updateOpenCloseTags(node);
 261         this._metricsPaneEdited();
 262         this._stylesPaneEdited();
 263
 264         WebInspector.notifications.dispatchEventToListeners(WebInspector.UserMetrics.UserAction, {
 265             action: WebInspector.UserMetrics.UserActionNames.ForcedElementState,
 266             selector: WebInspector.DOMPresentationUtils.fullQualifiedSelector(node, false),
 267             enabled: enable,
 268             state: pseudoClass
 269         });
 270     },
 271
 272     /**
 273      * @param {!WebInspector.Event} event
 274      */
 275     _selectedNodeChanged: function(event)
 276     {
 277         var selectedNode = /** @type {?WebInspector.DOMNode} */ (event.data);
 278         for (var i = 0; i < this._treeOutlines.length; ++i) {
 279             if (!selectedNode || selectedNode.domModel() !== this._treeOutlines[i].domModel())
 280                 this._treeOutlines[i].selectDOMNode(null);
 281         }
 282
 283         if (!selectedNode && this._lastValidSelectedNode)
 284             this._selectedPathOnReset = this._lastValidSelectedNode.path();
 285
 286         this.updateBreadcrumb(false);
 287
 288         this._updateSidebars();
 289
 290         if (selectedNode) {
 291             ConsoleAgent.addInspectedNode(selectedNode.id);
 292             this._lastValidSelectedNode = selectedNode;
 293         }
 294         WebInspector.notifications.dispatchEventToListeners(WebInspector.NotificationService.Events.SelectedNodeChanged);
 295     },
 296
 297     _updateSidebars: function()
 298     {
 299         for (var pane in this.sidebarPanes)
 300            this.sidebarPanes[pane].needsUpdate = true;
 301
 302         this.updateStyles(true);
 303         this.updateMetrics();
 304         this.updatePlatformFonts();
 305         this.updateProperties();
 306         this.updateEventListeners();
 307     },
 308
 309     _reset: function()
 310     {
 311         delete this.currentQuery;
 312     },
 313
 314     /**
 315      * @param {!WebInspector.Event} event
 316      */
 317     _documentUpdatedEvent: function(event)
 318     {
 319         this._documentUpdated(/** @type {!WebInspector.DOMModel} */ (event.target), /** @type {?WebInspector.DOMDocument} */ (event.data));
 320     },
 321
 322     /**
 323      * @param {!WebInspector.DOMModel} domModel
 324      * @param {?WebInspector.DOMDocument} inspectedRootDocument
 325      */
 326     _documentUpdated: function(domModel, inspectedRootDocument)
 327     {
 328         this._reset();
 329         this.searchCanceled();
 330
 331         var treeOutline = this._targetToTreeOutline.get(domModel.target());
 332         treeOutline.rootDOMNode = inspectedRootDocument;
 333
 334         if (!inspectedRootDocument) {
 335             if (this.isShowing())
 336                 domModel.requestDocument();
 337             return;
 338         }
 339
 340         WebInspector.domBreakpointsSidebarPane.restoreBreakpoints(domModel.target());
 341
 342         /**
 343          * @this {WebInspector.ElementsPanel}
 344          * @param {?WebInspector.DOMNode} candidateFocusNode
 345          */
 346         function selectNode(candidateFocusNode)
 347         {
 348             if (!candidateFocusNode)
 349                 candidateFocusNode = inspectedRootDocument.body || inspectedRootDocument.documentElement;
 350
 351             if (!candidateFocusNode)
 352                 return;
 353
 354             this.selectDOMNode(candidateFocusNode);
 355             if (treeOutline.selectedTreeElement)
 356                 treeOutline.selectedTreeElement.expand();
 357         }
 358
 359         /**
 360          * @param {?DOMAgent.NodeId} nodeId
 361          * @this {WebInspector.ElementsPanel}
 362          */
 363         function selectLastSelectedNode(nodeId)
 364         {
 365             if (this.selectedDOMNode()) {
 366                 // Focused node has been explicitly set while reaching out for the last selected node.
 367                 return;
 368             }
 369             var node = nodeId ? domModel.nodeForId(nodeId) : null;
 370             selectNode.call(this, node);
 371         }
 372
 373         if (this._omitDefaultSelection)
 374             return;
 375
 376         if (this._selectedPathOnReset)
 377             domModel.pushNodeByPathToFrontend(this._selectedPathOnReset, selectLastSelectedNode.bind(this));
 378         else
 379             selectNode.call(this, null);
 380         delete this._selectedPathOnReset;
 381     },
 382
 383     searchCanceled: function()
 384     {
 385         delete this._searchQuery;
 386         this._hideSearchHighlights();
 387
 388         this._searchableView.updateSearchMatchesCount(0);
 389
 390         delete this._currentSearchResultIndex;
 391         delete this._searchResults;
 392         WebInspector.domModel.cancelSearch();
 393     },
 394
 395     /**
 396      * @param {string} query
 397      * @param {boolean} shouldJump
 398      * @param {boolean=} jumpBackwards
 399      */
 400     performSearch: function(query, shouldJump, jumpBackwards)
 401     {
 402         // Call searchCanceled since it will reset everything we need before doing a new search.
 403         this.searchCanceled();
 404
 405         const whitespaceTrimmedQuery = query.trim();
 406         if (!whitespaceTrimmedQuery.length)
 407             return;
 408
 409         this._searchQuery = query;
 410
 411         /**
 412          * @param {number} resultCount
 413          * @this {WebInspector.ElementsPanel}
 414          */
 415         function resultCountCallback(resultCount)
 416         {
 417             this._searchableView.updateSearchMatchesCount(resultCount);
 418             if (!resultCount)
 419                 return;
 420
 421             this._currentSearchResultIndex = -1;
 422             this._searchResults = new Array(resultCount);
 423             if (shouldJump)
 424                 this._jumpToSearchResult(jumpBackwards ? -1 : 0);
 425         }
 426         WebInspector.domModel.performSearch(whitespaceTrimmedQuery, resultCountCallback.bind(this));
 427     },
 428
 429     _contextMenuEventFired: function(event)
 430     {
 431         var contextMenu = new WebInspector.ContextMenu(event);
 432         for (var i = 0; i < this._treeOutlines.length; ++i)
 433             this._treeOutlines[i].populateContextMenu(contextMenu, event);
 434         contextMenu.show();
 435     },
 436
 437     _domWordWrapSettingChanged: function(event)
 438     {
 439         if (event.data)
 440             this.contentElement.classList.remove("nowrap");
 441         else
 442             this.contentElement.classList.add("nowrap");
 443
 444         var selectedNode = this.selectedDOMNode();
 445         if (!selectedNode)
 446             return;
 447
 448         var treeOutline = this._targetToTreeOutline.get(selectedNode.target());
 449         var treeElement = treeOutline.findTreeElement(selectedNode);
 450         if (treeElement)
 451             treeElement.updateSelection(); // Recalculate selection highlight dimensions.
 452     },
 453
 454     switchToAndFocus: function(node)
 455     {
 456         // Reset search restore.
 457         this._searchableView.cancelSearch();
 458         WebInspector.inspectorView.setCurrentPanel(this);
 459         this.selectDOMNode(node, true);
 460     },
 461
 462     _populateContextMenu: function(contextMenu, node)
 463     {
 464         // Add debbuging-related actions
 465         contextMenu.appendSeparator();
 466         var pane = WebInspector.domBreakpointsSidebarPane;
 467         pane.populateNodeContextMenu(node, contextMenu);
 468     },
 469
 470     _getPopoverAnchor: function(element)
 471     {
 472         var anchor = element.enclosingNodeOrSelfWithClass("webkit-html-resource-link");
 473         if (!anchor || !anchor.href)
 474             return null;
 475
 476         var treeOutlineElement = anchor.enclosingNodeOrSelfWithClass("elements-tree-outline");
 477         if (!treeOutlineElement)
 478             return null;
 479
 480         for (var i = 0; i < this._treeOutlines.length; ++i) {
 481             if (this._treeOutlines[i].element !== treeOutlineElement)
 482                 continue;
 483
 484             var resource = this._treeOutlines[i].target().resourceTreeModel.resourceForURL(anchor.href);
 485             if (!resource || resource.type !== WebInspector.resourceTypes.Image)
 486                 return null;
 487             anchor.removeAttribute("title");
 488             return anchor;
 489         }
 490         return null;
 491     },
 492
 493     /**
 494      * @param {!WebInspector.DOMNode} node
 495      */
 496     _loadDimensionsForNode: function(node, callback)
 497     {
 498         if (!node.nodeName() || node.nodeName().toLowerCase() !== "img") {
 499             callback();
 500             return;
 501         }
 502
 503         node.resolveToObject("", resolvedNode);
 504
 505         function resolvedNode(object)
 506         {
 507             if (!object) {
 508                 callback();
 509                 return;
 510             }
 511
 512             object.callFunctionJSON(dimensions, undefined, callback);
 513             object.release();
 514
 515             /**
 516              * @return {!{offsetWidth: number, offsetHeight: number, naturalWidth: number, naturalHeight: number}}
 517              * @suppressReceiverCheck
 518              * @this {!Element}
 519              */
 520             function dimensions()
 521             {
 522                 return { offsetWidth: this.offsetWidth, offsetHeight: this.offsetHeight, naturalWidth: this.naturalWidth, naturalHeight: this.naturalHeight };
 523             }
 524         }
 525     },
 526
 527     /**
 528      * @param {!Element} anchor
 529      * @param {!WebInspector.Popover} popover
 530      */
 531     _showPopover: function(anchor, popover)
 532     {
 533         var listItem = anchor.enclosingNodeOrSelfWithNodeName("li");
 534         // We get here for CSS properties, too.
 535         if (listItem && listItem.treeElement && listItem.treeElement.treeOutline instanceof WebInspector.ElementsTreeOutline) {
 536             var node = /** @type {!WebInspector.DOMNode} */ (listItem.treeElement.representedObject);
 537             this._loadDimensionsForNode(node, WebInspector.DOMPresentationUtils.buildImagePreviewContents.bind(WebInspector.DOMPresentationUtils, node.target(), anchor.href, true, showPopover));
 538         } else {
 539             var node = this.selectedDOMNode();
 540             if (node)
 541                 WebInspector.DOMPresentationUtils.buildImagePreviewContents(node.target(), anchor.href, true, showPopover);
 542         }
 543
 544         /**
 545          * @param {!Element=} contents
 546          */
 547         function showPopover(contents)
 548         {
 549             if (!contents)
 550                 return;
 551             popover.setCanShrink(false);
 552             popover.show(contents, anchor);
 553         }
 554     },
 555
 556     _jumpToSearchResult: function(index)
 557     {
 558         this._hideSearchHighlights();
 559         this._currentSearchResultIndex = (index + this._searchResults.length) % this._searchResults.length;
 560         this._highlightCurrentSearchResult();
 561     },
 562
 563     jumpToNextSearchResult: function()
 564     {
 565         if (!this._searchResults)
 566             return;
 567         this._jumpToSearchResult(this._currentSearchResultIndex + 1);
 568     },
 569
 570     jumpToPreviousSearchResult: function()
 571     {
 572         if (!this._searchResults)
 573             return;
 574         this._jumpToSearchResult(this._currentSearchResultIndex - 1);
 575     },
 576
 577     _highlightCurrentSearchResult: function()
 578     {
 579         var treeOutline = this._firstTreeOutlineDeprecated();
 580         if (!treeOutline)
 581             return;
 582
 583         var index = this._currentSearchResultIndex;
 584         var searchResults = this._searchResults;
 585         var searchResult = searchResults[index];
 586
 587         if (searchResult === null) {
 588             this._searchableView.updateCurrentMatchIndex(index);
 589             return;
 590         }
 591
 592         /**
 593          * @param {?WebInspector.DOMNode} node
 594          * @this {WebInspector.ElementsPanel}
 595          */
 596         function searchCallback(node)
 597         {
 598             searchResults[index] = node;
 599             this._highlightCurrentSearchResult();
 600         }
 601
 602         if (typeof searchResult === "undefined") {
 603             // No data for slot, request it.
 604             WebInspector.domModel.searchResult(index, searchCallback.bind(this));
 605             return;
 606         }
 607
 608         this._searchableView.updateCurrentMatchIndex(index);
 609
 610         var treeElement = treeOutline.findTreeElement(searchResult);
 611         if (treeElement) {
 612             treeElement.highlightSearchResults(this._searchQuery);
 613             treeElement.reveal();
 614             var matches = treeElement.listItemElement.getElementsByClassName("highlighted-search-result");
 615             if (matches.length)
 616                 matches[0].scrollIntoViewIfNeeded();
 617         }
 618     },
 619
 620     _hideSearchHighlights: function()
 621     {
 622         if (!this._searchResults)
 623             return;
 624         var searchResult = this._searchResults[this._currentSearchResultIndex];
 625         if (!searchResult)
 626             return;
 627         var treeOutline = this._targetToTreeOutline.get(searchResult.target());
 628         var treeElement = treeOutline.findTreeElement(searchResult);
 629         if (treeElement)
 630             treeElement.hideSearchHighlights();
 631     },
 632
 633     /**
 634      * @return {?WebInspector.DOMNode}
 635      */
 636     selectedDOMNode: function()
 637     {
 638         for (var i = 0; i < this._treeOutlines.length; ++i) {
 639             var treeOutline = this._treeOutlines[i];
 640             if (treeOutline.selectedDOMNode())
 641                 return treeOutline.selectedDOMNode();
 642         }
 643         return null;
 644     },
 645
 646     /**
 647      * @param {boolean=} focus
 648      */
 649     selectDOMNode: function(node, focus)
 650     {
 651         for (var i = 0; i < this._treeOutlines.length; ++i) {
 652             var treeOutline = this._treeOutlines[i];
 653             if (treeOutline.target() === node.target())
 654                 treeOutline.selectDOMNode(node, focus);
 655             else
 656                 treeOutline.selectDOMNode(null);
 657         }
 658     },
 659
 660     /**
 661      * @param {!WebInspector.Event} event
 662      */
 663     _updateBreadcrumbIfNeeded: function(event)
 664     {
 665         var nodes = /** @type {!Array.<!WebInspector.DOMNode>} */ (event.data || []);
 666         if (!nodes.length)
 667             return;
 668
 669         var crumbs = this.crumbsElement;
 670         for (var crumb = crumbs.firstChild; crumb; crumb = crumb.nextSibling) {
 671             if (nodes.indexOf(crumb.representedObject) !== -1) {
 672                 this.updateBreadcrumb(true);
 673                 return;
 674             }
 675         }
 676     },
 677
 678     _stylesPaneEdited: function()
 679     {
 680         // Once styles are edited, the Metrics pane should be updated.
 681         this.sidebarPanes.metrics.needsUpdate = true;
 682         this.updateMetrics();
 683         this.sidebarPanes.platformFonts.needsUpdate = true;
 684         this.updatePlatformFonts();
 685     },
 686
 687     _metricsPaneEdited: function()
 688     {
 689         // Once metrics are edited, the Styles pane should be updated.
 690         this.sidebarPanes.styles.needsUpdate = true;
 691         this.updateStyles(true);
 692     },
 693
 694     _mouseMovedInCrumbs: function(event)
 695     {
 696         var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
 697         var crumbElement = nodeUnderMouse.enclosingNodeOrSelfWithClass("crumb");
 698         var node = /** @type {?WebInspector.DOMNode} */ (crumbElement ? crumbElement.representedObject : null);
 699         if (node)
 700             node.highlight();
 701     },
 702
 703     _mouseMovedOutOfCrumbs: function(event)
 704     {
 705         var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
 706         if (nodeUnderMouse && nodeUnderMouse.isDescendant(this.crumbsElement))
 707             return;
 708
 709         for (var i = 0; i < this._treeOutlines.length; ++i)
 710             this._treeOutlines[i].domModel().hideDOMNodeHighlight();
 711     },
 712
 713     /**
 714      * @param {boolean=} forceUpdate
 715      */
 716     updateBreadcrumb: function(forceUpdate)
 717     {
 718         if (!this.isShowing())
 719             return;
 720
 721         var crumbs = this.crumbsElement;
 722
 723         var handled = false;
 724         var crumb = crumbs.firstChild;
 725         while (crumb) {
 726             if (crumb.representedObject === this.selectedDOMNode()) {
 727                 crumb.classList.add("selected");
 728                 handled = true;
 729             } else {
 730                 crumb.classList.remove("selected");
 731             }
 732
 733             crumb = crumb.nextSibling;
 734         }
 735
 736         if (handled && !forceUpdate) {
 737             // We don't need to rebuild the crumbs, but we need to adjust sizes
 738             // to reflect the new focused or root node.
 739             this.updateBreadcrumbSizes();
 740             return;
 741         }
 742
 743         crumbs.removeChildren();
 744
 745         var panel = this;
 746
 747         function selectCrumbFunction(event)
 748         {
 749             var crumb = event.currentTarget;
 750             if (crumb.classList.contains("collapsed")) {
 751                 // Clicking a collapsed crumb will expose the hidden crumbs.
 752                 if (crumb === panel.crumbsElement.firstChild) {
 753                     // If the focused crumb is the first child, pick the farthest crumb
 754                     // that is still hidden. This allows the user to expose every crumb.
 755                     var currentCrumb = crumb;
 756                     while (currentCrumb) {
 757                         var hidden = currentCrumb.classList.contains("hidden");
 758                         var collapsed = currentCrumb.classList.contains("collapsed");
 759                         if (!hidden && !collapsed)
 760                             break;
 761                         crumb = currentCrumb;
 762                         currentCrumb = currentCrumb.nextSibling;
 763                     }
 764                 }
 765
 766                 panel.updateBreadcrumbSizes(crumb);
 767             } else
 768                 panel.selectDOMNode(crumb.representedObject, true);
 769
 770             event.preventDefault();
 771         }
 772
 773         for (var current = this.selectedDOMNode(); current; current = current.parentNode) {
 774             if (current.nodeType() === Node.DOCUMENT_NODE)
 775                 continue;
 776
 777             crumb = document.createElement("span");
 778             crumb.className = "crumb";
 779             crumb.representedObject = current;
 780             crumb.addEventListener("mousedown", selectCrumbFunction, false);
 781
 782             var crumbTitle = "";
 783             switch (current.nodeType()) {
 784                 case Node.ELEMENT_NODE:
 785                     if (current.pseudoType())
 786                         crumbTitle = "::" + current.pseudoType();
 787                     else
 788                         WebInspector.DOMPresentationUtils.decorateNodeLabel(current, crumb);
 789                     break;
 790
 791                 case Node.TEXT_NODE:
 792                     crumbTitle = WebInspector.UIString("(text)");
 793                     break;
 794
 795                 case Node.COMMENT_NODE:
 796                     crumbTitle = "<!-->";
 797                     break;
 798
 799                 case Node.DOCUMENT_TYPE_NODE:
 800                     crumbTitle = "<!DOCTYPE>";
 801                     break;
 802
 803                 case Node.DOCUMENT_FRAGMENT_NODE:
 804                   crumbTitle = current.shadowRootType() ? "#shadow-root" : current.nodeNameInCorrectCase();
 805                   break;
 806
 807                 default:
 808                     crumbTitle = current.nodeNameInCorrectCase();
 809             }
 810
 811             if (!crumb.childNodes.length) {
 812                 var nameElement = document.createElement("span");
 813                 nameElement.textContent = crumbTitle;
 814                 crumb.appendChild(nameElement);
 815                 crumb.title = crumbTitle;
 816             }
 817
 818             if (current === this.selectedDOMNode())
 819                 crumb.classList.add("selected");
 820             crumbs.insertBefore(crumb, crumbs.firstChild);
 821         }
 822
 823         this.updateBreadcrumbSizes();
 824     },
 825
 826     /**
 827      * @param {!Element=} focusedCrumb
 828      */
 829     updateBreadcrumbSizes: function(focusedCrumb)
 830     {
 831         if (!this.isShowing())
 832             return;
 833
 834         var crumbs = this.crumbsElement;
 835         if (!crumbs.firstChild)
 836             return;
 837
 838         var selectedIndex = 0;
 839         var focusedIndex = 0;
 840         var selectedCrumb;
 841
 842         // Reset crumb styles.
 843         for (var i = 0; i < crumbs.childNodes.length; ++i) {
 844             var crumb = crumbs.childNodes[i];
 845             // Find the selected crumb and index.
 846             if (!selectedCrumb && crumb.classList.contains("selected")) {
 847                 selectedCrumb = crumb;
 848                 selectedIndex = i;
 849             }
 850
 851             // Find the focused crumb index.
 852             if (crumb === focusedCrumb)
 853                 focusedIndex = i;
 854
 855             crumb.classList.remove("compact", "collapsed", "hidden");
 856         }
 857
 858         // Layout 1: Measure total and normal crumb sizes
 859         var contentElementWidth = this.contentElement.offsetWidth;
 860         var normalSizes = [];
 861         for (var i = 0; i < crumbs.childNodes.length; ++i) {
 862             var crumb = crumbs.childNodes[i];
 863             normalSizes[i] = crumb.offsetWidth;
 864         }
 865
 866         // Layout 2: Measure collapsed crumb sizes
 867         var compactSizes = [];
 868         for (var i = 0; i < crumbs.childNodes.length; ++i) {
 869             var crumb = crumbs.childNodes[i];
 870             crumb.classList.add("compact");
 871         }
 872         for (var i = 0; i < crumbs.childNodes.length; ++i) {
 873             var crumb = crumbs.childNodes[i];
 874             compactSizes[i] = crumb.offsetWidth;
 875         }
 876
 877         // Layout 3: Measure collapsed crumb size
 878         crumbs.firstChild.classList.add("collapsed");
 879         var collapsedSize = crumbs.firstChild.offsetWidth;
 880
 881         // Clean up.
 882         for (var i = 0; i < crumbs.childNodes.length; ++i) {
 883             var crumb = crumbs.childNodes[i];
 884             crumb.classList.remove("compact", "collapsed");
 885         }
 886
 887         function crumbsAreSmallerThanContainer()
 888         {
 889             var totalSize = 0;
 890             for (var i = 0; i < crumbs.childNodes.length; ++i) {
 891                 var crumb = crumbs.childNodes[i];
 892                 if (crumb.classList.contains("hidden"))
 893                     continue;
 894                 if (crumb.classList.contains("collapsed")) {
 895                     totalSize += collapsedSize;
 896                     continue;
 897                 }
 898                 totalSize += crumb.classList.contains("compact") ? compactSizes[i] : normalSizes[i];
 899             }
 900             const rightPadding = 10;
 901             return totalSize + rightPadding < contentElementWidth;
 902         }
 903
 904         if (crumbsAreSmallerThanContainer())
 905             return; // No need to compact the crumbs, they all fit at full size.
 906
 907         var BothSides = 0;
 908         var AncestorSide = -1;
 909         var ChildSide = 1;
 910
 911         /**
 912          * @param {function(!Element)} shrinkingFunction
 913          * @param {number} direction
 914          */
 915         function makeCrumbsSmaller(shrinkingFunction, direction)
 916         {
 917             var significantCrumb = focusedCrumb || selectedCrumb;
 918             var significantIndex = significantCrumb === selectedCrumb ? selectedIndex : focusedIndex;
 919
 920             function shrinkCrumbAtIndex(index)
 921             {
 922                 var shrinkCrumb = crumbs.childNodes[index];
 923                 if (shrinkCrumb && shrinkCrumb !== significantCrumb)
 924                     shrinkingFunction(shrinkCrumb);
 925                 if (crumbsAreSmallerThanContainer())
 926                     return true; // No need to compact the crumbs more.
 927                 return false;
 928             }
 929
 930             // Shrink crumbs one at a time by applying the shrinkingFunction until the crumbs
 931             // fit in the container or we run out of crumbs to shrink.
 932             if (direction) {
 933                 // Crumbs are shrunk on only one side (based on direction) of the signifcant crumb.
 934                 var index = (direction > 0 ? 0 : crumbs.childNodes.length - 1);
 935                 while (index !== significantIndex) {
 936                     if (shrinkCrumbAtIndex(index))
 937                         return true;
 938                     index += (direction > 0 ? 1 : -1);
 939                 }
 940             } else {
 941                 // Crumbs are shrunk in order of descending distance from the signifcant crumb,
 942                 // with a tie going to child crumbs.
 943                 var startIndex = 0;
 944                 var endIndex = crumbs.childNodes.length - 1;
 945                 while (startIndex != significantIndex || endIndex != significantIndex) {
 946                     var startDistance = significantIndex - startIndex;
 947                     var endDistance = endIndex - significantIndex;
 948                     if (startDistance >= endDistance)
 949                         var index = startIndex++;
 950                     else
 951                         var index = endIndex--;
 952                     if (shrinkCrumbAtIndex(index))
 953                         return true;
 954                 }
 955             }
 956
 957             // We are not small enough yet, return false so the caller knows.
 958             return false;
 959         }
 960
 961         function coalesceCollapsedCrumbs()
 962         {
 963             var crumb = crumbs.firstChild;
 964             var collapsedRun = false;
 965             var newStartNeeded = false;
 966             var newEndNeeded = false;
 967             while (crumb) {
 968                 var hidden = crumb.classList.contains("hidden");
 969                 if (!hidden) {
 970                     var collapsed = crumb.classList.contains("collapsed");
 971                     if (collapsedRun && collapsed) {
 972                         crumb.classList.add("hidden");
 973                         crumb.classList.remove("compact");
 974                         crumb.classList.remove("collapsed");
 975
 976                         if (crumb.classList.contains("start")) {
 977                             crumb.classList.remove("start");
 978                             newStartNeeded = true;
 979                         }
 980
 981                         if (crumb.classList.contains("end")) {
 982                             crumb.classList.remove("end");
 983                             newEndNeeded = true;
 984                         }
 985
 986                         continue;
 987                     }
 988
 989                     collapsedRun = collapsed;
 990
 991                     if (newEndNeeded) {
 992                         newEndNeeded = false;
 993                         crumb.classList.add("end");
 994                     }
 995                 } else
 996                     collapsedRun = true;
 997                 crumb = crumb.nextSibling;
 998             }
 999
1000             if (newStartNeeded) {
1001                 crumb = crumbs.lastChild;
1002                 while (crumb) {
1003                     if (!crumb.classList.contains("hidden")) {
1004                         crumb.classList.add("start");
1005                         break;
1006                     }
1007                     crumb = crumb.previousSibling;
1008                 }
1009             }
1010         }
1011
1012         /**
1013          * @param {!Element} crumb
1014          */
1015         function compact(crumb)
1016         {
1017             if (crumb.classList.contains("hidden"))
1018                 return;
1019             crumb.classList.add("compact");
1020         }
1021
1022         /**
1023          * @param {!Element} crumb
1024          * @param {boolean=} dontCoalesce
1025          */
1026         function collapse(crumb, dontCoalesce)
1027         {
1028             if (crumb.classList.contains("hidden"))
1029                 return;
1030             crumb.classList.add("collapsed");
1031             crumb.classList.remove("compact");
1032             if (!dontCoalesce)
1033                 coalesceCollapsedCrumbs();
1034         }
1035
1036         if (!focusedCrumb) {
1037             // When not focused on a crumb we can be biased and collapse less important
1038             // crumbs that the user might not care much about.
1039
1040             // Compact child crumbs.
1041             if (makeCrumbsSmaller(compact, ChildSide))
1042                 return;
1043
1044             // Collapse child crumbs.
1045             if (makeCrumbsSmaller(collapse, ChildSide))
1046                 return;
1047         }
1048
1049         // Compact ancestor crumbs, or from both sides if focused.
1050         if (makeCrumbsSmaller(compact, focusedCrumb ? BothSides : AncestorSide))
1051             return;
1052
1053         // Collapse ancestor crumbs, or from both sides if focused.
1054         if (makeCrumbsSmaller(collapse, focusedCrumb ? BothSides : AncestorSide))
1055             return;
1056
1057         if (!selectedCrumb)
1058             return;
1059
1060         // Compact the selected crumb.
1061         compact(selectedCrumb);
1062         if (crumbsAreSmallerThanContainer())
1063             return;
1064
1065         // Collapse the selected crumb as a last resort. Pass true to prevent coalescing.
1066         collapse(selectedCrumb, true);
1067     },
1068
1069     /**
1070      * @return {boolean}
1071      */
1072     _cssModelEnabledForSelectedNode: function()
1073     {
1074         if (!this.selectedDOMNode())
1075             return true;
1076         return this.selectedDOMNode().target().cssModel.isEnabled();
1077     },
1078
1079     /**
1080      * @param {boolean=} forceUpdate
1081      */
1082     updateStyles: function(forceUpdate)
1083     {
1084         if (!this._cssModelEnabledForSelectedNode())
1085             return;
1086         var stylesSidebarPane = this.sidebarPanes.styles;
1087         var computedStylePane = this.sidebarPanes.computedStyle;
1088         if ((!stylesSidebarPane.isShowing() && !computedStylePane.isShowing()) || !stylesSidebarPane.needsUpdate)
1089             return;
1090
1091         stylesSidebarPane.update(this.selectedDOMNode(), forceUpdate);
1092         stylesSidebarPane.needsUpdate = false;
1093     },
1094
1095     updateMetrics: function()
1096     {
1097         if (!this._cssModelEnabledForSelectedNode())
1098             return;
1099         var metricsSidebarPane = this.sidebarPanes.metrics;
1100         if (!metricsSidebarPane.isShowing() || !metricsSidebarPane.needsUpdate)
1101             return;
1102
1103         metricsSidebarPane.update(this.selectedDOMNode());
1104         metricsSidebarPane.needsUpdate = false;
1105     },
1106
1107     updatePlatformFonts: function()
1108     {
1109         if (!this._cssModelEnabledForSelectedNode())
1110             return;
1111         var platformFontsSidebar = this.sidebarPanes.platformFonts;
1112         if (!platformFontsSidebar.isShowing() || !platformFontsSidebar.needsUpdate)
1113             return;
1114
1115         platformFontsSidebar.update(this.selectedDOMNode());
1116         platformFontsSidebar.needsUpdate = false;
1117     },
1118
1119     updateProperties: function()
1120     {
1121         var propertiesSidebarPane = this.sidebarPanes.properties;
1122         if (!propertiesSidebarPane.isShowing() || !propertiesSidebarPane.needsUpdate)
1123             return;
1124
1125         propertiesSidebarPane.update(this.selectedDOMNode());
1126         propertiesSidebarPane.needsUpdate = false;
1127     },
1128
1129     updateEventListeners: function()
1130     {
1131         var eventListenersSidebarPane = this.sidebarPanes.eventListeners;
1132         if (!eventListenersSidebarPane.isShowing() || !eventListenersSidebarPane.needsUpdate)
1133             return;
1134
1135         eventListenersSidebarPane.update(this.selectedDOMNode());
1136         eventListenersSidebarPane.needsUpdate = false;
1137     },
1138
1139     /**
1140      * @param {!KeyboardEvent} event
1141      */
1142     handleShortcut: function(event)
1143     {
1144         /**
1145          * @this {WebInspector.ElementsPanel}
1146          */
1147         function handleUndoRedo()
1148         {
1149             if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && !event.shiftKey && event.keyIdentifier === "U+005A") { // Z key
1150                 WebInspector.domModel.undo(this._updateSidebars.bind(this));
1151                 event.handled = true;
1152                 return;
1153             }
1154
1155             var isRedoKey = WebInspector.isMac() ? event.metaKey && event.shiftKey && event.keyIdentifier === "U+005A" : // Z key
1156                                                    event.ctrlKey && event.keyIdentifier === "U+0059"; // Y key
1157             if (isRedoKey) {
1158                 WebInspector.domModel.redo(this._updateSidebars.bind(this));
1159                 event.handled = true;
1160             }
1161         }
1162
1163         var treeOutline = this._firstTreeOutlineDeprecated();
1164         if (!treeOutline)
1165             return;
1166
1167         if (!treeOutline.editing()) {
1168             handleUndoRedo.call(this);
1169             if (event.handled)
1170                 return;
1171         }
1172
1173         treeOutline.handleShortcut(event);
1174     },
1175
1176     handleCopyEvent: function(event)
1177     {
1178         var currentFocusElement = WebInspector.currentFocusElement();
1179         if (currentFocusElement && WebInspector.isBeingEdited(currentFocusElement))
1180             return;
1181
1182         // Don't prevent the normal copy if the user has a selection.
1183         if (!window.getSelection().isCollapsed)
1184             return;
1185         event.clipboardData.clearData();
1186         event.preventDefault();
1187         this.selectedDOMNode().copyNode();
1188     },
1189
1190     /**
1191      * @param {!WebInspector.DOMNode} node
1192      * @return {!WebInspector.DOMNode}
1193      */
1194     _leaveUserAgentShadowDOM: function(node)
1195     {
1196         var userAgentShadowRoot = node.ancestorUserAgentShadowRoot();
1197         return userAgentShadowRoot ? /** @type {!WebInspector.DOMNode} */ (userAgentShadowRoot.parentNode) : node;
1198     },
1199
1200     /**
1201      * @param {!WebInspector.DOMNode} node
1202      */
1203     revealAndSelectNode: function(node)
1204     {
1205         WebInspector.inspectorView.setCurrentPanel(this);
1206         node = WebInspector.settings.showUAShadowDOM.get() ? node : this._leaveUserAgentShadowDOM(node);
1207         node.highlightForTwoSeconds();
1208         this.selectDOMNode(node, true);
1209     },
1210
1211     /**
1212      * @param {!WebInspector.ContextMenu} contextMenu
1213      * @param {!Object} object
1214      */
1215     appendApplicableItems: function(event, contextMenu, object)
1216     {
1217         var commandCallback;
1218         if (object instanceof WebInspector.RemoteObject) {
1219             var remoteObject = /** @type {!WebInspector.RemoteObject} */ (object);
1220             if (remoteObject.isNode())
1221                 commandCallback = remoteObject.reveal.bind(remoteObject);
1222         } else if (object instanceof WebInspector.DOMNode) {
1223             var domNode = /** @type {!WebInspector.DOMNode} */ (object);
1224             commandCallback = domNode.reveal.bind(domNode);
1225         }
1226         if (!commandCallback)
1227             return;
1228         // Skip adding "Reveal..." menu item for our own tree outline.
1229         if (this.element.isAncestor(event.target))
1230             return;
1231         contextMenu.appendItem(WebInspector.useLowerCaseMenuTitles() ? "Reveal in Elements panel" : "Reveal in Elements Panel", commandCallback);
1232     },
1233
1234     _sidebarContextMenuEventFired: function(event)
1235     {
1236         var contextMenu = new WebInspector.ContextMenu(event);
1237         contextMenu.show();
1238     },
1239
1240     _dockSideChanged: function()
1241     {
1242         var vertically = WebInspector.dockController.isVertical() && WebInspector.settings.splitVerticallyWhenDockedToRight.get();
1243         this._splitVertically(vertically);
1244     },
1245
1246     _showUAShadowDOMChanged: function()
1247     {
1248         for (var i = 0; i < this._treeOutlines.length; ++i)
1249             this._treeOutlines[i].update();
1250     },
1251
1252     /**
1253      * @param {boolean} vertically
1254      */
1255     _splitVertically: function(vertically)
1256     {
1257         if (this.sidebarPaneView && vertically === !this._splitView.isVertical())
1258             return;
1259
1260         if (this.sidebarPaneView) {
1261             this.sidebarPaneView.detach();
1262             this._splitView.uninstallResizer(this.sidebarPaneView.headerElement());
1263         }
1264
1265         this._splitView.setVertical(!vertically);
1266
1267         var computedPane = new WebInspector.SidebarPane(WebInspector.UIString("Computed"));
1268         computedPane.element.classList.add("composite");
1269         computedPane.element.classList.add("fill");
1270         var expandComputed = computedPane.expand.bind(computedPane);
1271
1272         computedPane.bodyElement.classList.add("metrics-and-computed");
1273         this.sidebarPanes.computedStyle.setExpandCallback(expandComputed);
1274
1275         var matchedStylePanesWrapper = document.createElement("div");
1276         matchedStylePanesWrapper.className = "style-panes-wrapper";
1277         var computedStylePanesWrapper = document.createElement("div");
1278         computedStylePanesWrapper.className = "style-panes-wrapper";
1279
1280         /**
1281          * @param {boolean} inComputedStyle
1282          * @this {WebInspector.ElementsPanel}
1283          */
1284         function showMetrics(inComputedStyle)
1285         {
1286             if (inComputedStyle)
1287                 this.sidebarPanes.metrics.show(computedStylePanesWrapper, this.sidebarPanes.computedStyle.element);
1288             else
1289                 this.sidebarPanes.metrics.show(matchedStylePanesWrapper);
1290         }
1291
1292         /**
1293          * @param {!WebInspector.Event} event
1294          * @this {WebInspector.ElementsPanel}
1295          */
1296         function tabSelected(event)
1297         {
1298             var tabId = /** @type {string} */ (event.data.tabId);
1299             if (tabId === computedPane.title())
1300                 showMetrics.call(this, true);
1301             else if (tabId === stylesPane.title())
1302                 showMetrics.call(this, false);
1303         }
1304
1305         this.sidebarPaneView = new WebInspector.SidebarTabbedPane();
1306
1307         if (vertically) {
1308             this._splitView.installResizer(this.sidebarPaneView.headerElement());
1309             this.sidebarPanes.metrics.setExpandCallback(expandComputed);
1310
1311             var compositePane = new WebInspector.SidebarPane(this.sidebarPanes.styles.title());
1312             compositePane.element.classList.add("composite");
1313             compositePane.element.classList.add("fill");
1314             var expandComposite = compositePane.expand.bind(compositePane);
1315
1316             var splitView = new WebInspector.SplitView(true, true, "stylesPaneSplitViewState", 0.5);
1317             splitView.show(compositePane.bodyElement);
1318
1319             splitView.mainElement().appendChild(matchedStylePanesWrapper);
1320             splitView.sidebarElement().appendChild(computedStylePanesWrapper);
1321
1322             this.sidebarPanes.styles.setExpandCallback(expandComposite);
1323
1324             computedPane.show(computedStylePanesWrapper);
1325             computedPane.setExpandCallback(expandComposite);
1326
1327             splitView.mainElement().appendChild(this._matchedStylesFilterBoxContainer);
1328             splitView.sidebarElement().appendChild(this._computedStylesFilterBoxContainer);
1329
1330             this.sidebarPaneView.addPane(compositePane);
1331         } else {
1332             var stylesPane = new WebInspector.SidebarPane(this.sidebarPanes.styles.title());
1333             stylesPane.element.classList.add("composite");
1334             stylesPane.element.classList.add("fill");
1335             var expandStyles = stylesPane.expand.bind(stylesPane);
1336             stylesPane.bodyElement.classList.add("metrics-and-styles");
1337
1338             stylesPane.bodyElement.appendChild(matchedStylePanesWrapper);
1339             computedPane.bodyElement.appendChild(computedStylePanesWrapper);
1340
1341             this.sidebarPanes.styles.setExpandCallback(expandStyles);
1342             this.sidebarPanes.metrics.setExpandCallback(expandStyles);
1343
1344             this.sidebarPaneView.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, tabSelected, this);
1345
1346             stylesPane.bodyElement.appendChild(this._matchedStylesFilterBoxContainer);
1347             computedPane.bodyElement.appendChild(this._computedStylesFilterBoxContainer);
1348
1349             this.sidebarPaneView.addPane(stylesPane);
1350             this.sidebarPaneView.addPane(computedPane);
1351         }
1352
1353         this.sidebarPanes.styles.show(matchedStylePanesWrapper);
1354         this.sidebarPanes.computedStyle.show(computedStylePanesWrapper);
1355         matchedStylePanesWrapper.appendChild(this.sidebarPanes.styles.titleElement);
1356         showMetrics.call(this, vertically);
1357         this.sidebarPanes.platformFonts.show(computedStylePanesWrapper);
1358
1359         this.sidebarPaneView.addPane(this.sidebarPanes.eventListeners);
1360         this.sidebarPaneView.addPane(this.sidebarPanes.domBreakpoints);
1361         this.sidebarPaneView.addPane(this.sidebarPanes.properties);
1362         this._extensionSidebarPanesContainer = this.sidebarPaneView;
1363
1364         for (var i = 0; i < this._extensionSidebarPanes.length; ++i)
1365             this._extensionSidebarPanesContainer.addPane(this._extensionSidebarPanes[i]);
1366
1367         this.sidebarPaneView.show(this._splitView.sidebarElement());
1368         this.sidebarPanes.styles.expand();
1369     },
1370
1371     /**
1372      * @param {string} id
1373      * @param {!WebInspector.SidebarPane} pane
1374      */
1375     addExtensionSidebarPane: function(id, pane)
1376     {
1377         this._extensionSidebarPanes.push(pane);
1378         this._extensionSidebarPanesContainer.addPane(pane);
1379     },
1380
1381     __proto__: WebInspector.Panel.prototype
1382 }
1383
1384 /**
1385  * @constructor
1386  * @implements {WebInspector.ContextMenu.Provider}
1387  */
1388 WebInspector.ElementsPanel.ContextMenuProvider = function()
1389 {
1390 }
1391
1392 WebInspector.ElementsPanel.ContextMenuProvider.prototype = {
1393     /**
1394      * @param {!Event} event
1395      * @param {!WebInspector.ContextMenu} contextMenu
1396      * @param {!Object} target
1397      */
1398     appendApplicableItems: function(event, contextMenu, target)
1399     {
1400         /** @type {!WebInspector.ElementsPanel} */ (WebInspector.inspectorView.panel("elements")).appendApplicableItems(event, contextMenu, target);
1401     }
1402 }
1403
1404 /**
1405  * @constructor
1406  * @implements {WebInspector.Revealer}
1407  */
1408 WebInspector.ElementsPanel.DOMNodeRevealer = function()
1409 {
1410 }
1411
1412 WebInspector.ElementsPanel.DOMNodeRevealer.prototype = {
1413     /**
1414      * @param {!Object} node
1415      */
1416     reveal: function(node)
1417     {
1418         if (WebInspector.inspectElementModeController && WebInspector.inspectElementModeController.enabled()) {
1419             InspectorFrontendHost.bringToFront();
1420             WebInspector.inspectElementModeController.disable();
1421         }
1422
1423         /** @type {!WebInspector.ElementsPanel} */ (WebInspector.inspectorView.panel("elements")).revealAndSelectNode(/** @type {!WebInspector.DOMNode} */ (node));
1424     }
1425 }
1426
1427 /**
1428  * @constructor
1429  * @implements {WebInspector.Revealer}
1430  */
1431 WebInspector.ElementsPanel.NodeRemoteObjectRevealer = function()
1432 {
1433 }
1434
1435 WebInspector.ElementsPanel.NodeRemoteObjectRevealer.prototype = {
1436     /**
1437      * @param {!Object} remoteObject
1438      */
1439     reveal: function(remoteObject)
1440     {
1441         revealElement(/** @type {!WebInspector.RemoteObject} */ (remoteObject));
1442
1443         /**
1444          * @param {?WebInspector.RemoteObject} remoteObject
1445          */
1446         function revealElement(remoteObject)
1447         {
1448             if (remoteObject)
1449                 remoteObject.pushNodeToFrontend(selectNode.bind(null, remoteObject));
1450         }
1451
1452         /**
1453          * @param {?WebInspector.RemoteObject} remoteObject
1454          * @param {?WebInspector.DOMNode} node
1455          */
1456         function selectNode(remoteObject, node)
1457         {
1458             if (node) {
1459                 node.reveal();
1460                 return;
1461             }
1462             if (!remoteObject || remoteObject.description !== "#text" || !remoteObject.isNode())
1463                 return;
1464             remoteObject.callFunction(parentElement, undefined, revealElement);
1465         }
1466
1467         /**
1468          * @suppressReceiverCheck
1469          * @this {Element}
1470          */
1471         function parentElement()
1472         {
1473             return this.parentElement;
1474         }
1475     }
1476 }