Changeset 51952 in webkit

Timestamp:

Dec 10, 2009 10:58:39 AM (14 years ago)

Author:

bweinstein@apple.com

Message:

Fixes <​http://webkit.org/b/31738>.
Web Inspector: Console Scope Bar should be on top of console when Console is a Panel.

Reviewed by Pavel Feldman.

When the console is set to be shown as a full panel, move the scope bar to the top
where it looks best. When it is only shown as a drawer, move it to the bottom, where
it originally was. This takes up less space as a drawer, and makes it more discoverable
and usable when it is the full panel.

• inspector/front-end/ConsolePanel.js:

(WebInspector.ConsolePanel.prototype.show): Move filter bar to top.
(WebInspector.ConsolePanel.prototype.hide): Move filter bar back to bottom.

• inspector/front-end/inspector.css:

Location:

trunk/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/ConsolePanel.js (modified) (2 diffs)
• inspector/front-end/inspector.css (modified) (1 diff)

trunk/WebCore/ChangeLog

@@ +1 @@
+2009-12-09  Brian Weinstein  <bweinstein@apple.com>
+
+        Reviewed by Pavel Feldman.
+
+        Fixes <http://webkit.org/b/31738>.
+        Web Inspector: Console Scope Bar should be on top of console when Console is a Panel.
+        
+        When the console is set to be shown as a full panel, move the scope bar to the top
+        where it looks best. When it is only shown as a drawer, move it to the bottom, where
+        it originally was. This takes up less space as a drawer, and makes it more discoverable
+        and usable when it is the full panel.
+
+        * inspector/front-end/ConsolePanel.js:
+        (WebInspector.ConsolePanel.prototype.show): Move filter bar to top.
+        (WebInspector.ConsolePanel.prototype.hide): Move filter bar back to bottom.
+        * inspector/front-end/inspector.css:
+
 2009-12-10  Stephen White  <senorblanco@chromium.org>
 

trunk/WebCore/inspector/front-end/ConsolePanel.js

@@ -47 +47 @@
         WebInspector.drawer.enterPanelMode();
         WebInspector.showConsole();
+        
+        // Move the scope bar to the top of the messages, like the resources filter.
+        var scopeBar = document.getElementById("console-filter");
+        var consoleMessages = document.getElementById("console-messages");
+
+        scopeBar.parentNode.removeChild(scopeBar);
+        document.getElementById("console-view").insertBefore(scopeBar, consoleMessages);
+        
+        // Update styles, and give console-messages a top margin so it doesn't overwrite the scope bar.
+        scopeBar.addStyleClass("console-filter-top");
+        scopeBar.removeStyleClass("status-bar-item");
+
+        consoleMessages.addStyleClass("console-filter-top");
     },
 
@@ -58 +71 @@
             WebInspector.drawer.exitPanelMode();
         delete this._previousConsoleState;
+        
+        // Move the scope bar back to the bottom bar, next to Clear Console.
+        var scopeBar = document.getElementById("console-filter");
+
+        scopeBar.parentNode.removeChild(scopeBar);
+        document.getElementById("other-drawer-status-bar-items").appendChild(scopeBar);
+        
+        // Update styles, and remove the top margin on console-messages.
+        scopeBar.removeStyleClass("console-filter-top");
+        scopeBar.addStyleClass("status-bar-item");
+
+        document.getElementById("console-messages").removeStyleClass("console-filter-top");
     }
 }

trunk/WebCore/inspector/front-end/inspector.css

@@ -2419 +2419 @@
 }
 
-#resources-filter {
+#resources-filter, #console-filter.console-filter-top {
     background: -webkit-gradient(linear, left top, left bottom, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
     border-bottom: 1px solid rgb(64%, 64%, 64%);
+    width: 100%;
+}
+
+#console-messages.console-filter-top {
+    margin-top: 23px;
 }