Changeset 141249 in webkit

Timestamp:

Jan 30, 2013 3:59:44 AM (11 years ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: Change the Elements panel sidebar layout based on its aspect ratio.
​https://bugs.webkit.org/show_bug.cgi?id=108181

Patch by Vladislav Kaznacheev <​kaznacheev@chromium.org> on 2013-01-30
Reviewed by Pavel Feldman.

Sidebar aspect ratio proved to be a better trigger for the sidebar layout change that the docking mode.
Moved the sidebar layout handling completely into WebInspector.SidebarView which now only accepts
two positions: Start (corresponding to Left or Top) and End (corresponding to Right or Bottom).

No new tests.

• inspector/front-end/CSSNamedFlowCollectionsView.js:

(WebInspector.CSSNamedFlowCollectionsView):

• inspector/front-end/DockController.js:

(WebInspector.DockController.prototype._updateUI):
(WebInspector.DockController.prototype._toggleDockState):

• inspector/front-end/ElementsPanel.js:

(WebInspector.ElementsPanel.prototype.onResize):

• inspector/front-end/FileSystemView.js:

(WebInspector.FileSystemView):

• inspector/front-end/MemoryStatistics.js:
• inspector/front-end/Panel.js:

(WebInspector.Panel.prototype.createSidebarView):

• inspector/front-end/ScriptsPanel.js:

(WebInspector.ScriptsPanel):

• inspector/front-end/Settings.js:

(WebInspector.ExperimentsSettings):

• inspector/front-end/SidebarView.js:

(WebInspector.SidebarView):
(WebInspector.SidebarView.prototype.setAutoOrientation):
(WebInspector.SidebarView.prototype._updateSidebarPosition):
(WebInspector.SidebarView.prototype.onResize):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (2 diffs)
• inspector/front-end/CSSNamedFlowCollectionsView.js (modified) (3 diffs)
• inspector/front-end/DockController.js (modified) (5 diffs)
• inspector/front-end/ElementsPanel.js (modified) (2 diffs)
• inspector/front-end/FileSystemView.js (modified) (1 diff)
• inspector/front-end/MemoryStatistics.js (modified) (1 diff)
• inspector/front-end/Panel.js (modified) (1 diff)
• inspector/front-end/ScriptsPanel.js (modified) (2 diffs)
• inspector/front-end/Settings.js (modified) (1 diff)
• inspector/front-end/SidebarView.js (modified) (5 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2013-01-30  Vladislav Kaznacheev  <kaznacheev@chromium.org>
+
+        Web Inspector: Change the Elements panel sidebar layout based on its aspect ratio.
+        https://bugs.webkit.org/show_bug.cgi?id=108181
+
+        Reviewed by Pavel Feldman.
+
+        Sidebar aspect ratio proved to be a better trigger for the sidebar layout change that the docking mode.
+        Moved the sidebar layout handling completely into WebInspector.SidebarView which now only accepts
+        two positions: Start (corresponding to Left or Top) and End (corresponding to Right or Bottom).
+
+        No new tests.
+
+        * inspector/front-end/CSSNamedFlowCollectionsView.js:
+        (WebInspector.CSSNamedFlowCollectionsView):
+        * inspector/front-end/DockController.js:
+        (WebInspector.DockController.prototype._updateUI):
+        (WebInspector.DockController.prototype._toggleDockState):
+        * inspector/front-end/ElementsPanel.js:
+        (WebInspector.ElementsPanel.prototype.onResize):
+        * inspector/front-end/FileSystemView.js:
+        (WebInspector.FileSystemView):
+        * inspector/front-end/MemoryStatistics.js:
+        * inspector/front-end/Panel.js:
+        (WebInspector.Panel.prototype.createSidebarView):
+        * inspector/front-end/ScriptsPanel.js:
+        (WebInspector.ScriptsPanel):
+        * inspector/front-end/Settings.js:
+        (WebInspector.ExperimentsSettings):
+        * inspector/front-end/SidebarView.js:
+        (WebInspector.SidebarView):
+        (WebInspector.SidebarView.prototype.setAutoOrientation):
+        (WebInspector.SidebarView.prototype._updateSidebarPosition):
+        (WebInspector.SidebarView.prototype.onResize):
+
 2013-01-30  Patrick Gansterer  <paroga@webkit.org>
 
@@ -2488 +2523 @@
         Add exceptions to binding integrity checks to IDL.
         
+2013-01-28  Alpha Lam  <hclam@chromium.org>
+
+        [chromium] Build fix.
+
+        Unreviewed build fix. Remove the use of SkMutex from DiscardablePixelRef.
+
+        * platform/graphics/chromium/DiscardablePixelRef.cpp:
+        (WebCore::DiscardablePixelRefAllocator::allocPixelRef):
+        (WebCore::DiscardablePixelRef::DiscardablePixelRef):
+        * platform/graphics/chromium/DiscardablePixelRef.h:
+        (DiscardablePixelRef):
+
 2013-01-28  Benjamin Poulain  <benjamin@webkit.org>
 

trunk/Source/WebCore/inspector/front-end/CSSNamedFlowCollectionsView.js

@@ -34 +34 @@
 WebInspector.CSSNamedFlowCollectionsView = function()
 {
-    WebInspector.SidebarView.call(this, WebInspector.SidebarView.SidebarPosition.Left);
+    WebInspector.SidebarView.call(this, WebInspector.SidebarView.SidebarPosition.Start);
     this.registerRequiredCSS("cssNamedFlows.css");
 
@@ -47 +47 @@
     this._statusElement.textContent = WebInspector.UIString("CSS Named Flows");
 
-    var sidebarHeader = this._leftElement.createChild("div", "tabbed-pane-header selected sidebar-header")
+    var sidebarHeader = this.firstElement().createChild("div", "tabbed-pane-header selected sidebar-header");
     var tab = sidebarHeader.createChild("div", "tabbed-pane-header-tab");
     tab.createChild("span", "tabbed-pane-header-tab-title").textContent = WebInspector.UIString("CSS Named Flows");
 
-    this._sidebarContentElement = this._leftElement.createChild("div", "sidebar-content outline-disclosure");
+    this._sidebarContentElement = this.firstElement().createChild("div", "sidebar-content outline-disclosure");
     this._flowListElement = this._sidebarContentElement.createChild("ol");
     this._flowTree = new TreeOutline(this._flowListElement);
@@ -61 +61 @@
     this._tabbedPane = new WebInspector.TabbedPane();
     this._tabbedPane.closeableTabs = true;
-    this._tabbedPane.show(this._rightElement);
+    this._tabbedPane.show(this.secondElement());
 }
 

trunk/Source/WebCore/inspector/front-end/DockController.js

@@ -31 +31 @@
 /**
  * @constructor
- * @extends {WebInspector.Object}
  */
 WebInspector.DockController = function()
@@ -52 +51 @@
 }
 
-WebInspector.DockController.EventTypes = {
-    StateChanged: "StateChanged"
-}
-
 WebInspector.DockController.prototype = {
     /**
@@ -63 +58 @@
     {
         return this._dockToggleButton.element;
-    },
-
-    /**
-     * @return {string}
-     */
-    dockSide: function()
-    {
-      return this._dockSide;
     },
 
@@ -155 +142 @@
         this._decorateButtonForTargetState(this._dockToggleButton, lastState);
         this._decorateButtonForTargetState(this._dockToggleButtonOption, sides[0]);
-
-        this.dispatchEventToListeners(WebInspector.DockController.EventTypes.StateChanged, this._dockSide);
     },
 
@@ -198 +183 @@
         }
         InspectorFrontendHost.requestSetDockSide(action);
