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() {
-    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())
-      return;
-
     if (this.sidebarPaneView && this.sidebarPaneView.tabbedPane().shouldHideOnDetach())
       return;  // We can't reparent extension iframes.
 
+    var splitMode;
+    var position = Common.moduleSetting('sidebarPosition').get();
+    if (position === 'right' || (position === 'auto' && UI.inspectorView.element.offsetWidth > 680))
+      splitMode = Elements.ElementsPanel._splitMode.Vertical;
+    else if (UI.inspectorView.element.offsetWidth > 415)
+      splitMode = Elements.ElementsPanel._splitMode.Horizontal;
+    else
+      splitMode = Elements.ElementsPanel._splitMode.Slim;
+
+    if (this.sidebarPaneView && splitMode === this._splitMode)
+      return;
+    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._splitWidget.setVertical(this._splitMode === Elements.ElementsPanel._splitMode.Vertical);
     this.showToolbarPane(null);
 
     var matchedStylesContainer = new UI.VBox();
     matchedStylesContainer.element.appendChild(this._stylesSidebarToolbar);
     var matchedStylePanesWrapper = new UI.VBox();
     matchedStylePanesWrapper.element.classList.add('style-panes-wrapper');
     matchedStylePanesWrapper.show(matchedStylesContainer.element);
     this._stylesWidget.show(matchedStylePanesWrapper.element);
 
     var computedStylePanesWrapper = new UI.VBox();
@@ skipping 24 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 (this._splitMode !== Elements.ElementsPanel._splitMode.Vertical)
       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);
+    showMetrics.call(this, this._splitMode === Elements.ElementsPanel._splitMode.Horizontal);
 
     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(', :'))
     };
   }
 };