Fix a bug where an extension's icon wasn't being properly reloaded if it changes

chrome/browser/resources/extensions/extension_list.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('options', function() {
   'use strict';
 
   /**
    * A lookup helper function to find the first node that has an id (starting
    * at |node| and going up the parent chain).
@@ skipping 17 matching lines @@
   /**
    * @type {Object.<string, boolean>} A map from extension id to a boolean
    *     indicating whether the incognito warning is showing. This persists
    *     between calls to decorate.
    */
   var butterBarVisibility = {};
 
   ExtensionsList.prototype = {
     __proto__: HTMLDivElement.prototype,
 
+    /**
+     * @type {number} Appended to icon URL as a query string to prevent
+     * the icon from caching. Increments each time an extension is reloaded.
+     */
+    iconQueryId_: 0,
+
     /** @override */
     decorate: function() {
       this.textContent = '';
 
       this.showExtensionNodes_();
     },
 
     getIdQueryParam_: function() {
       return parseQueryParams(document.location)['id'];
     },
@@ skipping 42 matching lines @@
         node.classList.add('inactive-extension');
 
       if (!extension.userModifiable)
         node.classList.add('may-not-disable');
 
       var id_to_highlight = this.getIdQueryParam_();
       if (node.id == id_to_highlight)
         node.classList.add('extension-highlight');
 
       var item = node.querySelector('.extension-list-item');
-      item.style.backgroundImage = 'url(' + extension.icon + ')';
+      item.style.backgroundImage = 'url(' + extension.icon + '?' +
+                                   this.iconQueryId_++ + ')';

[not at google - send to devlin, 2013/02/13 01:59:31]

Ah I see - is the problem just that the background image isn't changing, so the
DOM doesn't know that it need to reload?

Would something like this work:

var iconUrl = 'url(' + extension.icon + ')';
if (iconUrl == item.style.backgroundImage)
  delete item.style.backgroundImage;
item.style.backgroundImage = iconUrl;

if not, something like

var iconUrl = 'url(' + extension.icon + ')';
if (iconUrl == item.style.backgroundImage) {
  delete item.style.backgroundImage;
  setTimeout(function() {
    item.style.backgroundImage = iconUrl;
  }, 0);
} else {
  item.style.backgroundImage = iconUrl;
}

etc...

[not at google - send to devlin, 2013/02/13 02:05:27]

Ok I straight away realised this was dumb, since the iconUrl isn't going to
change, that's the point. What I *mean't* was like

delete item.style.backgroundImage;
item.style.backgroundImage = '(' + extension.icon + ')';

or

delete item.style.backgroundImage;
setTimeout(function() {
  item.style.backgroundImage = '(' + extension.icon + ')';
}, 0);

[epeterson, 2013/02/14 01:09:23]

I've just tried these suggestions, and, unfortunately, neither of them appear to
be convincing the DOM that it needs to reload.

 
       var title = node.querySelector('.extension-title');
       title.textContent = extension.name;
 
       var version = node.querySelector('.extension-version');
       version.textContent = extension.version;
 
       var disableReason = node.querySelector('.extension-disable-reason');
       disableReason.textContent = extension.disableReason;
 
@@ skipping 217 matching lines @@
       }
 
       this.appendChild(node);
     }
   };
 
   return {
     ExtensionsList: ExtensionsList
   };
 });