webkitgtk-2.16.5HEADwebkitgtk-2.16.5master

1 files changed, 259 insertions, 0 deletions

diff --git a/Source/WebInspectorUI/UserInterface/Views/Toolbar.js b/Source/WebInspectorUI/UserInterface/Views/Toolbar.js
new file mode 100644
index 000000000..580d9ef66
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Toolbar.js
@@ -0,0 +1,259 @@
+/*
+ * Copyright (C) 2013, 2015 Apple 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.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. 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 INC. 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 = class Toolbar extends WebInspector.NavigationBar
+{
+    constructor(element, navigationItems, dontAllowModeChanges)
+    {
+        super(element, navigationItems, "toolbar");
+
+        this.displayMode = WebInspector.Toolbar.DisplayMode.IconAndLabelVertical;
+        this.sizeMode = WebInspector.Toolbar.SizeMode.Normal;
+
+        this._controlSectionElement = document.createElement("div");
+        this._controlSectionElement.className = WebInspector.Toolbar.ControlSectionStyleClassName;
+        this.element.appendChild(this._controlSectionElement);
+
+        this._leftSectionElement = document.createElement("div");
+        this._leftSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.LeftItemSectionStyleClassName;
+        this.element.appendChild(this._leftSectionElement);
+
+        this._centerLeftSectionElement = document.createElement("div");
+        this._centerLeftSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.CenterLeftItemSectionStyleClassName;
+        this.element.appendChild(this._centerLeftSectionElement);
+
+        this._centerSectionElement = document.createElement("div");
+        this._centerSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.CenterItemSectionStyleClassName;
+        this.element.appendChild(this._centerSectionElement);
+
+        this._centerRightSectionElement = document.createElement("div");
+        this._centerRightSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.CenterRightItemSectionStyleClassName;
+        this.element.appendChild(this._centerRightSectionElement);
+
+        this._rightSectionElement = document.createElement("div");
+        this._rightSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.RightItemSectionStyleClassName;
+        this.element.appendChild(this._rightSectionElement);
+
+        if (!dontAllowModeChanges)
+            this.element.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), false);
+    }
+
+    // Public
+
+    get displayMode()
+    {
+        return this._displayMode;
+    }
+
+    set displayMode(mode)
+    {
+        if (mode === this._displayMode)
+            return;
+
+        if (this._displayMode)
+            this.element.classList.remove(this._displayMode);
+
+        // Revert the forced icon-only mode if it was applied.
+        if (this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal)
+            this.element.classList.remove(WebInspector.Toolbar.DisplayMode.IconOnly);
+
+        this._displayMode = mode;
+
+        this.element.classList.add(mode);
+
+        this.updateLayout();
+
+        this.dispatchEventToListeners(WebInspector.Toolbar.Event.DisplayModeDidChange);
+    }
+
+    get sizeMode()
+    {
+        return this._sizeMode;
+    }
+
+    set sizeMode(mode)
+    {
+        if (mode === this._sizeMode)
+            return;
+
+        if (this._sizeMode)
+            this.element.classList.remove(this._sizeMode);
+
+        this._sizeMode = mode;
+
+        this.element.classList.add(mode);
+
+        this.updateLayout();
+
+        this.dispatchEventToListeners(WebInspector.Toolbar.Event.SizeModeDidChange);
+    }
+
+    addToolbarItem(toolbarItem, sectionIdentifier)
+    {
+        var sectionElement;
+
+        switch (sectionIdentifier) {
+        case WebInspector.Toolbar.Section.Control:
+            sectionElement = this._controlSectionElement;
+            break;
+
+        case WebInspector.Toolbar.Section.Left:
+            sectionElement = this._leftSectionElement;
+            break;
+
+        case WebInspector.Toolbar.Section.CenterLeft:
+            sectionElement = this._centerLeftSectionElement;
+            break;
+
+        default:
+        case WebInspector.Toolbar.Section.Center:
+            sectionElement = this._centerSectionElement;
+            break;
+
+        case WebInspector.Toolbar.Section.CenterRight:
+            sectionElement = this._centerRightSectionElement;
+            break;
+
+        case WebInspector.Toolbar.Section.Right:
+            sectionElement = this._rightSectionElement;
+            break;
+        }
+
+        console.assert(sectionElement);
+
+        this.addNavigationItem(toolbarItem, sectionElement);
+    }
+
+    // Protected
+
+    layout()
+    {
+        // Bail early if our sections are not created yet. This means we are being called during construction.
+        if (!this._leftSectionElement || !this._centerSectionElement || !this._rightSectionElement)
+            return;
+
+        // Force collapsed style for JavaScript debuggables.
+        if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript) {
+            this.element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
+            return;
+        }
+
+        // Remove the collapsed style class to test if the items can fit at full width.
+        this.element.classList.remove(WebInspector.NavigationBar.CollapsedStyleClassName);
+
+        // Revert the forced icon-only mode if it was applied.
+        if (this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal) {
+            this.element.classList.remove(WebInspector.Toolbar.DisplayMode.IconOnly);
+            this.element.classList.add(WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
+        }
+
+        function isOverflowingToolbar()
+        {
+            var controlSectionWidth = this._controlSectionElement.realOffsetWidth;
+            var leftSectionWidth = this._leftSectionElement.realOffsetWidth;
+            var centerLeftSectionWidth = this._centerLeftSectionElement.realOffsetWidth;
+            var centerSectionWidth = this._centerSectionElement.realOffsetWidth;
+            var centerRightSectionWidth = this._centerRightSectionElement.realOffsetWidth;
+            var rightSectionWidth = this._rightSectionElement.realOffsetWidth;
+
+            var toolbarWidth = Math.round(this.element.realOffsetWidth);
+            return Math.round(controlSectionWidth + leftSectionWidth + centerLeftSectionWidth + centerSectionWidth + centerRightSectionWidth + rightSectionWidth) > toolbarWidth;
+        }
+
+        // Only the horizontal display mode supports collapsing labels.
+        // If any sections are overflowing the toolbar then force the display mode to be icon only.
+        if (this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal && isOverflowingToolbar.call(this)) {
+            this.element.classList.remove(WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
+            this.element.classList.add(WebInspector.Toolbar.DisplayMode.IconOnly);
+        }
+
+        if (!isOverflowingToolbar.call(this))
+            return;
+
+        this.element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
+    }
+
+    // Private
+
+    _handleContextMenuEvent(event)
+    {
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+        contextMenu.appendCheckboxItem(WebInspector.UIString("Icon and Text (Vertical)"), this._changeDisplayMode.bind(this, WebInspector.Toolbar.DisplayMode.IconAndLabelVertical), this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelVertical);
+        contextMenu.appendCheckboxItem(WebInspector.UIString("Icon and Text (Horizontal)"), this._changeDisplayMode.bind(this, WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal), this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
+        contextMenu.appendCheckboxItem(WebInspector.UIString("Icon Only"), this._changeDisplayMode.bind(this, WebInspector.Toolbar.DisplayMode.IconOnly), this._displayMode === WebInspector.Toolbar.DisplayMode.IconOnly);
+        contextMenu.appendCheckboxItem(WebInspector.UIString("Text Only"), this._changeDisplayMode.bind(this, WebInspector.Toolbar.DisplayMode.LabelOnly), this._displayMode === WebInspector.Toolbar.DisplayMode.LabelOnly);
+
+        if (this._displayMode !== WebInspector.Toolbar.DisplayMode.LabelOnly) {
+            contextMenu.appendSeparator();
+            contextMenu.appendCheckboxItem(WebInspector.UIString("Small Icons"), this._toggleSmallIcons.bind(this), this._sizeMode === WebInspector.Toolbar.SizeMode.Small);
+        }
+    }
+
+    _changeDisplayMode(displayMode)
+    {
+        this.displayMode = displayMode;
+    }
+
+    _toggleSmallIcons()
+    {
+        this.sizeMode = this._sizeMode === WebInspector.Toolbar.SizeMode.Normal ? WebInspector.Toolbar.SizeMode.Small : WebInspector.Toolbar.SizeMode.Normal;
+    }
+};
+
+WebInspector.Toolbar.StyleClassName = "toolbar";
+WebInspector.Toolbar.ControlSectionStyleClassName = "control-section";
+WebInspector.Toolbar.ItemSectionStyleClassName = "item-section";
+WebInspector.Toolbar.LeftItemSectionStyleClassName = "left";
+WebInspector.Toolbar.CenterLeftItemSectionStyleClassName = "center-left";
+WebInspector.Toolbar.CenterItemSectionStyleClassName = "center";
+WebInspector.Toolbar.CenterRightItemSectionStyleClassName = "center-right";
+WebInspector.Toolbar.RightItemSectionStyleClassName = "right";
+
+WebInspector.Toolbar.Event = {
+    DisplayModeDidChange: "toolbar-display-mode-did-change",
+    SizeModeDidChange: "toolbar-size-mode-did-change"
+};
+
+WebInspector.Toolbar.Section = {
+    Control: "control",
+    Left: "left",
+    CenterLeft: "center-left",
+    Center: "center",
+    CenterRight: "center-right",
+    Right: "right"
+};
+
+WebInspector.Toolbar.DisplayMode = {
+    IconAndLabelVertical: "icon-and-label-vertical",
+    IconAndLabelHorizontal: "icon-and-label-horizontal",
+    IconOnly: "icon-only",
+    LabelOnly: "label-only"
+};
+
+WebInspector.Toolbar.SizeMode = {
+    Normal: "normal-size",
+    Small: "small-size"
+};