Web Inspector: Elements: Styles: add icons for various CSS rule types
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / ButtonNavigationItem.js
index 35ad4ce..7d03153 100644 (file)
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * 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
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.ButtonNavigationItem = function(identifier, toolTipOrLabel, image, imageWidth, imageHeight, suppressEmboss, role, label) {
-    WebInspector.NavigationItem.call(this, identifier);
-
-    console.assert(identifier);
-    console.assert(toolTipOrLabel);
-
-    this.toolTip = toolTipOrLabel;
-
-    this._element.addEventListener("click", this._mouseClicked.bind(this));
-    
-    this._element.setAttribute("role", role || "button");
-    
-    if (label) 
-        this._element.setAttribute("aria-label", label);
+WI.ButtonNavigationItem = class ButtonNavigationItem extends WI.NavigationItem
+{
+    constructor(identifier, toolTipOrLabel, image, imageWidth, imageHeight, role, label)
+    {
+        super(identifier, role || "button");
 
-    this._imageWidth = imageWidth || 16;
-    this._imageHeight = imageHeight || 16;
-    this._suppressEmboss = suppressEmboss || false;
+        console.assert(identifier);
+        console.assert(toolTipOrLabel);
 
-    if (suppressEmboss)
-        this._element.classList.add(WebInspector.ButtonNavigationItem.SuppressEmbossStyleClassName);
+        this._enabled = true;
 
-    if (image)
-        this.image = image;
-    else
-        this.label = toolTipOrLabel;
-};
+        this.element.addEventListener("click", this._mouseClicked.bind(this));
 
-WebInspector.ButtonNavigationItem.StyleClassName = "button";
-WebInspector.ButtonNavigationItem.DisabledStyleClassName = "disabled";
-WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName = "suppress-bezel";
-WebInspector.ButtonNavigationItem.SuppressEmbossStyleClassName = "suppress-emboss";
-WebInspector.ButtonNavigationItem.TextOnlyClassName = "text-only";
+        if (label)
+            this.element.setAttribute("aria-label", label);
 
-WebInspector.ButtonNavigationItem.States = {};
-WebInspector.ButtonNavigationItem.States.Normal = "normal";
-WebInspector.ButtonNavigationItem.States.Active = "active";
-WebInspector.ButtonNavigationItem.States.Focus = "focus";
-WebInspector.ButtonNavigationItem.States.ActiveFocus = "active-focus";
+        this._buttonStyle = null;
+        this._disabled = false;
+        this._image = image || null;
+        this._imageWidth = imageWidth || 16;
+        this._imageHeight = imageHeight || 16;
+        this._label = toolTipOrLabel;
 
-WebInspector.ButtonNavigationItem.Event = {
-    Clicked: "button-navigation-item-clicked"
-};
+        this.buttonStyle = this._image ? WI.ButtonNavigationItem.Style.Image : WI.ButtonNavigationItem.Style.Text;
 
-WebInspector.ButtonNavigationItem.prototype = {
-    constructor: WebInspector.ButtonNavigationItem,
+        if (this.buttonStyle === WI.ButtonNavigationItem.Style.Image)
+            this.tooltip = toolTipOrLabel;
+    }
 
     // Public
 
-    get toolTip()
+    get label()
     {
-        return this._element.title;
-    },
+        return this._label;
+    }
 
-    set toolTip(newToolTip)
+    set label(newLabel)
     {
-        console.assert(newToolTip);
-        if (!newToolTip)
+        newLabel = newLabel || "";
+        if (this._label === newLabel)
             return;
 
-        this._element.title = newToolTip;
-    },
-
-    get label()
-    {
-        return this._element.textContent;
-    },
+        this._label = newLabel;
+        this._update();
 
-    set label(newLabel)
-    {
-        this._element.classList.add(WebInspector.ButtonNavigationItem.TextOnlyClassName);
-        this._element.textContent = newLabel || "";
         if (this.parentNavigationBar)
-            this.parentNavigationBar.updateLayout();
-    },
+            this.parentNavigationBar.needsLayout();
+    }
 
     get image()
     {
         return this._image;
-    },
+    }
 
     set image(newImage)
     {
-        if (!newImage) {
-            this._element.removeChildren();
+        newImage = newImage || null;
+        if (this._image === newImage)
             return;
-        }
-
-        this._element.removeChildren();
-        this._element.classList.remove(WebInspector.ButtonNavigationItem.TextOnlyClassName);
 
         this._image = newImage;
-
-        this._glyphElement = document.createElement("div");
-        this._glyphElement.className = "glyph";
-        this._element.appendChild(this._glyphElement);
-
-        this._updateImage();
-    },
+        this._update();
+    }
 
     get enabled()
     {
-        return !this._element.classList.contains(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
-    },
+        return this._enabled;
+    }
 
     set enabled(flag)
     {
-        if (flag)
-            this._element.classList.remove(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
-        else
-            this._element.classList.add(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
-    },
+        flag = !!flag;
+        if (this._enabled === flag)
+            return;
 
-    get suppressBezel()
-    {
-        return this._element.classList.contains(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
-    },
+        this._enabled = flag;
+        this.element.classList.toggle("disabled", !this._enabled);
+    }
 
-    set suppressBezel(flag)
+    get buttonStyle()
     {
-        if (flag)
-            this._element.classList.add(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
-        else
-            this._element.classList.remove(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
-    },
+        return this._buttonStyle;
+    }
 
-    generateStyleText: function(parentSelector)
+    set buttonStyle(newButtonStyle)
     {
-        var classNames = this._classNames.join(".");
+        newButtonStyle = newButtonStyle || WI.ButtonNavigationItem.Style.Image;
+        if (this._buttonStyle === newButtonStyle)
+            return;
 
-        if (this._suppressEmboss)
-            var styleText = parentSelector + " ." + classNames + " > .glyph { background-size: " +  this._imageWidth + "px " + this._imageHeight + "px; }\n";
-        else {
-            // Default state.
-            var styleText = parentSelector + " ." + classNames + " > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier() + "); background-size: " +  this._imageWidth + "px " + this._imageHeight + "px; }\n";
+        this.element.classList.remove(...Object.values(WI.ButtonNavigationItem.Style));
+        this.element.classList.add(newButtonStyle);
 
-            // Pressed state.
-            styleText += parentSelector + " ." + classNames + ":not(.disabled):active > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Active) + "); }\n";
+        this._buttonStyle = newButtonStyle;
+        this._update();
 
-            // Focused state.
-            styleText += parentSelector + " ." + classNames + ":not(.disabled):focus > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Focus) + "); }\n";
-        }
+        if (this.parentNavigationBar)
+            this.parentNavigationBar.needsLayout();
+    }
 
