DevTools: introduce View: a named widget with the toolbar.

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 49 matching lines @@
     if (WebInspector.moduleSetting("domWordWrap").get())
         this._contentElement.classList.add("elements-wrap");
     WebInspector.moduleSetting("domWordWrap").addChangeListener(this._domWordWrapSettingChanged.bind(this));
 
     crumbsContainer.id = "elements-crumbs";
     this._breadcrumbs = new WebInspector.ElementsBreadcrumbs();
     this._breadcrumbs.show(crumbsContainer);
     this._breadcrumbs.addEventListener(WebInspector.ElementsBreadcrumbs.Events.NodeSelected, this._crumbNodeSelected, this);
 
     this.sidebarPanes = {};
-    /** @type !Array<!WebInspector.ElementsSidebarViewWrapperPane> */
-    this._elementsSidebarViewWrappers = [];
+    /** @type !Array<!WebInspector.View> */
+    this._elementsSidebarViews = [];
     this._currentToolbarPane = null;
 
     this.sidebarPanes.styles = new WebInspector.StylesSidebarPane();
-    this.sidebarPanes.computedStyle = WebInspector.ComputedStyleWidget.createSidebarWrapper();
+    this.sidebarPanes.computedStyle = new WebInspector.ComputedStyleWidget();
     this.sidebarPanes.metrics = new WebInspector.MetricsSidebarPane();
-    this.sidebarPanes.properties = WebInspector.PropertiesWidget.createSidebarWrapper();
+    this.sidebarPanes.properties = new WebInspector.PropertiesWidget();
     this.sidebarPanes.domBreakpoints = WebInspector.domBreakpointsSidebarPane.createProxy(this);
-    this.sidebarPanes.eventListeners = WebInspector.EventListenersWidget.createSidebarWrapper();
+    this.sidebarPanes.eventListeners = new WebInspector.EventListenersWidget();
 
     this._stylesSidebarToolbar = this._createStylesSidebarToolbar(this.sidebarPanes.styles);
 
     WebInspector.moduleSetting("sidebarPosition").addChangeListener(this._updateSidebarPosition.bind(this));
     this._updateSidebarPosition();
     this._loadSidebarViews();
 
     /** @type {!Array.<!WebInspector.ElementsTreeOutline>} */
     this._treeOutlines = [];
     WebInspector.targetManager.observeTargets(this);
@@ skipping 102 matching lines @@
 
             if (this._pendingWidget !== undefined) {
                 this._startToolbarPaneAnimation(this._pendingWidget);
                 delete this._pendingWidget;
             }
         }
     },
 
     _loadSidebarViews: function()
     {
-        var extensions = self.runtime.extensions("@WebInspector.Widget");
+        var extensions = self.runtime.extensions("@WebInspector.View");
 
         for (var i = 0; i < extensions.length; ++i) {
             var descriptor = extensions[i].descriptor();
             if (descriptor["location"] !== "elements-panel")
                 continue;
 
             var title = WebInspector.UIString(descriptor["title"]);
             extensions[i].instancePromise().then(addSidebarView.bind(this, title));
         }
 
         /**
          * @param {string} title
          * @param {!Object} object
          * @this {WebInspector.ElementsPanel}
          */
         function addSidebarView(title, object)
         {
-            var widget = /** @type {!WebInspector.Widget} */ (object);
-            var elementsSidebarViewWrapperPane = new WebInspector.ElementsSidebarViewWrapperPane(title, widget);
-            this._elementsSidebarViewWrappers.push(elementsSidebarViewWrapperPane);
+            var view = /** @type {!WebInspector.View} */ (object);
+            this._elementsSidebarViews.push(view);
 
             if (this.sidebarPaneView)
-                this.sidebarPaneView.addPane(elementsSidebarViewWrapperPane);
+                this.sidebarPaneView.addPane(view);
         }
     },
 
     /**
      * @override
      * @param {!WebInspector.Target} target
      */
     targetAdded: function(target)
     {
         var domModel = WebInspector.DOMModel.fromTarget(target);
@@ skipping 627 matching lines @@
 
         var extensionSidebarPanes = WebInspector.extensionServer.sidebarPanes();
         if (this.sidebarPaneView) {
             this.sidebarPaneView.detach();
             this._splitWidget.uninstallResizer(this.sidebarPaneView.headerElement());
         }
 
         this._splitWidget.setVertical(!horizontally);
         this.showToolbarPane(null);
 
-        var computedPane = new WebInspector.SidebarPane(WebInspector.UIString("Computed"));
+        var computedPane = new WebInspector.View(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 27 matching lines @@
         this.sidebarPaneView = new WebInspector.SidebarTabbedPane();
         this.sidebarPaneView.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.setTimeout(0);
 
         if (horizontally) {
             this._splitWidget.installResizer(this.sidebarPaneView.headerElement());
 
-            var compositePane = new WebInspector.SidebarPane(WebInspector.UIString("Styles"));
+            var compositePane = new WebInspector.View(WebInspector.UIString("Styles"));
             compositePane.element.classList.add("composite");
             compositePane.element.classList.add("fill");
 
             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.addPane(compositePane);
         } else {
-            var stylesPane = new WebInspector.SidebarPane(WebInspector.UIString("Styles"));
+            var stylesPane = new WebInspector.View(WebInspector.UIString("Styles"));
             stylesPane.element.classList.add("composite", "fill", "metrics-and-styles");
 
             matchedStylesContainer.show(stylesPane.element);
             computedStylePanesWrapper.show(computedPane.element);
 
             this.sidebarPaneView.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, tabSelected, this);
             this.sidebarPaneView.addPane(stylesPane);
             this.sidebarPaneView.addPane(computedPane);
         }
 
         this.sidebarPanes.styles.show(matchedStylePanesWrapper.element);
         this.sidebarPanes.computedStyle.show(computedStylePanesWrapper.element);
         showMetrics.call(this, horizontally);
 
         this.sidebarPaneView.addPane(this.sidebarPanes.eventListeners);
         this.sidebarPaneView.addPane(this.sidebarPanes.domBreakpoints);
         this.sidebarPaneView.addPane(this.sidebarPanes.properties);
 
-        for (var sidebarViewWrapper of this._elementsSidebarViewWrappers)
+        for (var sidebarViewWrapper of this._elementsSidebarViews)
             this.sidebarPaneView.addPane(sidebarViewWrapper);
 
         this._extensionSidebarPanesContainer = this.sidebarPaneView;
 
         for (var i = 0; i < extensionSidebarPanes.length; ++i)
             this._addExtensionSidebarPane(extensionSidebarPanes[i]);
 
         this._splitWidget.setSidebarWidget(this.sidebarPaneView);
-        this.sidebarPanes.styles.expandPane();
 
         if (selectedTabId)
             this.sidebarPaneView.selectTab(selectedTabId);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _extensionSidebarPaneAdded: function(event)
     {
@@ skipping 207 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(", :")) };
     }
 }