2011-02-22 Andrey Kosyakov <caseq@chromium.org>
authorcaseq@chromium.org <caseq@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 22 Feb 2011 12:16:42 +0000 (12:16 +0000)
committercaseq@chromium.org <caseq@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 22 Feb 2011 12:16:42 +0000 (12:16 +0000)
        Reviewed by Pavel Feldman.

        Web Inspector: provide a button to expand inspector toolbar when not all panel buttons fit
        https://bugs.webkit.org/show_bug.cgi?id=54671

        - factored toolbar handling out of inspector.js
        - added toolbar dropdown

        * WebCore.gypi:
        * WebCore.vcproj/WebCore.vcproj:
        * inspector/front-end/ExtensionServer.js:
        (WebInspector.ExtensionServer.prototype._onCreatePanel):
        * inspector/front-end/Panel.js:
        (WebInspector.Panel.prototype.get toolbarItem):
        * inspector/front-end/Toolbar.js: Added.
        (WebInspector.Toolbar):
        (WebInspector.Toolbar.prototype.resize):
        (WebInspector.Toolbar.prototype.addPanel):
        (WebInspector.Toolbar.prototype._toolbarDragStart):
        (WebInspector.Toolbar.prototype._toolbarDragEnd):
        (WebInspector.Toolbar.prototype._toolbarDrag):
        (WebInspector.Toolbar.prototype._onClose):
        (WebInspector.Toolbar.prototype._setDropdownVisible):
        (WebInspector.Toolbar.prototype._toggleDropdown):
        (WebInspector.Toolbar.prototype._updateDropdownButtonAndHideDropdown):
        (WebInspector.Toolbar.createPanelToolbarItem.onToolbarItemClicked):
        (WebInspector.Toolbar.createPanelToolbarItem):
        (WebInspector.ToolbarDropdown):
        (WebInspector.ToolbarDropdown.prototype.show):
        (WebInspector.ToolbarDropdown.prototype.hide):
        (WebInspector.ToolbarDropdown.prototype.get visible):
        (WebInspector.ToolbarDropdown.prototype._populate):
        (WebInspector.ToolbarDropdown.prototype._onKeyDown):
        * inspector/front-end/WebKit.qrc:
        * inspector/front-end/inspector.css:
        (#toolbar):
        (.toolbar-item):
        (.toolbar-item.toggleable):
        (.toolbar-item.toggleable.toggled-on):
        (#toolbar-dropdown .toolbar-icon):
        (#toolbar-dropdown .toolbar-label):
        (#toolbar-controls):
        (#toolbar-dropdown-arrow):
        (body.attached #toolbar-dropdown-arrow):
        (#toolbar-dropdown-arrow.dropdown-visible):
        (#toolbar-dropdown-arrow:hover):
        (#toolbar-dropdown-arrow:active):
        (#toolbar-dropdown):
        (body.detached.platform-mac-snowleopard #toolbar-dropdown):
        (#toolbar-dropdown .scrollable-content):
        (#toolbar-dropdown .toolbar-item):
        (#toolbar-dropdown .toolbar-item.toggleable.toggled-on):
        (#toolbar-dropdown .toolbar-icon):
        (#toolbar-dropdown .toolbar-label):
        (#toolbar-controls):
        (#toolbar-dropdown-arrow):
        (body.attached #toolbar-dropdown-arrow):
        (#toolbar-dropdown-arrow.dropdown-visible):
        (#toolbar-dropdown-arrow:hover):
        (#toolbar-dropdown-arrow:active):
        (#toolbar-dropdown):
        (body.detached.platform-mac-snowleopard #toolbar-dropdown):
        (#toolbar-dropdown .scrollable-content):
        (#toolbar-dropdown .toolbar-item):
        (#toolbar-dropdown .toolbar-item.toggleable.toggled-on):
        (#toolbar-dropdown .toolbar-item:hover):
        (#toolbar-dropdown .toolbar-item.toggleable.toggled-on:hover):
        (#toolbar-dropdown .toolbar-item:active .toolbar-icon):
        (.scrollable-content):
        (.scrollable-content::-webkit-scrollbar):
        (.scrollable-content::-webkit-resizer):
        (.scrollable-content::-webkit-scrollbar-thumb:vertical):
        (.scrollable-content::-webkit-scrollbar-thumb:vertical:active):
        (.scrollable-content::-webkit-scrollbar-track:vertical):
        (.toolbar-search-item):
        (#search):
        (body.attached #search):
        (#search-results-matches):
        (#close-button-left, #close-button-right):
        (.close-left):
        * inspector/front-end/inspector.html:
        * inspector/front-end/inspector.js:
        (WebInspector.set attached):
        (WebInspector.addPanel):
        (WebInspector.windowResize):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@79306 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/WebCore.gypi
Source/WebCore/WebCore.vcproj/WebCore.vcproj
Source/WebCore/inspector/front-end/ExtensionServer.js
Source/WebCore/inspector/front-end/Panel.js
Source/WebCore/inspector/front-end/Toolbar.js [new file with mode: 0755]
Source/WebCore/inspector/front-end/WebKit.qrc
Source/WebCore/inspector/front-end/inspector.css
Source/WebCore/inspector/front-end/inspector.html
Source/WebCore/inspector/front-end/inspector.js

index 3bd3d86..d2c37ed 100644 (file)
@@ -1,3 +1,78 @@
+2011-02-22  Andrey Kosyakov  <caseq@chromium.org>
+
+        Reviewed by Pavel Feldman.
+
+        Web Inspector: provide a button to expand inspector toolbar when not all panel buttons fit
+        https://bugs.webkit.org/show_bug.cgi?id=54671
+
+        - factored toolbar handling out of inspector.js
+        - added toolbar dropdown
+
+        * WebCore.gypi:
+        * WebCore.vcproj/WebCore.vcproj:
+        * inspector/front-end/ExtensionServer.js:
+        (WebInspector.ExtensionServer.prototype._onCreatePanel):
+        * inspector/front-end/Panel.js:
+        (WebInspector.Panel.prototype.get toolbarItem):
+        * inspector/front-end/Toolbar.js: Added.
+        (WebInspector.Toolbar):
+        (WebInspector.Toolbar.prototype.resize):
+        (WebInspector.Toolbar.prototype.addPanel):
+        (WebInspector.Toolbar.prototype._toolbarDragStart):
+        (WebInspector.Toolbar.prototype._toolbarDragEnd):
+        (WebInspector.Toolbar.prototype._toolbarDrag):
+        (WebInspector.Toolbar.prototype._onClose):
+        (WebInspector.Toolbar.prototype._setDropdownVisible):
+        (WebInspector.Toolbar.prototype._toggleDropdown):
+        (WebInspector.Toolbar.prototype._updateDropdownButtonAndHideDropdown):
+        (WebInspector.Toolbar.createPanelToolbarItem.onToolbarItemClicked):
+        (WebInspector.Toolbar.createPanelToolbarItem):
+        (WebInspector.ToolbarDropdown):
+        (WebInspector.ToolbarDropdown.prototype.show):
+        (WebInspector.ToolbarDropdown.prototype.hide):
+        (WebInspector.ToolbarDropdown.prototype.get visible):
+        (WebInspector.ToolbarDropdown.prototype._populate):
+        (WebInspector.ToolbarDropdown.prototype._onKeyDown):
+        * inspector/front-end/WebKit.qrc:
+        * inspector/front-end/inspector.css:
+        (#toolbar):
+        (.toolbar-item):
+        (.toolbar-item.toggleable):
+        (.toolbar-item.toggleable.toggled-on):
+        (#toolbar-dropdown .toolbar-icon):
+        (#toolbar-dropdown .toolbar-label):
+        (#toolbar-controls):
+        (#toolbar-dropdown-arrow):
+        (body.attached #toolbar-dropdown-arrow):
+        (#toolbar-dropdown-arrow.dropdown-visible):
+        (#toolbar-dropdown-arrow:hover):
+        (#toolbar-dropdown-arrow:active):
+        (#toolbar-dropdown):
+        (body.detached.platform-mac-snowleopard #toolbar-dropdown):
+        (#toolbar-dropdown .scrollable-content):
+        (#toolbar-dropdown .toolbar-item):
+        (#toolbar-dropdown .toolbar-item.toggleable.toggled-on):
+        (#toolbar-dropdown .toolbar-item:hover):
+        (#toolbar-dropdown .toolbar-item.toggleable.toggled-on:hover):
+        (#toolbar-dropdown .toolbar-item:active .toolbar-icon):
+        (.scrollable-content):
+        (.scrollable-content::-webkit-scrollbar):
+        (.scrollable-content::-webkit-resizer):
+        (.scrollable-content::-webkit-scrollbar-thumb:vertical):
+        (.scrollable-content::-webkit-scrollbar-thumb:vertical:active):
+        (.scrollable-content::-webkit-scrollbar-track:vertical):
+        (.toolbar-search-item):
+        (#search):
+        (body.attached #search):
+        (#search-results-matches):
+        (#close-button-left, #close-button-right):
+        (.close-left):
+        * inspector/front-end/inspector.html:
+        * inspector/front-end/inspector.js:
+        (WebInspector.set attached):
+        (WebInspector.addPanel):
+        (WebInspector.windowResize):
+
 2011-02-22  Philippe Normand  <pnormand@igalia.com>
 
         Reviewed by Xan Lopez.
index f7ea906..064d74f 100644 (file)
             'inspector/front-end/TimelineOverviewPane.js',
             'inspector/front-end/TimelineGrid.js',
             'inspector/front-end/TimelinePanel.js',
+            'inspector/front-end/Toolbar.js',
             'inspector/front-end/TopDownProfileDataGridTree.js',
             'inspector/front-end/treeoutline.js',
             'inspector/front-end/utilities.js',
index f310288..f54c265 100755 (executable)
                                        >
                                </File>
                                <File
+                                       RelativePath="..\inspector\front-end\Toolbar.js"
+                                       >
+                               </File>
+                               <File
                                        RelativePath="..\inspector\front-end\TopDownProfileDataGridTree.js"
                                        >
                                </File>
index ba30f73..ca2e856 100644 (file)
@@ -176,13 +176,12 @@ WebInspector.ExtensionServer.prototype = {
         // shouldn't be hit unless someone is bypassing the API.
         if (id in this._clientObjects || id in WebInspector.panels)
             return this._status.E_EXISTS(id);
+
         var panel = new WebInspector.ExtensionPanel(id, message.title, message.icon);
         this._clientObjects[id] = panel;
-
-        var toolbarElement = document.getElementById("toolbar");
-        var lastToolbarItem = WebInspector.panelOrder[WebInspector.panelOrder.length - 1].toolbarItem;
-        WebInspector.addPanelToolbarIcon(toolbarElement, panel, lastToolbarItem);
         WebInspector.panels[id] = panel;
+        WebInspector.addPanel(panel);
+
         var iframe = this._createClientIframe(panel.element, message.url);
         iframe.style.height = "100%";
         return this._status.OK();
index 4c42a60..758c56d 100644 (file)
@@ -46,29 +46,7 @@ WebInspector.Panel.prototype = {
         if (this._toolbarItem)
             return this._toolbarItem;
 
-        // Sample toolbar item as markup:
-        // <button class="toolbar-item resources toggleable">
-        // <div class="toolbar-icon"></div>
-        // <div class="toolbar-label">Resources</div>
-        // </button>
-
-        this._toolbarItem = document.createElement("button");
-        this._toolbarItem.className = "toolbar-item toggleable";
-        this._toolbarItem.panel = this;
-
-        this._toolbarItem.addStyleClass(this._panelName);
-
-        var iconElement = document.createElement("div");
-        iconElement.className = "toolbar-icon";
-        this._toolbarItem.appendChild(iconElement);
-
-        if ("toolbarItemLabel" in this) {
-            var labelElement = document.createElement("div");
-            labelElement.className = "toolbar-label";
-            labelElement.textContent = this.toolbarItemLabel;
-            this._toolbarItem.appendChild(labelElement);
-        }
-
+        this._toolbarItem = WebInspector.Toolbar.createPanelToolbarItem(this);
         return this._toolbarItem;
     },
 
diff --git a/Source/WebCore/inspector/front-end/Toolbar.js b/Source/WebCore/inspector/front-end/Toolbar.js
new file mode 100755 (executable)
index 0000000..d1cc9a6
--- /dev/null
@@ -0,0 +1,220 @@
+ /*
+ * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
+ * Copyright (C) 2007 Matt Lilek (pewtermoose@gmail.com).
+ * Copyright (C) 2009 Joseph Pecoraro
+ * Copyright (C) 2011 Google Inc. All rights reserved.
+ *
+ * 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
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Toolbar = function()
+{
+    this.element = document.getElementById("toolbar");
+    this.element.addEventListener("mousedown", this._toolbarDragStart.bind(this), true);
+
+    this._dropdownButton = document.getElementById("toolbar-dropdown-arrow");
+    this._dropdownButton.addEventListener("click", this._toggleDropdown.bind(this), false);
+
+    document.getElementById("close-button-left").addEventListener("click", this._onClose, true);
+    document.getElementById("close-button-right").addEventListener("click", this._onClose, true);
+}
+
+WebInspector.Toolbar.prototype = {
+    resize: function()
+    {
+        this._updateDropdownButtonAndHideDropdown();
+    },
+
+    addPanel: function(panel)
+    {
+        this.element.appendChild(panel.toolbarItem);
+        this.resize();
+    },
+
+    _toolbarDragStart: function(event)
+    {
+        if ((!WebInspector.attached && WebInspector.platformFlavor !== WebInspector.PlatformFlavor.MacLeopard && WebInspector.platformFlavor !== WebInspector.PlatformFlavor.MacSnowLeopard) || WebInspector.port == "qt")
+            return;
+
+        var target = event.target;
+        if (target.hasStyleClass("toolbar-item") && target.hasStyleClass("toggleable"))
+            return;
+
+        if (target !== this.element && !target.hasStyleClass("toolbar-item"))
+            return;
+
+        this.element.lastScreenX = event.screenX;
+        this.element.lastScreenY = event.screenY;
+
+        WebInspector.elementDragStart(this.element, this._toolbarDrag.bind(this), this._toolbarDragEnd.bind(this), event, (WebInspector.attached ? "row-resize" : "default"));
+    },
+
+    _toolbarDragEnd: function(event)
+    {
+        WebInspector.elementDragEnd(event);
+
+        delete this.element.lastScreenX;
+        delete this.element.lastScreenY;
+    },
+
+    _toolbarDrag: function(event)
+    {
+        if (WebInspector.attached) {
+            var height = window.innerHeight - (event.screenY - this.element.lastScreenY);
+
+            InspectorFrontendHost.setAttachedWindowHeight(height);
+        } else {
+            var x = event.screenX - this.element.lastScreenX;
+            var y = event.screenY - this.element.lastScreenY;
+
+            // We cannot call window.moveBy here because it restricts the movement
+            // of the window at the edges.
+            InspectorFrontendHost.moveWindowBy(x, y);
+        }
+
+        this.element.lastScreenX = event.screenX;
+        this.element.lastScreenY = event.screenY;
+
+        event.preventDefault();
+    },
+
+    _onClose: function()
+    {
+        WebInspector.close();
+    },
+
+    _setDropdownVisible: function(visible)
+    {
+        if (!this._dropdown) {
+            if (!visible)
+                return;
+            this._dropdown = new WebInspector.ToolbarDropdown();
+        }
+        if (visible)
+            this._dropdown.show();
+        else
+            this._dropdown.hide();
+    },
+
+    _toggleDropdown: function()
+    {
+        this._setDropdownVisible(!this._dropdown || !this._dropdown.visible);
+    },
+
+    _updateDropdownButtonAndHideDropdown: function()
+    {
+        this._setDropdownVisible(false);
+
+        var toolbar = document.getElementById("toolbar");
+        if (this.element.scrollHeight > this.element.clientHeight)
+            this._dropdownButton.removeStyleClass("hidden");
+        else
+            this._dropdownButton.addStyleClass("hidden");
+    }
+};
+
+WebInspector.Toolbar.createPanelToolbarItem = function(panel)
+{
+    var toolbarItem = document.createElement("button");
+    toolbarItem.className = "toolbar-item toggleable";
+    toolbarItem.panel = panel;
+    toolbarItem.addStyleClass(panel._panelName);
+    function onToolbarItemClicked()
+    {
+        WebInspector.toolbar._updateDropdownButtonAndHideDropdown();
+        WebInspector.currentPanel = panel;
+    }
+    toolbarItem.addEventListener("click", onToolbarItemClicked);
+
+    var iconElement = toolbarItem.createChild("div", "toolbar-icon");
+
+    if ("toolbarItemLabel" in panel)
+        toolbarItem.createChild("div", "toolbar-label").textContent = panel.toolbarItemLabel;
+
+    if (panel === WebInspector.currentPanel)
+        toolbarItem.addStyleClass("toggled-on");
+
+    return toolbarItem;
+}
+
+WebInspector.ToolbarDropdown = function()
+{
+    this._toolbar = document.getElementById("toolbar");
+    this._arrow = document.getElementById("toolbar-dropdown-arrow");
+    this.element = document.createElement("div");
+    this.element.id = "toolbar-dropdown";
+    this._contentElement = this.element.createChild("div", "scrollable-content");
+    this._contentElement.tabIndex = 0;
+    this._contentElement.addEventListener("keydown", this._onKeyDown.bind(this), true);
+}
+
+WebInspector.ToolbarDropdown.prototype = {
+    show: function()
+    {
+        if (this.visible)
+            return;
+        var style = this.element.style;
+        this._populate();
+        var top = this._arrow.totalOffsetTop + this._arrow.clientHeight;
+        this._arrow.addStyleClass("dropdown-visible");
+        this.element.style.top = top + "px";
+        this.element.style.left = this._arrow.totalOffsetLeft + "px";
+        this._contentElement.style.maxHeight = window.innerHeight - top - 20 + "px";
+        this._toolbar.appendChild(this.element);
+        WebInspector.currentFocusElement = this.contentElement;
+    },
+
+    hide: function()
+    {
+        if (!this.visible)
+            return;
+        this._arrow.removeStyleClass("dropdown-visible");
+        this.element.parentNode.removeChild(this.element);
+        this._contentElement.removeChildren();
+    },
+
+    get visible()
+    {
+        return !!this.element.parentNode;
+    },
+
+    _populate: function()
+    {
+        var toolbarItems = this._toolbar.querySelectorAll(".toolbar-item.toggleable");
+
+        for (var i = 0; i < toolbarItems.length; ++i) {
+            if (toolbarItems[i].offsetTop > 0)
+                this._contentElement.appendChild(WebInspector.Toolbar.createPanelToolbarItem(toolbarItems[i].panel));
+        }
+    },
+
+    _onKeyDown: function(event)
+    {
+        if (event.keyCode !== WebInspector.KeyboardShortcut.Keys.Esc.code)
+            return;
+        event.stopPropagation();
+        this.hide();
+    }
+};
index bbdff9c..bbfbeca 100644 (file)
     <file>TimelineGrid.js</file>
     <file>TimelineOverviewPane.js</file>
     <file>TimelinePanel.js</file>
+    <file>Toolbar.js</file>
     <file>TopDownProfileDataGridTree.js</file>
     <file>treeoutline.js</file>
     <file>utilities.js</file>
index c992806..a7bd3b3 100644 (file)
@@ -76,7 +76,6 @@ img {
     left: 0;
     right: 0;
     height: 56px;
-    display: -webkit-box;
     padding: 0 5px;
     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(191, 191, 191)), to(rgb(151, 151, 151)));
     border-bottom: 1px solid rgb(80, 80, 80);
@@ -111,32 +110,23 @@ body.attached.inactive #toolbar {
 }
 
 .toolbar-item {
-    display: -webkit-box;
-    padding: 4px 6px;
     margin: 0;
+    padding: 0 6px;
     background-color: transparent;
     border-style: none;
     border-color: transparent;
-    -webkit-box-orient: vertical;
-    -webkit-box-align: center;
-    -webkit-box-pack: end;
+}
+
+.toolbar-item.toggleable {
+    padding-top: 4px;
 }
 
 .toolbar-item.toggleable.toggled-on {
     border-width: 0 2px 0 2px;
-    padding: 4px 4px;
+    padding: 4px 4px 0 4px;
     -webkit-border-image: url(Images/toolbarItemSelected.png) 0 2 0 2;
 }
 
-.toolbar-item.flexable-space {
-    -webkit-box-flex: 1;
-    visibility: hidden;
-}
-
-.toolbar-item input {
-    margin-bottom: 8px;
-}
-
 .toolbar-icon {
     display: inline-block;
     width: 32px;
@@ -144,7 +134,8 @@ body.attached.inactive #toolbar {
     -webkit-background-size: 100% auto;
 }
 
-body.attached .toolbar-icon {
+body.attached .toolbar-icon,
+#toolbar-dropdown .toolbar-icon {
     width: 24px;
     height: 24px;
     vertical-align: middle;
@@ -168,9 +159,9 @@ body.attached .toolbar-item:active .toolbar-icon {
     text-shadow: none;
 }
 
-body.attached .toolbar-label {
+body.attached .toolbar-label,
+#toolbar-dropdown .toolbar-label {
     display: inline-block;
-    vertical-align: middle;
     margin-left: 3px;
 }
 
@@ -178,25 +169,145 @@ body.attached #search-toolbar-label {
     display: none;
 }
 
+#toolbar-controls {
+    float: right;
+    display: -webkit-box;
+    -webkit-box-align: center;
+    height: 100%;
+}
+
+#toolbar-dropdown-arrow {
+    font-size: 16px;
+    font-weight: bold;
+    border: 0;
+    background-color: transparent;
+    -webkit-border-radius: 5px;
+    text-shadow: none;
+}
+
+body.attached #toolbar-dropdown-arrow {
+    font-size: 14px;
+    padding-bottom: 4px;
+}
+
+#toolbar-dropdown-arrow.dropdown-visible {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(251, 251, 251, 0.9)), to(rgba(231, 231, 231, 0.9)));
+}
+
+#toolbar-dropdown-arrow:hover {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(191, 191, 191, 0.7)), to(rgba(171, 171, 171, 0.5)));
+}
+
+#toolbar-dropdown-arrow:active {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(111, 111, 111, 0.8)), to(rgba(91, 91, 91, 0.8)));
+}
+
+#toolbar-dropdown {
+    position: absolute;
+    z-index: 1000;
+    -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
+    border: 1px solid rgb(128, 128, 128);
+    padding: 4px;
+    background-color: inherit;
+    background-image: inherit;
+}
+
+body.detached.platform-mac-leopard #toolbar-dropdown,
+body.detached.platform-mac-snowleopard #toolbar-dropdown {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(191, 191, 191)), to(rgb(151, 151, 151)));
+}
+
+#toolbar-dropdown .scrollable-content {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-box-align: start;
+}
+
+#toolbar-dropdown .toolbar-item {
+    display: -webkit-box;
+    -webkit-box-orient: horizontal;
+    margin: 0px 2px;
+    padding: 4px;
+    width: 100%;
+    border: 1px solid rgba(0, 0, 0, 0);
+}
+
+#toolbar-dropdown .toolbar-item.toggleable.toggled-on {
+    border: 1px solid rgba(100, 100, 120, 0.4);
+    -webkit-border-image: none;
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(128, 128, 128, 0.6)), to(rgba(128, 128, 128, 0.6)), color-stop(20%, rgba(158, 158, 158, 0.2)), color-stop(80%, rgba(158, 158, 158, 0.2)));
+}
+
+#toolbar-dropdown .toolbar-item:hover {
+    -webkit-border-image: none;
+    border: 1px solid rgba(100, 100, 120, 0.8);
+}
+
+#toolbar-dropdown .toolbar-item.toggleable.toggled-on:hover {
+    border: 1px solid rgba(100, 100, 120, 1);
+}
+
+#toolbar-dropdown .toolbar-icon {
+    margin-right: 0.5em;
+}
+
+#toolbar-dropdown .toolbar-item:active .toolbar-icon {
+    background-position: 0 24px;
+}
+
+.scrollable-content {
+    position: static;
+    height: 100%;
+    overflow-y: auto;
+    width: 100%;
+    margin-right: 12px;
+    padding-right: 3px;
+}
+
+.scrollable-content::-webkit-scrollbar {
+    width: 11px;
+}
+
+.scrollable-content::-webkit-scrollbar-corner,
+.scrollable-content::-webkit-resizer {
+    display: none;
+}
+
+.scrollable-content::-webkit-scrollbar-thumb:vertical {
+    background: -webkit-gradient(linear, left top, right top, from(rgb(192, 192, 192)), to(rgb(192, 192, 192)), color-stop(40%, rgb(214, 214, 214)));
+    border-radius: 5px;
+    min-height: 20px;
+}
+
+.scrollable-content::-webkit-scrollbar-thumb:vertical:hover,
+.scrollable-content::-webkit-scrollbar-thumb:vertical:active {
+    background: -webkit-gradient(linear, left top, right top, from(rgb(230, 230, 230)), to(rgb(230, 230, 230)), color-stop(40%, rgb(252, 252, 252)));
+}
+
+.scrollable-content::-webkit-scrollbar-track:vertical {
+    background: -webkit-gradient(linear, left top, right top, from(rgb(128, 128, 128)), to(rgb(164, 164, 164)), color-stop(25%, rgb(164, 164, 164)));
+    border-radius: 5px;
+}
+
+.toolbar-search-item {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-box-align: center;
+    -webkit-box-pack: end;
+}
+
 #search {
     width: 205px;
     font-size: 16px;
-    margin-bottom: 5px;
 }
 
 body.attached #search {
     font-size: 11px;
-    margin-bottom: 8px;
 }
 
 #search-results-matches {
     font-size: 11px;
     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-    margin-bottom: 22px;
-}
-
-body.attached #search-results-matches {
-    margin-bottom: 6px;
 }
 
 .toolbar-item.elements .toolbar-icon {
@@ -238,7 +349,7 @@ body.attached #search-results-matches {
     background-position: 0 0;
     background-color: transparent;
     border: 0 none transparent;
-    margin: 5px 0;
+    margin-top: 9px;
 }
 
 #close-button-left:hover, #close-button-right:hover {
@@ -249,6 +360,10 @@ body.attached #search-results-matches {
     background-position: 28px 0;
 }
 
+.close-left {
+    float: left;
+}
+
 body.detached .toolbar-item.close-left, body.detached .toolbar-item.close-right {
     display: none;
 }
index 55b32fd..9a2aa65 100644 (file)
@@ -155,14 +155,17 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     <script type="text/javascript" src="ShortcutsHelp.js"></script>
     <script type="text/javascript" src="HAREntry.js"></script>
     <script type="text/javascript" src="CookieParser.js"></script>
+    <script type="text/javascript" src="Toolbar.js"></script>
 </head>
 <body class="detached">
     <div id="toolbar">
         <div class="toolbar-item close-left"><button id="close-button-left"></button></div>
-        <div class="toolbar-item flexable-space"></div>
-        <div class="toolbar-item hidden" id="search-results-matches"></div>
-        <div class="toolbar-item"><input id="search" type="search" incremental results="0"><div id="search-toolbar-label" class="toolbar-label"></div></div>
-        <div class="toolbar-item close-right"><button id="close-button-right"></button></div>
+        <div id="toolbar-controls">
+            <div class="toolbar-item"><button id="toolbar-dropdown-arrow" class="toolbar-label">&raquo;</button></div>
+            <div class="toolbar-item hidden" id="search-results-matches"></div>
+            <div class="toolbar-item toolbar-search-item"><input id="search" type="search" incremental results="0"><div id="search-toolbar-label" class="toolbar-label"></div></div>
+            <div class="toolbar-item close-right"><button id="close-button-right"></button></div>
+        </div>
     </div>
     <div id="main">
         <div id="main-panels" spellcheck="false"></div>
index 62868e9..16aae1e 100644 (file)
@@ -264,6 +264,8 @@ var WebInspector = {
         }
         if (this.drawer)
             this.drawer.resize();
+        if (this.toolbar)
+            this.toolbar.resize();
     },
 
     get errors()
@@ -496,13 +498,11 @@ WebInspector.doLoadedDone = function()
     this.panels = {};
     this._createPanels();
     this._panelHistory = new WebInspector.PanelHistory();
-
-    var toolbarElement = document.getElementById("toolbar");
-    var previousToolbarItem = toolbarElement.children[0];
+    this.toolbar = new WebInspector.Toolbar();
 
     this.panelOrder = [];
     for (var panelName in this.panels)
-        previousToolbarItem = WebInspector.addPanelToolbarIcon(toolbarElement, this.panels[panelName], previousToolbarItem);
+        this.addPanel(this.panels[panelName]);
 
     this.Tips = {
         ResourceNotCompressed: {id: 0, message: WebInspector.UIString("You could save bandwidth by having your web server compress this transfer with gzip or zlib.")}
@@ -539,10 +539,6 @@ WebInspector.doLoadedDone = function()
     searchField.addEventListener("mousedown", this._searchFieldManualFocus.bind(this), false); // when the search field is manually selected
     searchField.addEventListener("keydown", this._searchKeyDown.bind(this), true);
 
-    toolbarElement.addEventListener("mousedown", this.toolbarDragStart, true);
-    document.getElementById("close-button-left").addEventListener("click", this.close, true);
-    document.getElementById("close-button-right").addEventListener("click", this.close, true);
-
     this.extensionServer.initExtensions();
 
     function onPopulateScriptObjects()
@@ -569,16 +565,10 @@ WebInspector.doLoadedDone = function()
     CSSAgent.getSupportedCSSProperties(propertyNamesCallback);
 }
 
-WebInspector.addPanelToolbarIcon = function(toolbarElement, panel, previousToolbarItem)
+WebInspector.addPanel = function(panel)
 {
-    var panelToolbarItem = panel.toolbarItem;
     this.panelOrder.push(panel);
-    panelToolbarItem.addEventListener("click", this._toolbarItemClicked.bind(this));
-    if (previousToolbarItem)
-        toolbarElement.insertBefore(panelToolbarItem, previousToolbarItem.nextSibling);
-    else
-        toolbarElement.insertBefore(panelToolbarItem, toolbarElement.firstChild);
-    return panelToolbarItem;
+    this.toolbar.addPanel(panel);
 }
 
 var windowLoaded = function()
@@ -621,6 +611,7 @@ WebInspector.windowResize = function(event)
     if (this.currentPanel)
         this.currentPanel.resize();
     this.drawer.resize();
+    this.toolbar.resize();
 }
 
 WebInspector.windowFocused = function(event)
@@ -1034,58 +1025,6 @@ WebInspector.toggleAttach = function()
         InspectorFrontendHost.requestDetachWindow();
 }
 
-WebInspector.toolbarDragStart = function(event)
-{
-    if ((!WebInspector.attached && WebInspector.platformFlavor !== WebInspector.PlatformFlavor.MacLeopard && WebInspector.platformFlavor !== WebInspector.PlatformFlavor.MacSnowLeopard) || WebInspector.port == "qt")
-        return;
-
-    var target = event.target;
-    if (target.hasStyleClass("toolbar-item") && target.hasStyleClass("toggleable"))
-        return;
-
-    var toolbar = document.getElementById("toolbar");
-    if (target !== toolbar && !target.hasStyleClass("toolbar-item"))
-        return;
-
-    toolbar.lastScreenX = event.screenX;
-    toolbar.lastScreenY = event.screenY;
-
-    WebInspector.elementDragStart(toolbar, WebInspector.toolbarDrag, WebInspector.toolbarDragEnd, event, (WebInspector.attached ? "row-resize" : "default"));
-}
-
-WebInspector.toolbarDragEnd = function(event)
-{
-    var toolbar = document.getElementById("toolbar");
-
-    WebInspector.elementDragEnd(event);
-
-    delete toolbar.lastScreenX;
-    delete toolbar.lastScreenY;
-}
-
-WebInspector.toolbarDrag = function(event)
-{
-    var toolbar = document.getElementById("toolbar");
-
-    if (WebInspector.attached) {
-        var height = window.innerHeight - (event.screenY - toolbar.lastScreenY);
-
-        InspectorFrontendHost.setAttachedWindowHeight(height);
-    } else {
-        var x = event.screenX - toolbar.lastScreenX;
-        var y = event.screenY - toolbar.lastScreenY;
-
-        // We cannot call window.moveBy here because it restricts the movement
-        // of the window at the edges.
-        InspectorFrontendHost.moveWindowBy(x, y);
-    }
-
-    toolbar.lastScreenX = event.screenX;
-    toolbar.lastScreenY = event.screenY;
-
-    event.preventDefault();
-}
-
 WebInspector.elementDragStart = function(element, dividerDrag, elementDragEnd, event, cursor)
 {
     if (this._elementDraggingEventListener || this._elementEndDraggingEventListener)