DevTools: implement hidpi-friendly success/error/warning balls.

Source/devtools/front_end/ApplicationCacheItemsView.js

 /*
  * Copyright (C) 2010 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
@@ skipping 23 matching lines @@
     this._model = model;
 
     this.element.addStyleClass("storage-view");
     this.element.addStyleClass("table");
 
     // FIXME: Needs better tooltip. (Localized)
     this.deleteButton = new WebInspector.StatusBarButton(WebInspector.UIString("Delete"), "delete-storage-status-bar-item");
     this.deleteButton.visible = false;
     this.deleteButton.addEventListener("click", this._deleteButtonClicked, this);
 
-    this.connectivityIcon = document.createElement("img");
-    this.connectivityIcon.className = "storage-application-cache-connectivity-icon";
-    this.connectivityIcon.src = "";
+    this.connectivityIcon = document.createElement("div");
     this.connectivityMessage = document.createElement("span");
     this.connectivityMessage.className = "storage-application-cache-connectivity";
     this.connectivityMessage.textContent = "";
 
     this.divider = document.createElement("span");
     this.divider.className = "status-bar-item status-bar-divider";
 
-    this.statusIcon = document.createElement("img");
-    this.statusIcon.className = "storage-application-cache-status-icon";
-    this.statusIcon.src = "";
+    this.statusIcon = document.createElement("div");
     this.statusMessage = document.createElement("span");
     this.statusMessage.className = "storage-application-cache-status";
     this.statusMessage.textContent = "";
 
     this._frameId = frameId;
 
     this._emptyView = new WebInspector.EmptyView(WebInspector.UIString("No Application Cache information available."));
     this._emptyView.show(this.element);
 
     this._markDirty();
@@ skipping 45 matching lines @@
     /**
      * @param {number} status
      */
     updateStatus: function(status)
     {
         var oldStatus = this._status;
         this._status = status;
         
         var statusInformation = {};
         // We should never have UNCACHED status, since we remove frames with UNCACHED application cache status from the tree. 
-        statusInformation[applicationCache.UNCACHED]    = { src: "Images/errorRedDot.png", text: "UNCACHED" };
-        statusInformation[applicationCache.IDLE]        = { src: "Images/successGreenDot.png", text: "IDLE" };
-        statusInformation[applicationCache.CHECKING]    = { src: "Images/warningOrangeDot.png",  text: "CHECKING" };
-        statusInformation[applicationCache.DOWNLOADING] = { src: "Images/warningOrangeDot.png",  text: "DOWNLOADING" };
-        statusInformation[applicationCache.UPDATEREADY] = { src: "Images/successGreenDot.png",  text: "UPDATEREADY" };
-        statusInformation[applicationCache.OBSOLETE]    = { src: "Images/errorRedDot.png",      text: "OBSOLETE" };
+        statusInformation[applicationCache.UNCACHED]    = { className: "red-ball", text: "UNCACHED" };
+        statusInformation[applicationCache.IDLE]        = { className: "green-ball", text: "IDLE" };
+        statusInformation[applicationCache.CHECKING]    = { className: "orange-ball",  text: "CHECKING" };
+        statusInformation[applicationCache.DOWNLOADING] = { className: "orange-ball",  text: "DOWNLOADING" };
+        statusInformation[applicationCache.UPDATEREADY] = { className: "green-ball",  text: "UPDATEREADY" };
+        statusInformation[applicationCache.OBSOLETE]    = { className: "red-ball",      text: "OBSOLETE" };
 
         var info = statusInformation[status] || statusInformation[applicationCache.UNCACHED];
 
-        this.statusIcon.src = info.src;
+        this.statusIcon.className = "storage-application-cache-status-icon " + info.className;
         this.statusMessage.textContent = info.text;
-        
+
         if (this.isShowing() && this._status === applicationCache.IDLE && (oldStatus === applicationCache.UPDATEREADY || !this._resources))
             this._markDirty();
         this._maybeUpdate();
     },
 
     /**
      * @param {boolean} isNowOnline
      */
     updateNetworkState: function(isNowOnline)
     {
         if (isNowOnline) {
-            this.connectivityIcon.src = "Images/successGreenDot.png";
+            this.connectivityIcon.className = "storage-application-cache-connectivity-icon green-ball";
             this.connectivityMessage.textContent = WebInspector.UIString("Online");
         } else {
-            this.connectivityIcon.src = "Images/errorRedDot.png";
+            this.connectivityIcon.className = "storage-application-cache-connectivity-icon red-ball";
             this.connectivityMessage.textContent = WebInspector.UIString("Offline");
         }
     },
 
     _update: function()
     {
         this._model.requestApplicationCache(this._frameId, this._updateCallback.bind(this));
     },
 
     /**
@@ skipping 105 matching lines @@
     _deleteCallback: function(node)
     {
         // FIXME: Should we delete a single (selected) resource or all resources?
         // InspectorBackend.deleteCachedResource(...)
         // this._update();
     },
 
     __proto__: WebInspector.View.prototype
 }