DevTools: add new mode for styles sidebar that hides computed split view

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

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 343e5e8b5b1c6a6ec872ed4cc83173feed268940..d46a2d7ff06781854e14fca650db042dcbe3411e 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js
@@ -54,6 +54,8 @@ Elements.ElementsPanel = class extends UI.Panel {
     stackElement.appendChild(crumbsContainer);
 
     this._splitWidget.setMainWidget(this._searchableView);
+    /** @type {?Elements.ElementsPanel._splitMode} */
+    this._splitMode = null;
 
     this._contentElement.id = 'elements-content';
     // FIXME: crbug.com/425984
@@ -349,8 +351,7 @@ Elements.ElementsPanel = class extends UI.Panel {
    * @override
    */
   onResize() {
-    if (Common.moduleSetting('sidebarPosition').get() === 'auto')
-      this.element.window().requestAnimationFrame(this._updateSidebarPosition.bind(this));  // Do not force layout.
+    this.element.window().requestAnimationFrame(this._updateSidebarPosition.bind(this));  // Do not force layout.
     this._updateTreeOutlineVisibleWidth();
   }
 
@@ -823,6 +824,9 @@ Elements.ElementsPanel = class extends UI.Panel {
   }
 
   _updateSidebarPosition() {
+    if (this.sidebarPaneView && this.sidebarPaneView.tabbedPane().shouldHideOnDetach())
+      return;  // We can't reparent extension iframes.
+
     var horizontally;
     var position = Common.moduleSetting('sidebarPosition').get();
     if (position === 'right')
@@ -832,11 +836,13 @@ Elements.ElementsPanel = class extends UI.Panel {
     else
       horizontally = UI.inspectorView.element.offsetWidth < 680;
 
-    if (this.sidebarPaneView && horizontally === !this._splitWidget.isVertical())
+    var splitMode =
+        horizontally ? Elements.ElementsPanel._splitMode.Horizontal : Elements.ElementsPanel._splitMode.Vertical;
+    if (UI.inspectorView.element.offsetWidth < 415)

[lushnikov, 2017/05/10 21:30:52]

you have to do this only in horizontal

[luoe, 2017/05/10 23:40:53]

Done.

+      splitMode = Elements.ElementsPanel._splitMode.Slim;
+    if (this.sidebarPaneView && splitMode === this._splitMode)
       return;
-
-    if (this.sidebarPaneView && this.sidebarPaneView.tabbedPane().shouldHideOnDetach())
-      return;  // We can't reparent extension iframes.
+    this._splitMode = splitMode;
 
     var extensionSidebarPanes = Extensions.extensionServer.sidebarPanes();
     if (this.sidebarPaneView) {
@@ -889,24 +895,21 @@ Elements.ElementsPanel = class extends UI.Panel {
     this._popoverHelper.setHasPadding(true);
     this._popoverHelper.setTimeout(0);
 
-    if (horizontally) {
-      // Styles and computed are merged into a single tab.
+    if (horizontally)

[lushnikov, 2017/05/10 21:30:52]

i'm having hard times understanding what's horizontally and splitMode.
You should use only either of them for your layout logic.

[luoe, 2017/05/10 23:40:53]

Done, just splitMode.

       this._splitWidget.installResizer(tabbedPane.headerElement());
 
-      var stylesView = new UI.SimpleView(Common.UIString('Styles'));
+    var stylesView = new UI.SimpleView(Common.UIString('Styles'));
+    this.sidebarPaneView.appendView(stylesView);
+    if (splitMode === Elements.ElementsPanel._splitMode.Horizontal) {
+      // Styles and computed are merged into a single tab.
       stylesView.element.classList.add('flex-auto');
 
       var splitWidget = new UI.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 UI.SimpleView(Common.UIString('Styles'));
       stylesView.element.classList.add('flex-auto', 'metrics-and-styles');
       matchedStylesContainer.show(stylesView.element);
 
@@ -915,10 +918,9 @@ Elements.ElementsPanel = class extends UI.Panel {
       computedStylePanesWrapper.show(computedView.element);
 
       tabbedPane.addEventListener(UI.TabbedPane.Events.TabSelected, tabSelected, this);
-      this.sidebarPaneView.appendView(stylesView);
       this.sidebarPaneView.appendView(computedView);
-      this._stylesViewToReveal = stylesView;
     }
+    this._stylesViewToReveal = stylesView;
 
     showMetrics.call(this, horizontally);
 
@@ -948,6 +950,13 @@ Elements.ElementsPanel = class extends UI.Panel {
 
 Elements.ElementsPanel._elementsSidebarViewTitleSymbol = Symbol('title');
 
+/** @enum {symbol} */
+Elements.ElementsPanel._splitMode = {
+  Vertical: Symbol('Vertical'),
+  Horizontal: Symbol('Horizontal'),
+  Slim: Symbol('Slim'),
+};
+
 /**
  * @implements {UI.ContextMenu.Provider}
  * @unrestricted