DevTools: migrate InspectorView to tabbed view location.

third_party/WebKit/Source/devtools/front_end/ui/View.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @interface
  */
 WebInspector.View = function()
 {
 }
@@ skipping 24 matching lines @@
      */
     toolbarItems: function() { },
 
     /**
      * @return {!Promise<!WebInspector.Widget>}
      */
     widget: function() { }
 }
 
 WebInspector.View._symbol = Symbol("view");
+WebInspector.View._widgetSymbol = Symbol("widget");
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @implements {WebInspector.View}
  * @param {string} title
  * @param {boolean=} isWebComponent
  */
 WebInspector.SimpleView = function(title, isWebComponent)
 {
@@ skipping 268 matching lines @@
      * @param {string} viewId
      * @return {?WebInspector.View}
      */
     view: function(viewId)
     {
         return this._views.get(viewId);
     },
 
     /**
      * @param {string} viewId
+     * @return {?WebInspector.Widget}
+     */
+    materializedWidget: function(viewId)
+    {
+        var view = this.view(viewId);
+        return view ? view[WebInspector.View._widgetSymbol] : null;
+    },
+
+    /**
+     * @param {string} viewId
      * @return {!Promise}
      */
     showView: function(viewId)
     {
         var view = this._views.get(viewId);
         if (!view) {
             console.error("Could not find view for id: '" + viewId + "' " + new Error().stack);
             return Promise.resolve();
         }
 
@@ skipping 28 matching lines @@
         if (!resolverExtensions.length)
             throw new Error("Unresolved location: " + location);
         var resolverExtension = resolverExtensions[0];
         return resolverExtension.instance().then(resolver => /** @type {?WebInspector.ViewManager._Location} */(resolver.resolveLocation(location)));
     },
 
     /**
      * @param {function()=} revealCallback
      * @param {string=} location
      * @param {boolean=} restoreSelection
+     * @param {boolean=} allowReorder
      * @return {!WebInspector.TabbedViewLocation}
      */
-    createTabbedLocation: function(revealCallback, location, restoreSelection)
+    createTabbedLocation: function(revealCallback, location, restoreSelection, allowReorder)
     {
-        return new WebInspector.ViewManager._TabbedLocation(this, revealCallback, location, restoreSelection);
+        return new WebInspector.ViewManager._TabbedLocation(this, revealCallback, location, restoreSelection, allowReorder);
     },
 
     /**
      * @param {function()=} revealCallback
      * @param {string=} location
      * @return {!WebInspector.ViewLocation}
      */
     createStackLocation: function(revealCallback, location)
     {
         return new WebInspector.ViewManager._StackLocation(this, revealCallback, location);
@@ skipping 50 matching lines @@
     _materialize: function()
     {
         if (this._materializePromise)
             return this._materializePromise;
         var promises = [];
         promises.push(this._view.toolbarItems().then(WebInspector.ViewManager._populateToolbar.bind(WebInspector.ViewManager, this.element)));
         promises.push(this._view.widget().then(widget => {
             // Move focus from |this| to loaded |widget| if any.
             var shouldFocus = this.element.hasFocus();
             this.setDefaultFocusedElement(null);
+            this._view[WebInspector.View._widgetSymbol] = widget;
             widget.show(this.element);
             if (shouldFocus)
                 widget.focus();
         }));
         this._materializePromise = Promise.all(promises);
         return this._materializePromise;
     },
 
     __proto__: WebInspector.VBox.prototype
 }
@@ skipping 28 matching lines @@
      * @return {!Promise}
      */
     _materialize: function()
     {
         if (this._materializePromise)
             return this._materializePromise;
         var promises = [];
         promises.push(this._view.toolbarItems().then(WebInspector.ViewManager._populateToolbar.bind(WebInspector.ViewManager, this._titleElement)));
         promises.push(this._view.widget().then(widget => {
             this._widget = widget;
+            this._view[WebInspector.View._widgetSymbol] = widget;
             widget.show(this.element);
         }));
         this._materializePromise = Promise.all(promises);
         return this._materializePromise;
     },
 
     /**
      * @return {!Promise}
      */
     _expand: function()
@@ skipping 64 matching lines @@
 }
 
 /**
  * @constructor
  * @extends {WebInspector.ViewManager._Location}
  * @implements {WebInspector.TabbedViewLocation}
  * @param {!WebInspector.ViewManager} manager
  * @param {function()=} revealCallback
  * @param {string=} location
  * @param {boolean=} restoreSelection
+ * @param {boolean=} allowReorder
  */
-WebInspector.ViewManager._TabbedLocation = function(manager, revealCallback, location, restoreSelection)
+WebInspector.ViewManager._TabbedLocation = function(manager, revealCallback, location, restoreSelection, allowReorder)
 {
     this._tabbedPane = new WebInspector.TabbedPane();
+    if (allowReorder)
+        this._tabbedPane.setAllowTabReorder(true);
+    this._allowReorder = allowReorder;
     WebInspector.ViewManager._Location.call(this, manager, this._tabbedPane, revealCallback);
 
     this._tabbedPane.addEventListener(WebInspector.TabbedPane.Events.TabSelected, this._tabSelected, this);
     this._tabbedPane.addEventListener(WebInspector.TabbedPane.Events.TabClosed, this._tabClosed, this);
     this._closeableTabSetting = WebInspector.settings.createSetting(location + "-closeableTabs", {});
+    this._tabOrderSetting = WebInspector.settings.createSetting(location + "-tabOrder", {});
+    this._tabbedPane.addEventListener(WebInspector.TabbedPane.Events.TabOrderChanged, this._persistTabOrder, this);
     if (restoreSelection)
         this._lastSelectedTabSetting = WebInspector.settings.createSetting(location + "-selectedTab", "");
 
     /** @type {!Map.<string, !WebInspector.View>} */
     this._views = new Map();
 
     if (location)
         this.appendApplicableItems(location);
 }
 
