Title: [191740] trunk/Source/WebInspectorUI
Revision
191740
Author
timo...@apple.com
Date
2015-10-29 11:35:17 -0700 (Thu, 29 Oct 2015)

Log Message

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.

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (191739 => 191740)


--- trunk/Source/WebInspectorUI/ChangeLog	2015-10-29 18:30:43 UTC (rev 191739)
+++ trunk/Source/WebInspectorUI/ChangeLog	2015-10-29 18:35:17 UTC (rev 191740)
@@ -1,3 +1,43 @@
+2015-10-29  Timothy Hatcher  <timo...@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  <pecor...@apple.com>
 
         Web Inspector: Clean up and audit TimelineRecordFactory records

Modified: trunk/Source/WebInspectorUI/UserInterface/Base/ImageUtilities.js (191739 => 191740)


--- trunk/Source/WebInspectorUI/UserInterface/Base/ImageUtilities.js	2015-10-29 18:30:43 UTC (rev 191739)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/ImageUtilities.js	2015-10-29 18:35:17 UTC (rev 191740)
@@ -29,8 +29,8 @@
     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 @@
     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;
 }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ActivateButtonNavigationItem.js (191739 => 191740)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ActivateButtonNavigationItem.js	2015-10-29 18:30:43 UTC (rev 191739)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ActivateButtonNavigationItem.js	2015-10-29 18:35:17 UTC (rev 191740)
@@ -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;

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ActivateButtonToolbarItem.js (191739 => 191740)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ActivateButtonToolbarItem.js	2015-10-29 18:30:43 UTC (rev 191739)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ActivateButtonToolbarItem.js	2015-10-29 18:35:17 UTC (rev 191740)
@@ -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");

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js (191739 => 191740)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js	2015-10-29 18:30:43 UTC (rev 191739)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js	2015-10-29 18:35:17 UTC (rev 191740)
@@ -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 @@
         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);
     }
 

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.js (191739 => 191740)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.js	2015-10-29 18:30:43 UTC (rev 191739)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.js	2015-10-29 18:35:17 UTC (rev 191740)
@@ -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");

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js (191739 => 191740)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js	2015-10-29 18:30:43 UTC (rev 191739)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js	2015-10-29 18:35:17 UTC (rev 191740)
@@ -35,7 +35,7 @@
         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);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.js (191739 => 191740)


--- trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.js	2015-10-29 18:30:43 UTC (rev 191739)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.js	2015-10-29 18:35:17 UTC (rev 191740)
@@ -84,9 +84,9 @@
             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);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FilterBarButton.js (191739 => 191740)


--- trunk/Source/WebInspectorUI/UserInterface/Views/FilterBarButton.js	2015-10-29 18:30:43 UTC (rev 191739)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FilterBarButton.js	2015-10-29 18:35:17 UTC (rev 191740)
@@ -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;
 

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js (191739 => 191740)


--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js	2015-10-29 18:30:43 UTC (rev 191739)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js	2015-10-29 18:35:17 UTC (rev 191740)
@@ -148,7 +148,7 @@
 
         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);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ToggleButtonNavigationItem.js (191739 => 191740)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ToggleButtonNavigationItem.js	2015-10-29 18:30:43 UTC (rev 191739)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ToggleButtonNavigationItem.js	2015-10-29 18:35:17 UTC (rev 191740)
@@ -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;
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to