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

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 36 matching lines @@
     this._searchableView.setMinimumSize(25, 28);
     this._searchableView.setPlaceholder(Common.UIString('Find by string, selector, or XPath'));
     var stackElement = this._searchableView.element;
 
     this._contentElement = createElement('div');
     var crumbsContainer = createElement('div');
     stackElement.appendChild(this._contentElement);
     stackElement.appendChild(crumbsContainer);
 
     this._splitWidget.setMainWidget(this._searchableView);
+    /** @type {?Elements.ElementsPanel._splitMode} */
+    this._splitMode = null;
 
     this._contentElement.id = 'elements-content';
     // FIXME: crbug.com/425984
     if (Common.moduleSetting('domWordWrap').get())
       this._contentElement.classList.add('elements-wrap');
     Common.moduleSetting('domWordWrap').addChangeListener(this._domWordWrapSettingChanged.bind(this));
 
     crumbsContainer.id = 'elements-crumbs';
     this._breadcrumbs = new Elements.ElementsBreadcrumbs();
     this._breadcrumbs.show(crumbsContainer);
@@ skipping 275 matching lines @@
     }
     if (this._popoverHelper)
       this._popoverHelper.hidePopover();
     super.willHide();
   }
 
   /**
    * @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();
   }
 
   /**
    * @param {!Common.Event} event
    */
   _selectedNodeChanged(event) {
     var selectedNode = /** @type {?SDK.DOMNode} */ (event.data.node);
     var focus = /** @type {boolean} */ (event.data.focus);
     for (var i = 0; i < this._treeOutlines.length; ++i) {
@@ skipping 452 matching lines @@
       this._notFirstInspectElement = true;
     });
   }
 
   _showUAShadowDOMChanged() {
     for (var i = 0; i < this._treeOutlines.length; ++i)
       this._treeOutlines[i].update();
   }
 
   _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')
       horizontally = false;
     else if (position === 'bottom')
       horizontally = true;
     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) {
       this.sidebarPaneView.tabbedPane().detach();
       this._splitWidget.uninstallResizer(this.sidebarPaneView.tabbedPane().headerElement());
     }
 
     this._splitWidget.setVertical(!horizontally);
     this.showToolbarPane(null);
 
@@ skipping 32 matching lines @@
     }
 
     this.sidebarPaneView = UI.viewManager.createTabbedLocation(() => UI.viewManager.showView('elements'));
     var tabbedPane = this.sidebarPaneView.tabbedPane();
     if (this._popoverHelper)
       this._popoverHelper.hidePopover();
     this._popoverHelper = new UI.PopoverHelper(tabbedPane.element, this._getPopoverRequest.bind(this));
     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);
 
       var computedView = new UI.SimpleView(Common.UIString('Computed'));
       computedView.element.classList.add('composite', 'fill', 'metrics-and-computed');
       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);
 
     this.sidebarPaneView.appendApplicableItems('elements-sidebar');
     for (var i = 0; i < extensionSidebarPanes.length; ++i)
       this._addExtensionSidebarPane(extensionSidebarPanes[i]);
 
     this._splitWidget.setSidebarWidget(this.sidebarPaneView.tabbedPane());
   }
 
   /**
    * @param {!Common.Event} event
    */
   _extensionSidebarPaneAdded(event) {
     var pane = /** @type {!Extensions.ExtensionSidebarPane} */ (event.data);
     this._addExtensionSidebarPane(pane);
   }
 
   /**
    * @param {!Extensions.ExtensionSidebarPane} pane
    */
   _addExtensionSidebarPane(pane) {
     if (pane.panelName() === this.name)
       this.sidebarPaneView.appendView(pane);
   }
 };
 
 Elements.ElementsPanel._elementsSidebarViewTitleSymbol = Symbol('title');
 
+/** @enum {symbol} */
+Elements.ElementsPanel._splitMode = {
+  Vertical: Symbol('Vertical'),
+  Horizontal: Symbol('Horizontal'),
+  Slim: Symbol('Slim'),
+};
+
 /**
  * @implements {UI.ContextMenu.Provider}
  * @unrestricted
  */
 Elements.ElementsPanel.ContextMenuProvider = class {
   /**
    * @override
    * @param {!Event} event
    * @param {!UI.ContextMenu} contextMenu
    * @param {!Object} object
@@ skipping 121 matching lines @@
    * @param {!SDK.DOMNode} node
    * @return {?{title: string, color: string}}
    */
   decorate(node) {
     return {
       color: 'orange',
       title: Common.UIString('Element state: %s', ':' + node.domModel().cssModel().pseudoState(node).join(', :'))
     };
   }
 };