- Revision
- 154777
- Author
- [email protected]
- Date
- 2013-08-28 13:42:02 -0700 (Wed, 28 Aug 2013)
Log Message
Web Inspector: Give reload icon an :active state and allow CSS to style some SVG images
https://bugs.webkit.org/show_bug.cgi?id=120384
Reviewed by Timothy Hatcher.
The Reload icon is duplicated just to provide different fill colors.
Convert from using <img> to an <svg> document for this image, and style
it with CSS. This also makes it trivial to add an :active state.
* UserInterface/ImageUtilities.js:
(.invokeCallbackWithDocument):
(.imageLoad):
(.imageError):
(wrappedSVGDocument):
Helpers for downloading and in memory caching SVG images.
* UserInterface/Images/Reload.svg:
* UserInterface/Images/ReloadSelected.svg: Removed.
Updated Reload image better matches the original design (slightly
larger). And the duplicate image can be removed.
* UserInterface/ResourceTreeElement.css:
(.item.resource > .status > .reload-button):
(.item.resource > .status > .reload-button > svg *):
(.item.resource.selected > .status > .reload-button > svg *):
(.item.resource.selected > .status > .reload-button:active > svg *):
Different styles, including a new :active style.
* UserInterface/ResourceTreeElement.js:
(WebInspector.ResourceTreeElement.prototype._updateStatusWithMainFrameButtons):
(WebInspector.ResourceTreeElement.prototype._updateStatus):
Handle updating the main frame's state asynchronously since loading the SVG
image document is asynchronous.
Modified Paths
Removed Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (154776 => 154777)
--- trunk/Source/WebInspectorUI/ChangeLog 2013-08-28 20:33:57 UTC (rev 154776)
+++ trunk/Source/WebInspectorUI/ChangeLog 2013-08-28 20:42:02 UTC (rev 154777)
@@ -1,3 +1,39 @@
+2013-08-28 Joseph Pecoraro <[email protected]>
+
+ Web Inspector: Give reload icon an :active state and allow CSS to style some SVG images
+ https://bugs.webkit.org/show_bug.cgi?id=120384
+
+ Reviewed by Timothy Hatcher.
+
+ The Reload icon is duplicated just to provide different fill colors.
+ Convert from using <img> to an <svg> document for this image, and style
+ it with CSS. This also makes it trivial to add an :active state.
+
+ * UserInterface/ImageUtilities.js:
+ (.invokeCallbackWithDocument):
+ (.imageLoad):
+ (.imageError):
+ (wrappedSVGDocument):
+ Helpers for downloading and in memory caching SVG images.
+
+ * UserInterface/Images/Reload.svg:
+ * UserInterface/Images/ReloadSelected.svg: Removed.
+ Updated Reload image better matches the original design (slightly
+ larger). And the duplicate image can be removed.
+
+ * UserInterface/ResourceTreeElement.css:
+ (.item.resource > .status > .reload-button):
+ (.item.resource > .status > .reload-button > svg *):
+ (.item.resource.selected > .status > .reload-button > svg *):
+ (.item.resource.selected > .status > .reload-button:active > svg *):
+ Different styles, including a new :active style.
+
+ * UserInterface/ResourceTreeElement.js:
+ (WebInspector.ResourceTreeElement.prototype._updateStatusWithMainFrameButtons):
+ (WebInspector.ResourceTreeElement.prototype._updateStatus):
+ Handle updating the main frame's state asynchronously since loading the SVG
+ image document is asynchronous.
+
2013-08-27 Joseph Pecoraro <[email protected]>
Web Inspector: Debugger should have Continue to Here Context Menu
Modified: trunk/Source/WebInspectorUI/UserInterface/ImageUtilities.js (154776 => 154777)
--- trunk/Source/WebInspectorUI/UserInterface/ImageUtilities.js 2013-08-28 20:33:57 UTC (rev 154776)
+++ trunk/Source/WebInspectorUI/UserInterface/ImageUtilities.js 2013-08-28 20:42:02 UTC (rev 154777)
@@ -669,3 +669,62 @@
context.putImageData(imageData, 0, 0);
}
}
+
+
+var svgImageCache = {};
+
+function loadSVGImageDocumentElement(url, callback)
+{
+ function invokeCallbackWithDocument(svgText) {
+ var parser = new DOMParser;
+ var doc = parser.parseFromString(svgText, "image/svg+xml");
+ callback(doc.documentElement);
+ }
+
+ function imageLoad(event) {
+ if (xhr.status === 0 || xhr.status === 200) {
+ var svgText = xhr.responseText;
+ svgImageCache[url] = svgText;
+ invokeCallbackWithDocument(svgText);
+ } else {
+ console.error("Unexpected XHR status (" + xhr.status + ") loading SVG image: " + url);
+ callback(null);
+ }
+ }
+
+ function imageError(event) {
+ console.error("Unexpected failure loading SVG image: " + url);
+ callback(null);
+ }
+
+ var cachedSVGText = svgImageCache[url];
+ if (cachedSVGText) {
+ invokeCallbackWithDocument(cachedSVGText);
+ return;
+ }
+
+ var xhr = new XMLHttpRequest;
+ xhr.open("GET", url, true);
+ xhr.addEventListener("load", imageLoad);
+ xhr.addEventListener("error", imageError);
+ xhr.send();
+}
+
+function wrappedSVGDocument(url, className, title, callback)
+{
+ loadSVGImageDocumentElement(url, function(svgDocument) {
+ if (!svgDocument) {
+ callback(null);
+ return;
+ }
+
+ var wrapper = document.createElement("div");
+ if (className)
+ wrapper.className = className;
+ if (title)
+ wrapper.title = title;
+ wrapper.appendChild(svgDocument);
+
+ callback(wrapper);
+ });
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Images/Reload.svg (154776 => 154777)
--- trunk/Source/WebInspectorUI/UserInterface/Images/Reload.svg 2013-08-28 20:33:57 UTC (rev 154776)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/Reload.svg 2013-08-28 20:42:02 UTC (rev 154777)
@@ -1,6 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
- <path fill="rgb(112, 126, 139)" d="M 8 11 C 6.34375 11 5 9.65625 5 8 C 5 6.34375 6.34375 5 8 5 L 8 3 C 5.238281 3 3 5.238281 3 8 C 3 10.761719 5.238281 13 8 13 C 10.761719 13 13 10.761719 13 8 L 11 8 C 11 9.65625 9.65625 11 8 11"/>
- <path fill="rgb(112, 126, 139)" d="M 13 4 L 8 7 L 8 1 Z"/>
+ <path d="M 11.3333594 8.19978872 C 11.3373138 8.13355217 11.3392924 8.06721247 11.3392924 8.00085802 L 13.5 8.00085802 C 13.5 8.11015036 13.4967412 8.21941842 13.4902278 8.32851658 C 13.3092357 11.3601207 10.7044904 13.671017 7.67237326 13.4900575 C 4.64025461 13.309098 2.32895216 10.7048051 2.50994432 7.67319946 C 2.6855607 4.73163777 5.14309162 2.46860779 8 2.50032937 L 8 0.3 L 11.0969295 2.13000381 L 13.5 3.55 L 8 6.8 L 8 4.66165014 C 6.25756644 4.65173653 4.94768721 5.89954424 4.84179688 7.67319965 C 4.731911 9.51378018 5.96019866 11.2236643 7.80111758 11.333532 C 9.64203807 11.4433997 11.2234734 10.0403708 11.3333594 8.19978872 Z M 11.3333594 8.19978872"/>
</svg>
Deleted: trunk/Source/WebInspectorUI/UserInterface/Images/ReloadSelected.svg (154776 => 154777)
--- trunk/Source/WebInspectorUI/UserInterface/Images/ReloadSelected.svg 2013-08-28 20:33:57 UTC (rev 154776)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/ReloadSelected.svg 2013-08-28 20:42:02 UTC (rev 154777)
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
- <path fill="white" d="M 8 11 C 6.34375 11 5 9.65625 5 8 C 5 6.34375 6.34375 5 8 5 L 8 3 C 5.238281 3 3 5.238281 3 8 C 3 10.761719 5.238281 13 8 13 C 10.761719 13 13 10.761719 13 8 L 11 8 C 11 9.65625 9.65625 11 8 11"/>
- <path fill="white" d="M 13 4 L 8 7 L 8 1 Z"/>
-</svg>
Modified: trunk/Source/WebInspectorUI/UserInterface/ResourceTreeElement.css (154776 => 154777)
--- trunk/Source/WebInspectorUI/UserInterface/ResourceTreeElement.css 2013-08-28 20:33:57 UTC (rev 154776)
+++ trunk/Source/WebInspectorUI/UserInterface/ResourceTreeElement.css 2013-08-28 20:42:02 UTC (rev 154777)
@@ -34,9 +34,16 @@
.item.resource > .status > .reload-button {
width: 16px;
height: 16px;
- content: url(Images/Reload.svg);
}
-.item.resource.selected > .status > .reload-button {
- content: url(Images/ReloadSelected.svg);
+.item.resource > .status > .reload-button > svg * {
+ fill: rgb(112, 126, 139);
}
+
+.item.resource.selected > .status > .reload-button > svg * {
+ fill: white;
+}
+
+.item.resource.selected > .status > .reload-button:active > svg * {
+ fill: rgba(255, 255, 255, 0.75);
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/ResourceTreeElement.js (154776 => 154777)
--- trunk/Source/WebInspectorUI/UserInterface/ResourceTreeElement.js 2013-08-28 20:33:57 UTC (rev 154776)
+++ trunk/Source/WebInspectorUI/UserInterface/ResourceTreeElement.js 2013-08-28 20:42:02 UTC (rev 154777)
@@ -89,17 +89,6 @@
return {text: this._resource.url};
},
- get reloadButton()
- {
- if (!this._reloadButton) {
- this._reloadButton = document.createElement("img");
- this._reloadButton.className = "reload-button";
- this._reloadButton.title = WebInspector.UIString("Reload page (%s)\nReload ignoring cache (%s)").format(WebInspector._reloadPageKeyboardShortcut.displayName, WebInspector._reloadPageIgnoringCacheKeyboardShortcut.displayName);
- this._reloadButton.addEventListener("click", this._reloadPageClicked.bind(this));
- }
- return this._reloadButton;
- },
-
ondblclick: function()
{
InspectorFrontendHost.openInNewTab(this._resource.url);
@@ -166,6 +155,25 @@
// Private
+ _updateStatusWithMainFrameButtons: function()
+ {
+ if (this._reloadButton) {
+ this.status = this._reloadButton;
+ return;
+ }
+
+ if (!this._loadingMainFrameButtons) {
+ this._loadingMainFrameButtons = true;
+ var tooltip = WebInspector.UIString("Reload page (%s)\nReload ignoring cache (%s)").format(WebInspector._reloadPageKeyboardShortcut.displayName, WebInspector._reloadPageIgnoringCacheKeyboardShortcut.displayName);
+ wrappedSVGDocument("Images/Reload.svg", "reload-button", tooltip, function(svgDocument) {
+ this._reloadButton = svgDocument;
+ this._reloadButton.addEventListener("click", this._reloadPageClicked);
+ this.status = this._reloadButton;
+ delete this._loadingMainFrameButtons;
+ }.bind(this));
+ }
+ },
+
_updateStatus: function()
{
if (this._resource.failed)
@@ -176,7 +184,10 @@
if (this._resource.finished || this._resource.failed) {
// Remove the spinner and replace with a reload button in case it's the main frame's main resource.
var frame = this._resource.parentFrame;
- this.status = this._resource.isMainResource() && frame && frame.isMainFrame() ? this.reloadButton : null;
+ if (this._resource.isMainResource() && frame && frame.isMainFrame())
+ this._updateStatusWithMainFrameButtons();
+ else
+ this.status = null;
} else {
var spinner = new WebInspector.IndeterminateProgressSpinner;
this.status = spinner.element;
