Web Inspector: Navigation bar icons are missing
authortimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 29 Oct 2015 18:35:17 +0000 (18:35 +0000)
committertimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 29 Oct 2015 18:35:17 +0000 (18:35 +0000)
https://bugs.webkit.org/show_bug.cgi?id=150677

Reviewed by Joseph Pecoraro.

The glyph width and height were not being set correctly and it broke NavigationBar buttons.
The width and height attribute was being set on a div, when it should have used the style property.
Also remove the suppressEmboss flag, which is no longer used but the clients and subclasses still did.

* UserInterface/Base/ImageUtilities.js:
(useSVGSymbol): Use style property instead of setting width and height. The attributes
didn't accomplish the same thing in all cases. Use title and className property on the
wrapper element and remove the comments, which applied when there wasn't a wrapper.

* UserInterface/Views/ActivateButtonNavigationItem.js:
(WebInspector.ActivateButtonNavigationItem): Remove suppressEmboss.
* UserInterface/Views/ActivateButtonToolbarItem.js:
(WebInspector.ActivateButtonToolbarItem): Remove suppressEmboss.

* UserInterface/Views/ButtonNavigationItem.js:
(WebInspector.ButtonNavigationItem): Remove suppressEmboss.
(WebInspector.ButtonNavigationItem.prototype.set image): Use style property instead of setting
width and height attributes. This assumed the SVG element was the glyph element, which changed
at one point without me remembering to fix this client.

* UserInterface/Views/ButtonToolbarItem.js:
(WebInspector.ButtonToolbarItem):  Remove suppressEmboss.
* UserInterface/Views/DebuggerDashboardView.js:
(WebInspector.DebuggerDashboardView): Remove suppressEmboss use.
* UserInterface/Views/FilterBar.js:
(WebInspector.FilterBar.prototype.addFilterBarButton): Remove suppressEmboss.
* UserInterface/Views/FilterBarButton.js:
(WebInspector.FilterBarButton): Remove suppressEmboss.
* UserInterface/Views/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel):  Remove suppressEmboss use.
* UserInterface/Views/ToggleButtonNavigationItem.js:
(WebInspector.ToggleButtonNavigationItem): Remove suppressEmboss.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Base/ImageUtilities.js
Source/WebInspectorUI/UserInterface/Views/ActivateButtonNavigationItem.js
Source/WebInspectorUI/UserInterface/Views/ActivateButtonToolbarItem.js
Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js
Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.js
Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js
Source/WebInspectorUI/UserInterface/Views/FilterBar.js
Source/WebInspectorUI/UserInterface/Views/FilterBarButton.js
Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/ToggleButtonNavigationItem.js

index 7516a29..d778085 100644 (file)
@@ -1,3 +1,43 @@
+2015-10-29  Timothy Hatcher  <timothy@apple.com>
+
+        Web Inspector: Navigation bar icons are missing
+        https://bugs.webkit.org/show_bug.cgi?id=150677
+
+        Reviewed by Joseph Pecoraro.
+
+        The glyph width and height were not being set correctly and it broke NavigationBar buttons.
+        The width and height attribute was being set on a div, when it should have used the style property.
+        Also remove the suppressEmboss flag, which is no longer used but the clients and subclasses still did.
+
+        * UserInterface/Base/ImageUtilities.js:
+        (useSVGSymbol): Use style property instead of setting width and height. The attributes
+        didn't accomplish the same thing in all cases. Use title and className property on the
+        wrapper element and remove the comments, which applied when there wasn't a wrapper.
+
+        * UserInterface/Views/ActivateButtonNavigationItem.js:
+        (WebInspector.ActivateButtonNavigationItem): Remove suppressEmboss.
+        * UserInterface/Views/ActivateButtonToolbarItem.js:
+        (WebInspector.ActivateButtonToolbarItem): Remove suppressEmboss.
+
+        * UserInterface/Views/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem): Remove suppressEmboss.
+        (WebInspector.ButtonNavigationItem.prototype.set image): Use style property instead of setting
+        width and height attributes. This assumed the SVG element was the glyph element, which changed
+        at one point without me remembering to fix this client.
+
+        * UserInterface/Views/ButtonToolbarItem.js:
+        (WebInspector.ButtonToolbarItem):  Remove suppressEmboss.
+        * UserInterface/Views/DebuggerDashboardView.js:
+        (WebInspector.DebuggerDashboardView): Remove suppressEmboss use.
+        * UserInterface/Views/FilterBar.js:
+        (WebInspector.FilterBar.prototype.addFilterBarButton): Remove suppressEmboss.
+        * UserInterface/Views/FilterBarButton.js:
+        (WebInspector.FilterBarButton): Remove suppressEmboss.
+        * UserInterface/Views/TimelineSidebarPanel.js:
+        (WebInspector.TimelineSidebarPanel):  Remove suppressEmboss use.
+        * UserInterface/Views/ToggleButtonNavigationItem.js:
+        (WebInspector.ToggleButtonNavigationItem): Remove suppressEmboss.
+
 2015-10-29  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: Clean up and audit TimelineRecordFactory records
