Bug 1487437: Only show a space for a pending icon if it started loading while the throbber was showing. r=dao.

This stops us from showing a pending space when an icon is added after loading is
complete causing us to shift the title when both pending and previous icon are
shown.

Differential Revision: https://phabricator.services.mozilla.com/D4694

--HG--
extra : moz-landing-system : lando

browser/base/content/browser.js

@@ -3681,7 +3681,9 @@ const DOMEventHandler = {
 
   setPendingIcon(aBrowser) {
     let tab = gBrowser.getTabForBrowser(aBrowser);
-    tab.setAttribute("pendingicon", "true");
+    if (tab.hasAttribute("busy")) {
+      tab.setAttribute("pendingicon", "true");
+    }
   },
 
   clearPendingIcon(aBrowser) {

browser/base/content/test/favicons/browser.ini

@@ -61,3 +61,5 @@ support-files =
 [browser_title_flicker.js]
 support-files =
   file_with_slow_favicon.html
+  blank.html
+  file_favicon.png

browser/base/content/test/favicons/browser_title_flicker.js

@@ -1,9 +1,4 @@
-// Verify that the title doesn't flicker if the icon takes too long to load.
-// We expect to see events in the following order:
-// "label" added to tab
-// "busy" removed from tab
-// icon available
-// In all those cases the title should be in the same position.
+const TEST_PATH = "http://example.com/browser/browser/base/content/test/favicons/";
 
 function waitForAttributeChange(tab, attr) {
   info(`Waiting for attribute ${attr}`);
@@ -19,12 +14,27 @@ function waitForAttributeChange(tab, attr) {
   });
 }
 
-add_task(async () => {
-  const testPath = "http://example.com/browser/browser/base/content/test/favicons/";
+function waitForPendingIcon() {
+  return new Promise(resolve => {
+    let listener = () => {
+      window.messageManager.removeMessageListener("Link:LoadingIcon", listener);
+      resolve();
+    };
 
+    window.messageManager.addMessageListener("Link:LoadingIcon", listener);
+  });
+}
+
+// Verify that the title doesn't flicker if the icon takes too long to load.
+// We expect to see events in the following order:
+// "label" added to tab
+// "busy" removed from tab
+// icon available
+// In all those cases the title should be in the same position.
+add_task(async () => {
   await BrowserTestUtils.withNewTab({ gBrowser, url: "about:blank" }, async (browser) => {
     let tab = gBrowser.getTabForBrowser(browser);
-    BrowserTestUtils.loadURI(browser, testPath + "file_with_slow_favicon.html");
+    BrowserTestUtils.loadURI(browser, TEST_PATH + "file_with_slow_favicon.html");
 
     await waitForAttributeChange(tab, "label");
     ok(tab.hasAttribute("busy"), "Should have seen the busy attribute");
@@ -41,3 +51,41 @@ add_task(async () => {
     is(bounds.x, newBounds.left, "Should have seen the title in the same place.");
   });
 });
+
+// Verify that the title doesn't flicker if a new icon is detected after load.
+add_task(async () => {
+  let iconAvailable = waitForFaviconMessage(true);
+  await BrowserTestUtils.withNewTab({ gBrowser, url: TEST_PATH + "blank.html" }, async (browser) => {
+    let icon = await iconAvailable;
+    is(icon.iconURL, "http://example.com/favicon.ico");
+
+    let tab = gBrowser.getTabForBrowser(browser);
+    let label = document.getAnonymousElementByAttribute(tab, "anonid", "tab-label");
+    let bounds = label.getBoundingClientRect();
+
+    await ContentTask.spawn(browser, null, () => {
+      let link = content.document.createElement("link");
+      link.setAttribute("href", "file_favicon.png");
+      link.setAttribute("rel", "icon");
+      link.setAttribute("type", "image/png");
+      content.document.head.appendChild(link);
+    });
+
+    ok(!tab.hasAttribute("pendingicon"), "Should not have marked a pending icon");
+    let newBounds = label.getBoundingClientRect();
+    is(bounds.x, newBounds.left, "Should have seen the title in the same place.");
+
+    await waitForPendingIcon();
+
+    ok(!tab.hasAttribute("pendingicon"), "Should not have marked a pending icon");
+    newBounds = label.getBoundingClientRect();
+    is(bounds.x, newBounds.left, "Should have seen the title in the same place.");
+
+    icon = await waitForFaviconMessage(true);
+    is(icon.iconURL, TEST_PATH + "file_favicon.png", "Should have loaded the new icon.");
+
+    ok(!tab.hasAttribute("pendingicon"), "Should not have marked a pending icon");
+    newBounds = label.getBoundingClientRect();
+    is(bounds.x, newBounds.left, "Should have seen the title in the same place.");
+  });
+});