-        return styleText;
-    },
+    // Protected
 
-    // Private
+    get additionalClassNames()
+    {
+        return ["button"];
+    }
 
-    _additionalClassNames: [WebInspector.ButtonNavigationItem.StyleClassName],
-    _embossedImageStates: WebInspector.ButtonNavigationItem.States,
-    _imageCacheable: true,
+    // Private
 
-    _mouseClicked: function(event)
+    _mouseClicked(event)
     {
         if (!this.enabled)
             return;
-        this.dispatchEventToListeners(WebInspector.ButtonNavigationItem.Event.Clicked);
-    },
-
-    _canvasIdentifier: function(state)
-    {
-        console.assert(!this._suppressEmboss);
-        return "navigation-item-" + this._identifier + "-" + (state || WebInspector.ButtonNavigationItem.States.Normal);
-    },
+        this.dispatchEventToListeners(WI.ButtonNavigationItem.Event.Clicked, {nativeEvent: event});
+    }
 
-    _updateImage: function()
+    _update()
     {
-        if (this._suppressEmboss)
-            this._glyphElement.style.backgroundImage = "url(" + this._image + ")";
-        else
-            this._generateImages();
-    },
+        this.element.removeChildren();
 
-    _generateImages: function()
-    {
-        console.assert(!this._suppressEmboss);
-        if (this._suppressEmboss)
-            return;
-        generateEmbossedImages(this.image, this._imageWidth, this._imageHeight, this._embossedImageStates, this._canvasIdentifier.bind(this), !this._imageCacheable);
+        if (this._buttonStyle === WI.ButtonNavigationItem.Style.Text)
+            this.element.textContent = this._label;
+        else {
+            let glyphElement = WI.ImageUtilities.useSVGSymbol(this._image, "glyph");
+            glyphElement.style.width = this._imageWidth + "px";
+            glyphElement.style.height = this._imageHeight + "px";
+            this.element.appendChild(glyphElement);
+
+            if (this._buttonStyle === WI.ButtonNavigationItem.Style.ImageAndText) {
+                let labelElement = this.element.appendChild(document.createElement("span"));
+                labelElement.textContent = this._label;
+            }
+        }
     }
 };
 
-WebInspector.ButtonNavigationItem.prototype.__proto__ = WebInspector.NavigationItem.prototype;
+WI.ButtonNavigationItem.Event = {
+    Clicked: "button-navigation-item-clicked"
+};
+
+WI.ButtonNavigationItem.Style = {
+    Image: "image-only",
+    Text: "text-only",
+    ImageAndText: "image-and-text",
+};