Issue 5899 - Use CSS attribute selectors for collapsing media elements

include.preload.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 "use strict";
 
-let {splitSelector} = require("common");
-let {ElemHideEmulation} = require("content_elemHideEmulation");
+let {splitSelector} = require("./adblockpluscore/lib/common");
+let {ElemHideEmulation} =
+  require("./adblockpluscore/lib/content/elemHideEmulation");
 
 // This variable is also used by our other content scripts.
 let elemhide;
 
 const typeMap = new Map([
   ["img", "IMAGE"],
   ["input", "IMAGE"],
   ["picture", "IMAGE"],
   ["audio", "MEDIA"],
   ["video", "MEDIA"],
   ["frame", "SUBDOCUMENT"],
   ["iframe", "SUBDOCUMENT"],
   ["object", "OBJECT"],
   ["embed", "OBJECT"]
 ]);
 
 let collapsingSelectors = new Set();

[kzar, 2018/02/26 17:18:58]

I guess we'll slowly leak memory here, since we never remove the selectors
again. I wonder if it matters and if there's something we can do to avoid that?

[Manish Jethani, 2018/02/27 13:11:49]

I wouldn't call that "leaking memory" since we do need the selectors to stay in
the set (i.e. we don't have a case for removing any selector, and if we did we
would do it).

 
 function getURLsFromObjectElement(element)
 {
   let url = element.getAttribute("data");
   if (url)
     return [url];
 
   for (let child of element.children)
   {
     if (child.localName != "param")
@@ skipping 88 matching lines @@
 
   if (!element.getAttribute("src"))
     return false;
 
   for (let child of element.children)
   {
     // If the <video> or <audio> element contains any <source> or <track>
     // children, we cannot address it in CSS by the source URL; in that case we
     // don't "collapse" it using a CSS selector but rather hide it directly by
     // setting the style="..." attribute.
-    if (["source", "track"].includes(child.localName))
+    if (child.localName == "source" || child.localName == "track")
       return false;
   }
 
   return true;
 }
 
 function collapseMediaElement(element, srcValue)
 {
-  let selector = srcValue ?

[kzar, 2018/02/26 17:18:58]

Nit: It would be clearer to do this IMO:

if (!srcValue)
  return;

let selector = element.localName + "[src=" + CSS.escape(srcValue) + "]";

...

if (!collapsingSelectors.has(selector))

[Manish Jethani, 2018/02/27 13:11:49]

Ah, you're right.

Done.

-                   element.localName + "[src=" + CSS.escape(srcValue) + "]" :

[kzar, 2018/02/26 17:18:58]

Maybe a dumb question but could this end up matching other elements too?

[Manish Jethani, 2018/02/27 13:11:49]

No, that's a good question.

In isCollapsibleMediaElement we're checking if the element is a media element
(<video> or <audio>), if it has an src property, and if it has no child elements
<source> or <track>. If all of these are true, then it's collapsible. Why?
Because getURLsFromMediaElement will return only the value of the src property 
in this case, so we can be certain that whatever element we're collapsing is
based solely on the value of that property.

Since the src property in JS reflects the value of the src attribute in HTML, we
can hide the element based on the value of src attribute using a CSS attribute
selector.

So basically if there are multiple media elements on the page with the same src
attribute value, then they will all be hidden (even if their media hasn't
started loading yet!), and this is a good thing. We do want to hide those.

-                   null;
+  if (!srcValue)
+    return;
+
+  let selector = element.localName + "[src=" + CSS.escape(srcValue) + "]";
+
   // Adding selectors is expensive so do it only if we really have a new
   // selector.
-  if (selector && !collapsingSelectors.has(selector))
+  if (!collapsingSelectors.has(selector))
   {
     collapsingSelectors.add(selector);
-    elemhide.addSelectors(Array.from(collapsingSelectors), null, "collapsing");

[Manish Jethani, 2018/02/22 06:55:06]

There's a new "collapsing" group for these selectors.

Ideally we would have an append-only mode for the collapsing selectors since
they are never removed. This would make it more efficient.

[kzar, 2018/02/27 14:18:38]

Good idea, let's do that now?

[Manish Jethani, 2018/02/27 16:00:22]

Done.

+    elemhide.addSelectors([selector], null, "collapsing", true);
   }
 }
 
 function hideElement(element)
 {
   function doHide()
   {
     let propertyName = "display";
     let propertyValue = "none";
     if (element.localName == "frame")
@@ skipping 20 matching lines @@
 function checkCollapse(element)
 {
   let mediatype = typeMap.get(element.localName);
   if (!mediatype)
     return;
 
   let urls = getURLsFromElement(element);
   if (urls.length == 0)
     return;
 
-  let collapsible = isCollapsibleMediaElement(element, mediatype);

[kzar, 2018/02/26 17:18:58]

IMO this variable name is misleading since non-media elements are collapsible
too right?

[Manish Jethani, 2018/02/27 13:11:49]

Yeah, I suppose you're right.

Updated.

+  let collapsibleMediaElement = isCollapsibleMediaElement(element, mediatype);
 
   // Save the value of the src attribute because it can change between now and
   // when we get the response from the background page.
-  let srcValue = collapsible ? element.getAttribute("src") : null;

[Manish Jethani, 2018/02/22 06:55:06]

If the pre-roll ad is blocked then pretty quickly the page continues on to the
actual video content, so we need to make sure we get the original value for the
pre-roll before it is changed.

[kzar, 2018/02/26 17:18:58]

Acknowledged.

+  let srcValue = collapsibleMediaElement ? element.getAttribute("src") : null;
 
   browser.runtime.sendMessage(
     {
       type: "filters.collapse",
       urls,
       mediatype,
       baseURL: document.location.href
     },
     collapse =>
     {
       if (collapse)
       {
-        if (collapsible)
+        if (collapsibleMediaElement)
           collapseMediaElement(element, srcValue);
         else
           hideElement(element);
       }
     }
   );
 }
 
 function checkSitekey()
 {
@@ skipping 151 matching lines @@
   }
 };
 
 function ElemHide()
 {
   this.shadow = this.createShadowTree();
   this.styles = new Map();
   this.tracer = null;
   this.inline = true;
   this.inlineEmulated = true;
-  this.emulatedPatterns = null;
 
   this.elemHideEmulation = new ElemHideEmulation(
     this.addSelectors.bind(this),
     this.hideElements.bind(this)
   );
 }
 ElemHide.prototype = {
   selectorGroupSize: 1024,
 
   createShadowTree()
   {
     // Use Shadow DOM if available as to not mess with with web pages that
     // rely on the order of their own <style> tags (#309). However, creating
     // a shadow root breaks running CSS transitions. So we have to create
     // the shadow root before transistions might start (#452).
     if (!("createShadowRoot" in document.documentElement))
       return null;
 
+    // Both Firefox and Chrome 66+ support user style sheets, so we can avoid
+    // creating an unnecessary shadow root on these platforms.
+    let match = /\bChrome\/(\d+)/.exec(navigator.userAgent);
+    if (!match || match[1] >= 66)
+      return null;
+
     // Using shadow DOM causes issues on some Google websites,
     // including Google Docs, Gmail and Blogger (#1770, #2602, #2687).
     if (/\.(?:google|blogger)\.com$/.test(document.domain))
       return null;
 
     // Finally since some users have both AdBlock and Adblock Plus installed we
     // have to consider how the two extensions interact. For example we want to
     // avoid creating the shadowRoot twice.
     let shadow = document.documentElement.shadowRoot ||
                  document.documentElement.createShadowRoot();
-    shadow.appendChild(document.createElement("shadow"));
+    shadow.appendChild(document.createElement("content"));
 
     return shadow;
   },
 
-  addSelectorsInline(selectors, groupName)
+  addSelectorsInline(selectors, groupName, appendOnly = false)
   {
     let style = this.styles.get(groupName);
 
-    if (style)
+    if (style && !appendOnly)
     {
       while (style.sheet.cssRules.length > 0)
         style.sheet.deleteRule(0);
     }
 
     if (selectors.length == 0)
       return;
 
     if (!style)
     {
@@ skipping 47 matching lines @@
     for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize)
     {
       let selector = preparedSelectors.slice(
         i, i + this.selectorGroupSize
       ).join(", ");
       style.sheet.insertRule(selector + "{display: none !important;}",
                              style.sheet.cssRules.length);
     }
   },
 
-  addSelectors(selectors, filters, groupName = "emulated")

[Manish Jethani, 2018/02/22 06:55:06]

Using a default value for groupName here (instead of setting it in the body or
repeating it).

[kzar, 2018/02/26 17:18:59]

Acknowledged.

+  addSelectors(selectors, filters, groupName = "emulated", appendOnly = false)
   {
     if (this.inline || this.inlineEmulated)
     {
       // Insert the style rules inline if we have been instructed by the
       // background page to do so. This is usually the case, except on platforms
       // that do support user stylesheets via the browser.tabs.insertCSS API
       // (Firefox 53 onwards for now and possibly Chrome in the near future).
       // Once all supported platforms have implemented this API, we can remove
       // the code below. See issue #5090.
       // Related Chrome and Firefox issues:
       // https://bugs.chromium.org/p/chromium/issues/detail?id=632009
       // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026
-      this.addSelectorsInline(selectors, groupName);
+      this.addSelectorsInline(selectors, groupName, appendOnly);
     }
     else
     {
       browser.runtime.sendMessage({
         type: "elemhide.injectSelectors",
         selectors,
-        groupName
+        groupName,
+        appendOnly
       });
     }
 
-    if (this.tracer)
+    // Only trace selectors that are based directly on hiding filters
+    // (i.e. leave out collapsing selectors).
+    if (this.tracer && groupName != "collapsing")
       this.tracer.addSelectors(selectors, filters);
   },
 
   hideElements(elements, filters)
   {
     for (let element of elements)
       hideElement(element);
 
     if (this.tracer)
     {
@@ skipping 18 matching lines @@
 
       this.inline = response.inline;
       this.inlineEmulated = !!response.inlineEmulated;
 
       if (this.inline)
         this.addSelectorsInline(response.selectors, "standard");
 
       if (this.tracer)
         this.tracer.addSelectors(response.selectors);
 
+      // Prefer CSS selectors for -abp-has and -abp-contains unless the
+      // background page has asked us to use inline styles.
+      this.elemHideEmulation.useInlineStyles = this.inline ||
+                                               this.inlineEmulated;
+
       this.elemHideEmulation.apply(response.emulatedPatterns);
     });
   }
 };
 
 if (document instanceof HTMLDocument)
 {
   checkSitekey();
 
   elemhide = new ElemHide();
   elemhide.apply();
 
   document.addEventListener("error", event =>
   {
     checkCollapse(event.target);
   }, true);
 
   document.addEventListener("load", event =>
   {
     let element = event.target;
     if (/^i?frame$/.test(element.localName))
       checkCollapse(element);
   }, true);
 }
 
 window.checkCollapse = checkCollapse;
 window.elemhide = elemhide;
 window.typeMap = typeMap;
 window.getURLsFromElement = getURLsFromElement;