+WebInspector.ViewManager._TabbedLocation.orderStep = 10;  // Keep in sync with descriptors.
+
 WebInspector.ViewManager._TabbedLocation.prototype = {
     /**
      * @override
      * @return {!WebInspector.Widget}
      */
     widget: function()
     {
         return this._tabbedPane;
     },
 
@@ skipping 14 matching lines @@
         this._tabbedPane.leftToolbar().appendToolbarItem(new WebInspector.ToolbarMenuButton(this._appendTabsToMenu.bind(this)));
         this._tabbedPane.disableOverflowMenu();
     },
 
     /**
      * @override
      * @param {string} locationName
      */
     appendApplicableItems: function(locationName)
     {
-        for (var view of this._manager._viewsForLocation(locationName)) {
+        var views = this._manager._viewsForLocation(locationName);
+        if (this._allowReorder) {
+            var i = 0;
+            var persistedOrders = this._tabOrderSetting.get();
+            var orders = new Map();
+            for (var view of views)
+                orders.set(view.viewId(), persistedOrders[view.viewId()] || (++i) * WebInspector.ViewManager._TabbedLocation.orderStep);
+            views.sort((a, b) => orders.get(a.viewId()) - orders.get(b.viewId()));
+        }
+
+        for (var view of views) {
             var id = view.viewId();
             this._views.set(id, view);
             view[WebInspector.ViewManager._Location.symbol] = this;
             if (view.isTransient())
                 continue;
             if (!view.isCloseable())
                 this._appendTab(view);
             else if (this._closeableTabSetting.get()[id])
                 this._appendTab(view);
         }
@@ skipping 14 matching lines @@
     _appendTabsToMenu: function(contextMenu)
     {
         for (var view of this._views.values()) {
             var title = WebInspector.UIString(view.title());
             contextMenu.appendItem(title, this.showView.bind(this, view));
         }
     },
 
     /**
      * @param {!WebInspector.View} view
+     * @param {number=} index
      */
-    _appendTab: function(view)
+    _appendTab: function(view, index)
     {
-        this._tabbedPane.appendTab(view.viewId(), view.title(), new WebInspector.ViewManager._ContainerWidget(view), undefined, false, view.isCloseable() || view.isTransient());
+        this._tabbedPane.appendTab(view.viewId(), view.title(), new WebInspector.ViewManager._ContainerWidget(view), undefined, false, view.isCloseable() || view.isTransient(), index);
     },
 
     /**
      * @override
      * @param {!WebInspector.View} view
      * @param {?WebInspector.View=} insertBefore
      */
     appendView: function(view, insertBefore)
     {
-        if (insertBefore)
-            throw new Error("Insert before in tabbed pane is not supported");
-        if (!this._tabbedPane.hasTab(view.viewId())) {
-            view[WebInspector.ViewManager._Location.symbol] = this;
-            this._manager._views.set(view.viewId(), view);
-            this._views.set(view.viewId(), view);
-            this._appendTab(view);
+        if (this._tabbedPane.hasTab(view.viewId()))
+            return;
+        view[WebInspector.ViewManager._Location.symbol] = this;
+        this._manager._views.set(view.viewId(), view);
+        this._views.set(view.viewId(), view);
+
+        var index = undefined;
+        var tabIds = this._tabbedPane.tabIds();
+        if (this._allowReorder) {
+            var orderSetting = this._tabOrderSetting.get();
+            var order = orderSetting[view.viewId()];
+            for (var i = 0; order && i < tabIds.length; ++i) {
+                if (orderSetting[tabIds[i]] && orderSetting[tabIds[i]] > order) {
+                    index = i;
+                    break;
+                }
+            }
+        } else if (insertBefore) {
+            for (var i = 0; i < tabIds.length; ++i) {
+                if (tabIds[i] === insertBefore.viewId()) {
+                    index = i;
+                    break;
+                }
+            }
         }
+        this._appendTab(view, index);
     },
 
     /**
      * @override
      * @param {!WebInspector.View} view
      * @param {?WebInspector.View=} insertBefore
      * @return {!Promise}
      */
     showView: function(view, insertBefore)
     {
@@ skipping 58 matching lines @@
     /**
      * @param {!WebInspector.View} view
      * @return {!Promise}
      */
     _materializeWidget: function(view)
     {
         var widget = /** @type {!WebInspector.ViewManager._ContainerWidget} */ (this._tabbedPane.tabView(view.viewId()));
         return widget._materialize();
     },
 
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _persistTabOrder: function(event)
+    {
+        var tabIds = this._tabbedPane.tabIds();
+        var tabOrders = {};
+        for (var i = 0; i < tabIds.length; i++)
+            tabOrders[tabIds[i]] = (i + 1) * WebInspector.ViewManager._TabbedLocation.orderStep;
+        this._tabOrderSetting.set(tabOrders);
+    },
+
     __proto__: WebInspector.ViewManager._Location.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.ViewManager._Location}
  * @implements {WebInspector.ViewLocation}
  * @param {!WebInspector.ViewManager} manager
  * @param {function()=} revealCallback
  * @param {string=} location
@@ skipping 73 matching lines @@
             this.appendView(view);
     },
 
     __proto__: WebInspector.ViewManager._Location.prototype
 }
 
 /**
  * @type {!WebInspector.ViewManager}
  */
 WebInspector.viewManager;