Make favicons for about:history and about:bookmarks switch from lodpi to hidpi...

Make favicons for about:history and about:bookmarks switch from lodpi to hidpi when dragging browser from lodpi to hidpi screen

BUG=152121
Test=Manual, see bug

Review URL: https://chromiumcodereview.appspot.com/11762004

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@176019 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/bookmark_manager/js/bmm/bookmark_list.js

@@ -390,7 +390,7 @@ cr.define('bmm', function() {
       if (bmm.isFolder(bookmarkNode)) {
         this.className = 'folder';
       } else {
-        labelEl.style.backgroundImage = url(getFaviconUrl(bookmarkNode.url));
+        labelEl.style.backgroundImage = getFaviconImageSet(bookmarkNode.url);
         labelEl.style.backgroundSize = '16px';
         urlEl.textContent = bookmarkNode.url;
       }

chrome/browser/resources/history/history.js

@@ -196,7 +196,7 @@ Visit.prototype.addHighlightedText_ = function(node, content, highlightText) {
  */
 Visit.prototype.getTitleDOM_ = function() {
   var node = createElementWithClassName('div', 'title');
-  node.style.backgroundImage = url(getFaviconUrl(this.url_));
+  node.style.backgroundImage = getFaviconImageSet(this.url_);
   node.style.backgroundSize = '16px';
 
   var link = document.createElement('a');

chrome/browser/resources/ntp4/most_visited_page.js

@@ -94,9 +94,12 @@ cr.define('ntp', function() {
       this.classList.add('focusable');
 
       var faviconDiv = this.querySelector('.favicon');
-      var faviconUrl = getFaviconUrl(data.url);
-      faviconDiv.style.backgroundImage = url(faviconUrl);
-      chrome.send('getFaviconDominantColor', [faviconUrl, this.id]);
+      faviconDiv.style.backgroundImage = getFaviconImageSet(data.url);
+
+      // The favicon should have the same dominant color regardless of the
+      // device pixel ratio the favicon is requested for.
+      chrome.send('getFaviconDominantColor',
+                  [getFaviconUrlForCurrentDevicePixelRatio(data.url), this.id]);
 
       var title = this.querySelector('.title');
       title.textContent = data.title;

chrome/browser/resources/ntp4/other_sessions.js

@@ -212,8 +212,8 @@ cr.define('ntp', function() {
           a.className = 'footer-menu-item';
           a.textContent = tab.title;
           a.href = tab.url;
-          a.style.backgroundImage = url(
-              getFaviconUrl(tab.url, 16, /* session-favicon */ true));
+          a.style.backgroundImage =
+              getFaviconImageSet(tab.url, 16, /* session-favicon */ true);
 
           var clickHandler = this.makeClickHandler_(
               session.tag, String(window.sessionId), String(tab.sessionId));

chrome/browser/resources/ntp4/recently_closed.js

@@ -83,7 +83,7 @@ cr.define('ntp', function() {
         a.title = data.tabs.map(function(tab) { return tab.title; }).join('\n');
       } else {
         a.href = data.url;
-        a.style.backgroundImage = url(getFaviconUrl(data.url));
+        a.style.backgroundImage = getFaviconImageSet(data.url);
         a.textContent = data.title;
       }
 

chrome/browser/resources/ntp_search/thumbnail_page.js

@@ -91,7 +91,7 @@ cr.define('ntp', function() {
       var favicon = this.querySelector('.thumbnail-favicon') ||
                     this.ownerDocument.createElement('div');
       favicon.className = 'thumbnail-favicon';
-      favicon.style.backgroundImage = url(getFaviconUrl(dataUrl));
+      favicon.style.backgroundImage = getFaviconImageSet(dataUrl);
       this.appendChild(favicon);
 
       var self = this;

chrome/browser/resources/options/browser_options_startup_page_list.js

@@ -57,7 +57,7 @@ cr.define('options.browser_options', function() {
       titleEl.classList.add('weakrtl');
       titleEl.textContent = pageInfo.title;
       if (!this.isPlaceholder) {
-        titleEl.style.backgroundImage = url(getFaviconUrl(pageInfo.url));
+        titleEl.style.backgroundImage = getFaviconImageSet(pageInfo.url);
         titleEl.title = pageInfo.tooltip;
       }
 

chrome/browser/resources/options/home_page_overlay.js

@@ -99,7 +99,7 @@ cr.define('options', function() {
      */
     updateFavicon_: function() {
       var urlField = $('homepage-url-field');
-      urlField.style.backgroundImage = url(getFaviconUrl(urlField.value));
+      urlField.style.backgroundImage = getFaviconImageSet(urlField.value);
     },
 
     /**

chrome/browser/resources/options/search_engine_manager_engine_list.js

@@ -100,8 +100,7 @@ cr.define('options.search_engines', function() {
       faviconDivEl.className = 'favicon';
       if (!this.isPlaceholder) {
         faviconDivEl.style.backgroundImage =
-            url('chrome://favicon/iconurl@' + window.devicePixelRatio + 'x/' +
-                engine.iconURL);
+            imageset('chrome://favicon/iconurl@scalefactorx/' + engine.iconURL);
       }
       nameColEl.appendChild(faviconDivEl);
 

chrome/browser/resources/shared/js/util.js

@@ -37,6 +37,22 @@ function chromeSend(name, params, callbackName, callback) {
   chrome.send(name, params);
 }
 
+/**
+ * Returns the scale factors supported by this platform.
+ * @return {array} The supported scale factors.
+ */
+function getSupportedScaleFactors() {
+  var supportedScaleFactors = [];
+  if (cr.isMac || cr.isChromeOS) {
+    supportedScaleFactors.push(1);
+    supportedScaleFactors.push(2);
+  } else {
+    // Windows must be restarted to display at a different scale factor.
+    supportedScaleFactors.push(window.devicePixelRatio);
+  }
+  return supportedScaleFactors;
+}
+
 /**
  * Generates a CSS url string.
  * @param {string} s The URL to generate the CSS url for.
@@ -56,6 +72,36 @@ function url(s) {
   return 'url("' + s2 + '")';
 }
 
+/**
+ * Generates a CSS -webkit-image-set for a chrome:// url.
+ * An entry in the image set is added for each of getSupportedScaleFactors().
+ * The scale-factor-specific url is generated by replacing the first instance of
+ * 'scalefactor' in |path| with the numeric scale factor.
+ * @param {string} path The URL to generate an image set for.
+ *     'scalefactor' should be a substring of |path|.
+ * @return {string} The CSS -webkit-image-set.
+ */
+function imageset(path) {
+  var supportedScaleFactors = getSupportedScaleFactors();
+
+  var replaceStartIndex = path.indexOf('scalefactor');
+  if (replaceStartIndex < 0)
+    return url(path);
+
+  var s = '';
+  for (var i = 0; i < supportedScaleFactors.length; ++i) {
+    var scaleFactor = supportedScaleFactors[i];
+    var pathWithScaleFactor = path.substr(0, replaceStartIndex) + scaleFactor +
+        path.substr(replaceStartIndex + 'scalefactor'.length);
+
+    s += url(pathWithScaleFactor) + ' ' + scaleFactor + 'x';
+
+    if (i != supportedScaleFactors.length - 1)
+      s += ', ';
+  }
+  return '-webkit-image-set(' + s + ')';
+}
+
 /**
  * Parses query parameters from Location.
  * @param {string} location The URL to generate the CSS url for.
@@ -228,14 +274,34 @@ function appendParam(url, key, value) {
 }
 
 /**
- * Creates a new URL for a favicon request.
+ * Creates a CSS -webkit-image-set for a favicon request.
+ * @param {string} url The url for the favicon.
+ * @param {number=} opt_size Optional preferred size of the favicon.
+ * @param {boolean=} opt_sessionFavicon Optional flag to indicate if
+ *     requesting a session favicon.
+ * @return {string} -webkit-image-set for the favicon.
+ */
+function getFaviconImageSet(url, opt_size, opt_sessionFavicon) {
+  var size = opt_size || 16;
+  var type = opt_sessionFavicon ? 'session-favicon' : 'favicon';
+  return imageset(
+      'chrome://' + type + '/size/' + size + '@scalefactorx/' + url);
+}
+
+/**
+ * Creates a new URL for a favicon request for the current device pixel ratio.
+ * The URL must be updated when the user moves the browser to a screen with a
+ * different device pixel ratio. Use getFaviconImageSet() for the updating to
+ * occur automatically.
  * @param {string} url The url for the favicon.
  * @param {number=} opt_size Optional preferred size of the favicon.
  * @param {boolean=} opt_sessionFavicon Optional flag to indicate if
  *     requesting a session favicon.
  * @return {string} Updated URL for the favicon.
  */
-function getFaviconUrl(url, opt_size, opt_sessionFavicon) {
+function getFaviconUrlForCurrentDevicePixelRatio(url,
+                                                 opt_size,
+                                                 opt_sessionFavicon) {
   var size = opt_size || 16;
   var type = opt_sessionFavicon ? 'session-favicon' : 'favicon';
   return 'chrome://' + type + '/size/' + size + '@' +

chrome/common/extensions/docs/examples/api/fontSettings/js/util.js

@@ -226,15 +226,3 @@ function appendParam(url, key, value) {
     return url + '?' + param;
   return url + '&' + param;
 }
-
-/**
- * Creates a new URL for a favicon request.
- * @param {string} url The url for the favicon.
- * @param {number=} opt_size Optional preferred size of the favicon.
- * @return {string} Updated URL for the favicon.
- */
-function getFaviconUrl(url, opt_size) {
-  var size = opt_size || 16;
-  return 'chrome://favicon/size/' + size + '@' +
-      window.devicePixelRatio + 'x/' + url;
-}