-    },
-
-    __proto__: WebInspector.Object.prototype
+    }
 }
 

trunk/Source/WebCore/inspector/front-end/ElementsPanel.js

@@ -48 +48 @@
     this.setHideOnDetach();
 
-    WebInspector.dockController.addEventListener(WebInspector.DockController.EventTypes.StateChanged, this._onDockStateChanged.bind(this));
-
     const initialSidebarWidth = 325;
     const minimumContentWidthPercent = 34;
     const initialSidebarHeight = 325;
     const minimumContentHeightPercent = 34;
-    this.createSidebarView(this.element, this._sidebarPosition(), initialSidebarWidth, initialSidebarHeight);
+    this.createSidebarView(this.element, WebInspector.SidebarView.SidebarPosition.End, initialSidebarWidth, initialSidebarHeight);
+    this.splitView.setAutoOrientation(WebInspector.experimentsSettings.elementsPanelSingleColumn.isEnabled());
     this.splitView.setMinimumSidebarWidth(Preferences.minElementsSidebarWidth);
     this.splitView.setMinimumMainWidthPercent(minimumContentWidthPercent);
@@ -165 +164 @@
         this.treeOutline.updateSelection();
         this.updateBreadcrumbSizes();
-        if (WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked)
-            this.splitView.setSidebarPosition(this._sidebarPosition());
-    },
-
-    _onDockStateChanged: function()
-    {
-        if (WebInspector.dockController.dockSide() === WebInspector.DockController.State.Undocked)
-            this.splitView.setSidebarPosition(this._sidebarPosition());
-    },
-
-    /**
-     * @return {string}
-     */
-    _sidebarPosition: function()
-    {
-        if (WebInspector.experimentsSettings.elementsPanelSingleColumn.isEnabled() &&
-            WebInspector.dockController.dockSide() === WebInspector.DockController.State.DockedToRight)
-            return WebInspector.SidebarView.SidebarPosition.Bottom;
-
-        return WebInspector.SidebarView.SidebarPosition.Right;
     },
 

