Issue 6507 - Inject style sheet proactively from background page

lib/cssInjection.js

Index: lib/cssInjection.js
===================================================================
--- a/lib/cssInjection.js
+++ b/lib/cssInjection.js
@@ -33,16 +33,35 @@
 // at all, even if it's available.
 // See https://crbug.com/608854
 const styleSheetRemovalSupported = info.platform == "gecko";
 
 const selectorGroupSize = 1024;
 
 let userStyleSheetsSupported = true;
 
+function delay(time, func = () => {}, ...args)

[Manish Jethani, 2018/04/06 06:20:02]

This simply wraps setTimeout into a promise, which is convenient to use
elsewhere (in a promise chain).

+{
+  return new Promise((resolve, reject) =>
+  {
+    setTimeout(() =>
+    {
+      try
+      {
+        resolve(func(...args));
+      }
+      catch (error)
+      {
+        reject(error);
+      }
+    },
+    time);
+  });
+}
+
 function* splitSelectors(selectors)
 {
   // Chromium's Blink engine supports only up to 8,192 simple selectors, and
   // even fewer compound selectors, in a rule. The exact number of selectors
   // that would work depends on their sizes (e.g. "#foo .bar" has a size of 2).
   // Since we don't know the sizes of the selectors here, we simply split them
   // into groups of 1,024, based on the reasonable assumption that the average
   // selector won't have a size greater than 8. The alternative would be to
@@ -152,57 +171,94 @@
   // style sheet now.
   if (oldStyleSheet && oldStyleSheet != styleSheet)
     removeStyleSheet(tabId, frameId, oldStyleSheet);
 
   frame.injectedStyleSheets.set(groupName, styleSheet);
   return true;
 }
 
-port.on("elemhide.getSelectors", (message, sender) =>
+function doElementHiding(page, frame)
 {
   let selectors = [];
   let emulatedPatterns = [];
-  let trace = devtools && devtools.hasPanel(sender.page);
+  let trace = devtools && devtools.hasPanel(page);
   let inline = !userStyleSheetsSupported;
 
-  if (!checkWhitelisted(sender.page, sender.frame,
+  if (!checkWhitelisted(page, frame,
                         RegExpFilter.typeMap.DOCUMENT |
                         RegExpFilter.typeMap.ELEMHIDE))
   {
-    let hostname = extractHostFromFrame(sender.frame);
-    let specificOnly = checkWhitelisted(sender.page, sender.frame,
+    let hostname = extractHostFromFrame(frame);
+    let specificOnly = checkWhitelisted(page, frame,
                                         RegExpFilter.typeMap.GENERICHIDE);
 
     selectors = ElemHide.getSelectorsForDomain(
       hostname,
       specificOnly ? ElemHide.SPECIFIC_ONLY : ElemHide.ALL_MATCHING
     );
 
     for (let filter of ElemHideEmulation.getRulesForDomain(hostname))
       emulatedPatterns.push({selector: filter.selector, text: filter.text});
   }
 
-  if (!inline && !updateFrameStyles(sender.page.id, sender.frame.id,
-                                    selectors, "standard"))
-  {
+  if (!inline && !updateFrameStyles(page.id, frame.id, selectors, "standard"))
     inline = true;
-  }
 
-  let response = {trace, inline, emulatedPatterns};
+  let message = {type: "elemhide.apply", trace, inline};
   if (trace || inline)
-    response.selectors = selectors;
+    message.selectors = selectors;
+
+  if (emulatedPatterns.length > 0)
+    message.emulatedPatterns = emulatedPatterns;
 
   // If we can't remove user style sheets using tabs.removeCSS, we'll only keep
   // adding them, which could cause problems with emulation filters as
   // described in issue #5864. Instead, we can just ask the content script to
   // add styles for emulation filters inline.
   if (!styleSheetRemovalSupported)
-    response.inlineEmulated = true;
+    message.inlineEmulated = true;
+
+  // In most cases on modern browsers there's nothing for the content script to
+  // do.
+  if (!message.selectors && !message.emulatedPatterns)
+    return;
+
+  // The content script is loaded at about the same time as we get the
+  // webNavigation.onCommitted event; sometimes we have to retry a couple of
+  // times before we get through.
+  browser.tabs.sendMessage(page.id, message, {frameId: frame.id})
+  .catch(() =>
+    delay(250, browser.tabs.sendMessage, page.id, message, {frameId: frame.id})

[Manish Jethani, 2018/04/06 06:20:02]

Unfortunately sometimes the content script hasn't loaded yet when this code runs
(rarely, but it happens). Most of the time on modern browsers the code won't
even come to this point, because everything is handled by the background page.
But when the DevTools panel is open, for example, we still need to contact the
content script. In that case, we can retry a couple of times with increasing
delays of 250ms and 1s.

+  )
+  .catch(() =>
+    delay(1000, browser.tabs.sendMessage, page.id, message, {frameId: frame.id})
+  );
+}
 
-  return response;
+browser.webNavigation.onCommitted.addListener(({tabId, frameId, url}) =>
+{
+  // There's a bug in Chrome that causes webNavigation.onCommitted to get
+  // dispatched twice if there's a URL filter present, therefore we must listen
+  // for all URLs and do an explicit check here.
+  // https://crbug.com/827855
+  if (!/^(https?:\/\/|about:blank\b|about:srcdoc\b)/.test(url))
+    return;
+
+  let page = new ext.Page({id: tabId, url: url});
+  let frame = ext.getFrame(tabId, frameId);
+
+  if (!frame)
+    return;
+
+  doElementHiding(page, frame);
+});
+
+port.on("elemhide.needApply", (message, sender) =>
+{
+  doElementHiding(sender.page, sender.frame);
 });
 
 port.on("elemhide.injectSelectors", (message, sender) =>
 {
   updateFrameStyles(sender.page.id, sender.frame.id, message.selectors,
                     message.groupName);
 });