Unified Diff: include.preload.js
Issue 5989914281771008:
Use Shadow DOM for element hiding (Closed)
Patch Set: Fixed Shadow DOM usage and simplified code
Created April 15, 2014, 7:06 p.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« background.js ('k')
|
no next file »
|
no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: include.preload.js |
| =================================================================== |
| --- a/include.preload.js |
| +++ b/include.preload.js |
| @@ -17,44 +17,41 @@ |
| var SELECTOR_GROUP_SIZE = 20; |
| -var elemhideElt = null; |
| - |
| // Sets the currently used CSS rules for elemhide filters |
| function setElemhideCSSRules(selectors) |
| { |
| - if (elemhideElt && elemhideElt.parentNode) |
| - elemhideElt.parentNode.removeChild(elemhideElt); |
| - |
| - if (!selectors) |
| + if (selectors.length == 0) |
| return; |
| - elemhideElt = document.createElement("style"); |
| - elemhideElt.setAttribute("type", "text/css"); |
| + var style = document.createElement("style"); |
| + style.setAttribute("type", "text/css"); |
| - // Try to insert the style into the <head> tag, inserting directly under the |
| - // document root breaks dev tools functionality: |
| - // http://code.google.com/p/chromium/issues/detail?id=178109 |
| - (document.head || document.documentElement).appendChild(elemhideElt); |
| + // Use Shadow DOM if available to don't mess with web pages |
| + // that rely on the order of their own <style> tags (#309) |
| + if ("webkitCreateShadowRoot" in document.documentElement) |
| + { |
| + var shadow = document.documentElement.webkitCreateShadowRoot(); |
| + shadow.appendChild(document.createElement("shadow")); |
| + shadow.appendChild(style); |
| - var elt = elemhideElt; // Use a local variable to avoid racing conditions |
| - function setRules() |
| + for (var i = 0; i < selectors.length; i++) |
| + selectors[i] = "::-webkit-distributed(" + selectors[i] + ")"; |
| + } |
| + else |
| { |
| - if (!elt.sheet) |
| - { |
| - // Stylesheet didn't initialize yet, wait a little longer |
| - window.setTimeout(setRules, 0); |
| - return; |
| - } |
| + // Try to insert the style into the <head> tag, inserting directly under the |
| + // document root breaks dev tools functionality: |
| + // http://code.google.com/p/chromium/issues/detail?id=178109 |
| + (document.head || document.documentElement).appendChild(style); |
| + } |
| - // WebKit apparently chokes when the selector list in a CSS rule is huge. |
| - // So we split the elemhide selectors into groups. |
| - for (var i = 0, j = 0; i < selectors.length; i += SELECTOR_GROUP_SIZE, j++) |
| - { |
| - var selector = selectors.slice(i, i + SELECTOR_GROUP_SIZE).join(", "); |
| - elt.sheet.insertRule(selector + " { display: none !important; }", j); |
| - } |
| + // WebKit apparently chokes when the selector list in a CSS rule is huge. |
| + // So we split the elemhide selectors into groups. |
| + for (var i = 0; selectors.length > 0; i++) |
| + { |
| + var selector = selectors.splice(0, SELECTOR_GROUP_SIZE).join(", "); |
| + style.sheet.insertRule(selector + " { display: none !important; }", i); |
| } |
| - setRules(); |
| } |
| var typeMap = { |
« no previous file with comments
|
« background.js ('k')
|
no next file »
|
no next file with comments »