trunk/Source/WebCore/inspector/front-end/FileSystemView.js

@@ -36 +36 @@
 WebInspector.FileSystemView = function(fileSystem)
 {
-    WebInspector.SidebarView.call(this, WebInspector.SidebarView.SidebarPosition.Left, "FileSystemViewSidebarWidth");
+    WebInspector.SidebarView.call(this, WebInspector.SidebarView.SidebarPosition.Start, "FileSystemViewSidebarWidth");
     this.element.addStyleClass("file-system-view");
     this.element.addStyleClass("storage-view");

trunk/Source/WebCore/inspector/front-end/MemoryStatistics.js

@@ -44 +44 @@
 
     this._containerAnchor = timelinePanel.element.lastChild;
-    this._memorySidebarView = new WebInspector.SidebarView(WebInspector.SidebarView.SidebarPosition.Left, undefined, sidebarWidth);
+    this._memorySidebarView = new WebInspector.SidebarView(WebInspector.SidebarView.SidebarPosition.Start, undefined, sidebarWidth);
     this._memorySidebarView.sidebarElement.addStyleClass("sidebar");
     this._memorySidebarView.element.id = "memory-graphs-container";

trunk/Source/WebCore/inspector/front-end/Panel.js

@@ -163 +163 @@
             parentElement = this.element;
 
-        this.splitView = new WebInspector.SidebarView(position || WebInspector.SidebarView.SidebarPosition.Left, this._sidebarWidthSettingName(), defaultWidth, defaultHeight);
+        this.splitView = new WebInspector.SidebarView(position, this._sidebarWidthSettingName(), defaultWidth, defaultHeight);
         this.splitView.show(parentElement);
         this.splitView.addEventListener(WebInspector.SidebarView.EventTypes.Resized, this.sidebarResized.bind(this));

trunk/Source/WebCore/inspector/front-end/ScriptsPanel.js

@@ -70 +70 @@
     const initialDebugSidebarWidth = 225;
     const minimumDebugSidebarWidthPercent = 50;
-    this.createSidebarView(this.element, WebInspector.SidebarView.SidebarPosition.Right, initialDebugSidebarWidth);
+    this.createSidebarView(this.element, WebInspector.SidebarView.SidebarPosition.End, initialDebugSidebarWidth);
     this.splitView.element.id = "scripts-split-view";
     this.splitView.setMinimumSidebarWidth(Preferences.minScriptsSidebarWidth);
@@ -84 +84 @@
     const initialNavigatorWidth = 225;
     const minimumViewsContainerWidthPercent = 50;
-    this.editorView = new WebInspector.SidebarView(WebInspector.SidebarView.SidebarPosition.Left, "scriptsPanelNavigatorSidebarWidth", initialNavigatorWidth);
+    this.editorView = new WebInspector.SidebarView(WebInspector.SidebarView.SidebarPosition.Start, "scriptsPanelNavigatorSidebarWidth", initialNavigatorWidth);
     this.editorView.element.tabIndex = 0;
 

trunk/Source/WebCore/inspector/front-end/Settings.js

@@ -215 +215 @@
     this.showOverridesInDrawer = this._createExperiment("showOverridesInDrawer", "Show Overrides in drawer");
     this.fileSystemProject = this._createExperiment("fileSystemProject", "File system folders in Sources Panel");
-    this.elementsPanelSingleColumn = this._createExperiment("elementsPanelSingleColumn", "Single-column elements panel layout when docked to right");
+    this.elementsPanelSingleColumn = this._createExperiment("elementsPanelSingleColumn", "Split Elements sidebar horizontally when it is too narrow");
 
     this._cleanUpSetting();

trunk/Source/WebCore/inspector/front-end/SidebarView.js

@@ -39 +39 @@
     WebInspector.SplitView.call(this, true, sidebarWidthSettingName, defaultSidebarWidth, defaultSidebarHeight);
 
-    this._leftElement = this.firstElement();
-    this._rightElement = this.secondElement();
-
     this._minimumSidebarWidth = Preferences.minSidebarWidth;
     this._minimumMainWidthPercent = 50;
@@ -48 +45 @@
     this._minimumMainHeightPercent = 50;
 
-    this._innerSetSidebarPosition(sidebarPosition || WebInspector.SidebarView.SidebarPosition.Left);
+    this._sidebarPosition = sidebarPosition || WebInspector.SidebarView.SidebarPosition.Start;
+    this.setSecondIsSidebar(this._sidebarPosition === WebInspector.SidebarView.SidebarPosition.End);
+    this._updateSidebarPosition();
 }
 