index 5b47281..f048318 100644 (file)
@@ -29,8 +29,8 @@ function useSVGSymbol(url, className, title)
     const xlinkNamespace = "http://www.w3.org/1999/xlink";
 
     let svgElement = document.createElementNS(svgNamespace, "svg");
-    svgElement.setAttribute("width", "100%");
-    svgElement.setAttribute("height", "100%");
+    svgElement.style.width = "100%";
+    svgElement.style.height = "100%";
 
     // URL must contain a fragment reference to a graphical element, like a symbol. If none is given
     // append #root which all of our SVGs have on the top level <svg> element.
@@ -45,9 +45,9 @@ function useSVGSymbol(url, className, title)
     wrapper.appendChild(svgElement);
 
     if (className)
-        wrapper.setAttribute("class", className); // Can't use className property since this is the SVG DOM.
+        wrapper.className = className;
     if (title)
-        wrapper.setAttribute("title", title); // Can't use title property since this is the SVG DOM.
+        wrapper.title = title;
 
     return wrapper;
 }
index 71f7b81..731c359 100644 (file)
@@ -25,9 +25,9 @@
 
 WebInspector.ActivateButtonNavigationItem = class ActivateButtonNavigationItem extends WebInspector.ButtonNavigationItem
 {
-    constructor(identifier, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss, role)
+    constructor(identifier, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, role)
     {
-        super(identifier, defaultToolTip, image, imageWidth, imageHeight, suppressEmboss, role);
+        super(identifier, defaultToolTip, image, imageWidth, imageHeight, role);
 
         this._defaultToolTip = defaultToolTip;
         this._activatedToolTip = activatedToolTip || defaultToolTip;
index 194d411..2d8a747 100644 (file)
@@ -25,9 +25,9 @@
 
 WebInspector.ActivateButtonToolbarItem = class ActivateButtonToolbarItem extends WebInspector.ActivateButtonNavigationItem
 {
-    constructor(identifier, defaultToolTip, activatedToolTip, label, image, suppressEmboss, role)
+    constructor(identifier, defaultToolTip, activatedToolTip, label, image, role)
     {
-        super(identifier, defaultToolTip, activatedToolTip, image, 32, 32, suppressEmboss, role);
+        super(identifier, defaultToolTip, activatedToolTip, image, 16, 16, role);
 
         if (typeof label === "string") {
             this._labelElement = document.createElement("div");
index 5749ac9..7525367 100644 (file)
@@ -25,7 +25,7 @@
 
 WebInspector.ButtonNavigationItem = class ButtonNavigationItem extends WebInspector.NavigationItem
 {
-    constructor(identifier, toolTipOrLabel, image, imageWidth, imageHeight, suppressEmboss, role, label)
+    constructor(identifier, toolTipOrLabel, image, imageWidth, imageHeight, role, label)
     {
         super(identifier);
 
@@ -97,8 +97,8 @@ WebInspector.ButtonNavigationItem = class ButtonNavigationItem extends WebInspec
         this._image = newImage;
 
         this._glyphElement = useSVGSymbol(this._image, "glyph");
-        this._glyphElement.setAttribute("width", this._imageWidth + "px");
-        this._glyphElement.setAttribute("height", this._imageHeight + "px");
+        this._glyphElement.style.width = this._imageWidth + "px";
+        this._glyphElement.style.height = this._imageHeight + "px";
         this._element.appendChild(this._glyphElement);
     }
 
index 11a629e..b2c7a2b 100644 (file)
@@ -25,9 +25,9 @@
 
 WebInspector.ButtonToolbarItem = class ButtonToolbarItem extends WebInspector.ButtonNavigationItem
 {
-    constructor(identifier, toolTip, label, image, suppressEmboss, role)
+    constructor(identifier, toolTip, label, image, role)
     {
-        super(identifier, toolTip, image, 16, 16, suppressEmboss, role);
+        super(identifier, toolTip, image, 16, 16, role);
 
         if (typeof label === "string") {
             this._labelElement = document.createElement("div");
index bacf874..90b9b52 100644 (file)
@@ -35,7 +35,7 @@ WebInspector.DebuggerDashboardView = class DebuggerDashboardView extends WebInsp
         this.element.appendChild(this._navigationBar.element);
 
         var tooltip = WebInspector.UIString("Continue script execution (%s or %s)").format(WebInspector.pauseOrResumeKeyboardShortcut.displayName, WebInspector.pauseOrResumeAlternateKeyboardShortcut.displayName);
-        this._debuggerResumeButtonItem = new WebInspector.ActivateButtonNavigationItem("debugger-dashboard-pause", tooltip, tooltip, "Images/Resume.svg", 15, 15, true);
+        this._debuggerResumeButtonItem = new WebInspector.ActivateButtonNavigationItem("debugger-dashboard-pause", tooltip, tooltip, "Images/Resume.svg", 15, 15);
         this._debuggerResumeButtonItem.activated = true;
         this._debuggerResumeButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._resumeButtonClicked, this);
         this._navigationBar.addNavigationItem(this._debuggerResumeButtonItem);
index 76548f6..2e7cc7e 100644 (file)
@@ -84,9 +84,9 @@ WebInspector.FilterBar = class FilterBar extends WebInspector.Object
             this._handleFilterChanged();
     }
 
-    addFilterBarButton(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss)
+    addFilterBarButton(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight)
     {
-        var filterBarButton = new WebInspector.FilterBarButton(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss);
+        var filterBarButton = new WebInspector.FilterBarButton(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight);
         filterBarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._handleFilterBarButtonClicked, this);
         filterBarButton.addEventListener(WebInspector.FilterBarButton.Event.ActivatedStateToggled, this._handleFilterButtonToggled, this);
         this._filtersNavigationBar.addNavigationItem(filterBarButton);
index f86c321..b954bb1 100644 (file)
@@ -25,9 +25,9 @@
 
 WebInspector.FilterBarButton = class FilterBarButton extends WebInspector.ActivateButtonNavigationItem
 {
-    constructor(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss, role)
+    constructor(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, role)
     {
-        super(identifier, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss, role);
+        super(identifier, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, role);
 
         this._filterFunction = filterFunction;
 
index 5a30a2b..a8d4414 100644 (file)
@@ -148,7 +148,7 @@ WebInspector.TimelineSidebarPanel = class TimelineSidebarPanel extends WebInspec
 
         toolTip = WebInspector.UIString("Start Playback");
         altToolTip = WebInspector.UIString("Pause Playback");
-        this._replayPauseResumeButtonItem = new WebInspector.ToggleButtonNavigationItem("replay-pause-resume", toolTip, altToolTip, "Images/Resume.svg", "Images/Pause.svg", 15, 15, true);
+        this._replayPauseResumeButtonItem = new WebInspector.ToggleButtonNavigationItem("replay-pause-resume", toolTip, altToolTip, "Images/Resume.svg", "Images/Pause.svg", 15, 15);
         this._replayPauseResumeButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._replayPauseResumeButtonClicked, this);
         this._replayPauseResumeButtonItem.enabled = false;
         this._replayNavigationBar.addNavigationItem(this._replayPauseResumeButtonItem);
index b72e149..1f609a3 100644 (file)
@@ -25,9 +25,9 @@
 
 WebInspector.ToggleButtonNavigationItem = class ToggleButtonNavigationItem extends WebInspector.ButtonNavigationItem
 {
-    constructor(identifier, defaultToolTip, alternateToolTip, defaultImage, alternateImage, imageWidth, imageHeight, suppressEmboss)
+    constructor(identifier, defaultToolTip, alternateToolTip, defaultImage, alternateImage, imageWidth, imageHeight)
     {
-        super(identifier, defaultToolTip, defaultImage, imageWidth, imageHeight, suppressEmboss);
+        super(identifier, defaultToolTip, defaultImage, imageWidth, imageHeight);
 
         this._toggled = false;
         this._defaultImage = defaultImage;