[Android] Use fallback icon if there is no large favicon on the history page

chrome/browser/resources/history/history.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.
 
 <include src="../uber/uber_utils.js">
 <include src="history_focus_manager.js">
 
 ///////////////////////////////////////////////////////////////////////////////
 // Globals:
 /** @const */ var RESULTS_PER_PAGE = 150;
@@ skipping 74 matching lines @@
  *     visit before it.
  * @param {HistoryModel} model The model object this entry belongs to.
  * @constructor
  */
 function Visit(result, continued, model) {
   this.model_ = model;
   this.title_ = result.title;
   this.url_ = result.url;
   this.domain_ = result.domain;
   this.starred_ = result.starred;
+  this.fallbackFaviconText_ = result.fallbackFaviconText;
 
   // These identify the name and type of the device on which this visit
   // occurred. They will be empty if the visit occurred on the current device.
   this.deviceName = result.deviceName;
   this.deviceType = result.deviceType;
 
   // The ID will be set according to when the visit was displayed, not
   // received. Set to -1 to show that it has not been set yet.
   this.id_ = -1;
 
@@ skipping 107 matching lines @@
       bookmarkSection.removeEventListener('click', f);
       e.preventDefault();
     }.bind(this));
   }
 
   if (focusless)
     bookmarkSection.tabIndex = -1;
 
   entryBox.appendChild(bookmarkSection);
 
+  if (addTitleFavicon || this.blockedVisit) {
+    var faviconSection = createElementWithClassName('div', 'favicon');
+    if (this.blockedVisit)
+      faviconSection.classList.add('blocked-icon');
+    else
+      this.loadFavicon_(faviconSection);
+    entryBox.appendChild(faviconSection);
+  }
+
   var visitEntryWrapper = /** @type {HTMLElement} */(
       entryBox.appendChild(document.createElement('div')));
   if (addTitleFavicon || this.blockedVisit)
     visitEntryWrapper.classList.add('visit-entry');
   if (this.blockedVisit) {
     visitEntryWrapper.classList.add('blocked-indicator');
     visitEntryWrapper.appendChild(this.getVisitAttemptDOM_());
   } else {
     var title = visitEntryWrapper.appendChild(
         this.getTitleDOM_(isSearchResult));
 
-    if (addTitleFavicon)
-      this.addFaviconToElement_(visitEntryWrapper);
-
     if (focusless)
       title.querySelector('a').tabIndex = -1;
 
     visitEntryWrapper.appendChild(domain);
   }
 
   if (isMobileVersion()) {
     if (this.model_.editingEntriesAllowed) {
       var removeButton = createElementWithClassName('button', 'remove-entry');
       removeButton.setAttribute('aria-label',
@@ skipping 187 matching lines @@
 Visit.prototype.getVisitAttemptDOM_ = function() {
   var node = createElementWithClassName('div', 'title');
   node.innerHTML = loadTimeData.getStringF('blockedVisitText',
                                            this.url_,
                                            this.id_,
                                            this.domain_);
   return node;
 };
 
 /**
- * Set the favicon for an element.
- * @param {Element} el The DOM element to which to add the icon.
+ * Load the favicon for an element.
+ * @param {Element} faviconDiv The DOM element for which to load the icon.
  * @private
  */
-Visit.prototype.addFaviconToElement_ = function(el) {
-  var url = isMobileVersion() ?
-      getFaviconImageSet(this.url_, 32, 'touch-icon') :
-      getFaviconImageSet(this.url_);
-  el.style.backgroundImage = url;
+Visit.prototype.loadFavicon_ = function(faviconDiv) {
+  if (cr.isAndroid) {
+    // On Android, if a large icon is unavailable, an HTML/CSS  fallback favicon
+    // is generated because Android does not yet support text drawing in native.
+
+    // Check whether a fallback favicon needs to be generated.
+    var desiredPixelSize = 32 * window.devicePixelRatio;
+    var img = new Image();
+    img.onload = this.onLargeFaviconLoadedAndroid_.bind(this, faviconDiv);
+    img.src = 'chrome://large-icon/' + desiredPixelSize + '/' + this.url_;
+  } else {
+    faviconDiv.style.backgroundImage = getFaviconImageSet(this.url_);
+  }
 };
 
 /**
+ * Called when the chrome://large-icon image has finished loading.
+ * @param {Element} faviconDiv The DOM element to add the favicon to.
+ * @param {Event} event The onload event.
+ * @private
+ */
+Visit.prototype.onLargeFaviconLoadedAndroid_ = function(faviconDiv, event) {
+  // The loaded image should either:
+  // - Have the desired size.
+  // OR
+  // - Be 1x1 px with the background color for the fallback icon.
+  var loadedImg = event.target;
+  if (loadedImg.width == 1) {
+    faviconDiv.classList.add('fallback-favicon');
+    faviconDiv.textContent = this.fallbackFaviconText_;
+  }
+  faviconDiv.style.backgroundImage = url(loadedImg.src);
+};
+
+/**
  * Launch a search for more history entries from the same domain.
  * @private
  */
 Visit.prototype.showMoreFromSite_ = function() {
   recordUmaAction('HistoryPage_EntryMenuShowMoreFromSite');
   historyView.setSearch(this.domain_);
   $('search-field').focus();
 };
 
 /**
@@ skipping 869 matching lines @@
 
     siteDomainCheckbox.type = 'checkbox';
     siteDomainCheckbox.addEventListener('click', domainCheckboxClicked);
     siteDomainCheckbox.domain_ = domain;
     siteDomainCheckbox.setAttribute('aria-label', domain);
     siteDomainRow.appendChild(siteDomainCheckbox);
   }
 
   var siteArrow = siteDomainRow.appendChild(
       createElementWithClassName('div', 'site-domain-arrow'));
+  var siteFavicon = siteDomainRow.appendChild(
+      createElementWithClassName('div', 'favicon'));
   var siteDomain = siteDomainRow.appendChild(
       createElementWithClassName('div', 'site-domain'));
   var siteDomainLink = siteDomain.appendChild(new ActionLink);
   siteDomainLink.textContent = domain;
   var numberOfVisits = createElementWithClassName('span', 'number-visits');
   var domainElement = document.createElement('span');
 
   numberOfVisits.textContent = loadTimeData.getStringF('numberVisits',
                                                        domainVisits.length);
   siteDomain.appendChild(numberOfVisits);
 
-  domainVisits[0].addFaviconToElement_(siteDomain);
+  domainVisits[0].loadFavicon_(siteFavicon);
 
   siteDomainWrapper.addEventListener(
       'click', this.toggleGroupedVisits_.bind(this));
 
   if (this.model_.isSupervisedProfile) {
     siteDomainRow.appendChild(
         getFilteringStatusDOM(domainVisits[0].hostFilteringBehavior));
   }
 
   siteResults.appendChild(siteDomainWrapper);
@@ skipping 980 matching lines @@
     historyView.reload();
 }
 
 // Add handlers to HTML elements.
 document.addEventListener('DOMContentLoaded', load);
 
 // This event lets us enable and disable menu items before the menu is shown.
 document.addEventListener('canExecute', function(e) {
   e.canExecute = true;
 });