@@ -59 +58 @@
  */
 WebInspector.SidebarView.SidebarPosition = {
-    Left: "Left",
-    Right: "Right",
-    Top: "Top",
-    Bottom: "Bottom"
+    Start: "Start",
+    End: "End"
 }
 
@@ -96 +93 @@
 
     /**
-     * @param {string} sidebarPosition
-     */
-    setSidebarPosition: function(sidebarPosition)
-    {
-        if (this.sidebarPosition_ === sidebarPosition)
+     * @param {boolean} on
+     */
+    setAutoOrientation: function(on) {
+        this._autoOrientation = on;
+    },
+
+    _updateSidebarPosition: function()
+    {
+        var verticalSplit = true;
+        if (this._autoOrientation)
+            verticalSplit = this.element.offsetHeight < this.element.offsetWidth;
+
+        if (verticalSplit === this.isVertical())
             return;
 
-        this._innerSetSidebarPosition(sidebarPosition);
-    },
-
-    /**
-     * @param {string} sidebarPosition
-     */
-    _innerSetSidebarPosition: function(sidebarPosition)
-    {
-        this.sidebarPosition_ = sidebarPosition;
-
-        switch (sidebarPosition) {
-        case WebInspector.SidebarView.SidebarPosition.Left:
-            this.setSecondIsSidebar(false);
-            this._setSidebarElementStyle("split-view-sidebar-left");
-            this.setVertical(true);
-            break;
-        case WebInspector.SidebarView.SidebarPosition.Right:
-            this.setSecondIsSidebar(true);
-            this._setSidebarElementStyle("split-view-sidebar-right");
-            this.setVertical(true);
-            break;
-        case WebInspector.SidebarView.SidebarPosition.Top:
-            this.setSecondIsSidebar(false);
-            this._setSidebarElementStyle("split-view-sidebar-top");
-            this.setVertical(false);
-            break;
-        case WebInspector.SidebarView.SidebarPosition.Bottom:
-            this.setSecondIsSidebar(true);
-            this._setSidebarElementStyle("split-view-sidebar-bottom");
-            this.setVertical(false);
-            break;
+        if (this._sidebarPosition === WebInspector.SidebarView.SidebarPosition.Start) {
+            if (verticalSplit)
+                this._setSidebarElementStyle("split-view-sidebar-left");
+            else
+                this._setSidebarElementStyle("split-view-sidebar-top");
+        } else {
+            if (verticalSplit)
+                this._setSidebarElementStyle("split-view-sidebar-right");
+            else
+                this._setSidebarElementStyle("split-view-sidebar-bottom");
         }
+
+        this.setVertical(verticalSplit);
     },
 
@@ -187 +173 @@
     onResize: function()
     {
+        if (this._autoOrientation)
+            this._updateSidebarPosition();
         WebInspector.SplitView.prototype.onResize.call(this);
         this.dispatchEventToListeners(WebInspector.SidebarView.EventTypes.Resized, this.sidebarWidth());