DevTools: use view locations in the elements and sources sidebars.

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

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 83 matching lines @@
 
 WebInspector.ElementsPanel._elementsSidebarViewTitleSymbol = Symbol("title");
 
 WebInspector.ElementsPanel.prototype = {
     /**
      * @param {!WebInspector.CSSProperty} cssProperty
      */
     _revealProperty: function(cssProperty)
     {
         var stylesSidebarPane = this.sidebarPanes.styles;
-        this.sidebarPaneView.selectTab(WebInspector.UIString("Styles"));
+        this.sidebarPaneView.showView(stylesSidebarPane);
         stylesSidebarPane.revealProperty(/** @type {!WebInspector.CSSProperty} */(cssProperty));
         return Promise.resolve();
     },
 
     /**
      * @param {!WebInspector.StylesSidebarPane} ssp
      * @return {!Element}
      */
     _createStylesSidebarToolbar: function(ssp)
     {
@@ skipping 741 matching lines @@
         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.shouldHideOnDetach())
+        if (this.sidebarPaneView && this.sidebarPaneView.tabbedPane().shouldHideOnDetach())
             return; // We can't reparent extension iframes.
 
-        var selectedTabId = this.sidebarPaneView ? this.sidebarPaneView.selectedTabId : null;
-
         var extensionSidebarPanes = WebInspector.extensionServer.sidebarPanes();
         if (this.sidebarPaneView) {
-            this.sidebarPaneView.detach();
-            this._splitWidget.uninstallResizer(this.sidebarPaneView.headerElement());
+            this.sidebarPaneView.tabbedPane().detach();
+            this._splitWidget.uninstallResizer(this.sidebarPaneView.tabbedPane().headerElement());
         }
 
         this._splitWidget.setVertical(!horizontally);
         this.showToolbarPane(null);
 
-        var computedPane = new WebInspector.View(WebInspector.UIString("Computed"));
+        var computedPane = new WebInspector.SimpleView(WebInspector.UIString("Computed"));
         computedPane.element.classList.add("composite");
         computedPane.element.classList.add("fill");
         computedPane.element.classList.add("metrics-and-computed");
 
         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);
         var computedStylePanesWrapper = new WebInspector.VBox();
@@ skipping 17 matching lines @@
          */
         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 = new WebInspector.View.TabbedPaneContainer();
-        this.sidebarPaneView.element.addEventListener("contextmenu", this._sidebarContextMenuEventFired.bind(this), false);
+        this.sidebarPaneView = WebInspector.viewManager.createTabbedLocation(() => WebInspector.inspectorView.setCurrentPanel(this), "elements-sidebar");
+        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(this.sidebarPaneView.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
+        this._popoverHelper = new WebInspector.PopoverHelper(tabbedPane.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
         this._popoverHelper.setTimeout(0);
 
         if (horizontally) {
-            this._splitWidget.installResizer(this.sidebarPaneView.headerElement());
+            this._splitWidget.installResizer(tabbedPane.headerElement());
 
-            var compositePane = new WebInspector.View(WebInspector.UIString("Styles"));
+            var compositePane = new WebInspector.SimpleView(WebInspector.UIString("Styles"));
             compositePane.element.classList.add("flex-auto");
 
             var splitWidget = new WebInspector.SplitWidget(true, true, "stylesPaneSplitViewState", 215);
             splitWidget.show(compositePane.element);
 
             splitWidget.setMainWidget(matchedStylesContainer);
             splitWidget.setSidebarWidget(computedStylePanesWrapper);
 
             computedPane.show(computedStylePanesWrapper.element);
             this.sidebarPaneView.appendView(compositePane);
+
+            // TODO: remove
+            this.sidebarPanes.styles.setParentViewForReveal(compositePane);
+            this.sidebarPanes.computedStyle.setParentViewForReveal(compositePane);
+            this.sidebarPanes.metrics.setParentViewForReveal(compositePane);
         } else {
-            var stylesPane = new WebInspector.View(WebInspector.UIString("Styles"));
+            var stylesPane = new WebInspector.SimpleView(WebInspector.UIString("Styles"));
             stylesPane.element.classList.add("flex-auto", "metrics-and-styles");
 
             matchedStylesContainer.show(stylesPane.element);
             computedStylePanesWrapper.show(computedPane.element);
 
-            this.sidebarPaneView.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, tabSelected, this);
+            tabbedPane.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, tabSelected, this);
             this.sidebarPaneView.appendView(stylesPane);
             this.sidebarPaneView.appendView(computedPane);
+            this.sidebarPanes.metrics.setParentViewForReveal(computedPane);

[dgozman, 2016/08/06 00:56:10]

nit: move next to others under TODO

+
+            // TODO: remove
+            this.sidebarPanes.styles.setParentViewForReveal(stylesPane);
+            this.sidebarPanes.computedStyle.setParentViewForReveal(computedPane);
         }
 
         this.sidebarPanes.styles.show(matchedStylePanesWrapper.element);
         this.sidebarPanes.computedStyle.show(computedStylePanesWrapper.element);
         showMetrics.call(this, horizontally);
 
         this.sidebarPaneView.appendView(this.sidebarPanes.eventListeners);
         this.sidebarPaneView.appendView(this.sidebarPanes.domBreakpoints);
         this.sidebarPaneView.appendView(this.sidebarPanes.properties);
 
         for (var sidebarViewWrapper of this._elementsSidebarViews)
             this.sidebarPaneView.appendView(sidebarViewWrapper);
 
         this._extensionSidebarPanesContainer = this.sidebarPaneView;
 
         for (var i = 0; i < extensionSidebarPanes.length; ++i)
             this._addExtensionSidebarPane(extensionSidebarPanes[i]);
 
-        this._splitWidget.setSidebarWidget(this.sidebarPaneView);
-
-        if (selectedTabId)
-            this.sidebarPaneView.selectTab(selectedTabId);
+        this._splitWidget.setSidebarWidget(this.sidebarPaneView.tabbedPane());
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _extensionSidebarPaneAdded: function(event)
     {
         var pane = /** @type {!WebInspector.ExtensionSidebarPane} */ (event.data);
         this._addExtensionSidebarPane(pane);
     },
@@ skipping 183 matching lines @@
     /**
      * @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(", :")) };
     }
 }