Side by Side Diff: include.preload.js
Issue 5838948538515456:
Issue 370 - Make "Block element" hide elements for added filters (Closed)
Patch Set: Addressed comments and simplified loop
Created March 4, 2015, 9:35 p.m.
| Left: | ||
| Right: |
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« include.postload.js ('k')
|
no next file »
|
no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| OLD | NEW |
|---|---|
| 1 /* | 1 /* |
| 2 * This file is part of Adblock Plus <https://adblockplus.org/>, | 2 * This file is part of Adblock Plus <https://adblockplus.org/>, |
| 3 * Copyright (C) 2006-2015 Eyeo GmbH | 3 * Copyright (C) 2006-2015 Eyeo GmbH |
| 4 * | 4 * |
| 5 * Adblock Plus is free software: you can redistribute it and/or modify | 5 * Adblock Plus is free software: you can redistribute it and/or modify |
| 6 * it under the terms of the GNU General Public License version 3 as | 6 * it under the terms of the GNU General Public License version 3 as |
| 7 * published by the Free Software Foundation. | 7 * published by the Free Software Foundation. |
| 8 * | 8 * |
| 9 * Adblock Plus is distributed in the hope that it will be useful, | 9 * Adblock Plus is distributed in the hope that it will be useful, |
| 10 * but WITHOUT ANY WARRANTY; without even the implied warranty of | 10 * but WITHOUT ANY WARRANTY; without even the implied warranty of |
| (...skipping 125 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 136 // Using non-standard addRule() here. This is the only way | 136 // Using non-standard addRule() here. This is the only way |
| 137 // to add rules at the end of a cross-origin stylesheet | 137 // to add rules at the end of a cross-origin stylesheet |
| 138 // because we don't know how many rules are already in there | 138 // because we don't know how many rules are already in there |
| 139 stylesheet.addRule(selector, "display: none !important;"); | 139 stylesheet.addRule(selector, "display: none !important;"); |
| 140 } | 140 } |
| 141 } | 141 } |
| 142 ); | 142 ); |
| 143 }); | 143 }); |
| 144 | 144 |
| 145 observer.observe(style.parentNode, {childList: true}); | 145 observer.observe(style.parentNode, {childList: true}); |
| 146 return observer; | |
| 146 } | 147 } |
| 147 | 148 |
| 148 function convertSelectorsForShadowDOM(selectors) | 149 function convertSelectorsForShadowDOM(selectors) |
| 149 { | 150 { |
| 150 var result = []; | 151 var result = []; |
| 151 var prefix = "::content "; | 152 var prefix = "::content "; |
| 152 | 153 |
| 153 for (var i = 0; i < selectors.length; i++) | 154 for (var i = 0; i < selectors.length; i++) |
| 154 { | 155 { |
| 155 var selector = selectors[i]; | 156 var selector = selectors[i]; |
| (...skipping 17 matching lines...) Expand all Loading... | |
| 173 } | 174 } |
| 174 | 175 |
| 175 result.push(prefix + selector.substring(start)); | 176 result.push(prefix + selector.substring(start)); |
| 176 } | 177 } |
| 177 | 178 |
| 178 return result; | 179 return result; |
| 179 } | 180 } |
| 180 | 181 |
| 181 function init(document) | 182 function init(document) |
| 182 { | 183 { |
| 184 var shadow = null; | |
| 185 var style = null; | |
| 186 var observer = null; | |
| 187 | |
| 183 // Use Shadow DOM if available to don't mess with web pages that rely on | 188 // Use Shadow DOM if available to don't mess with web pages that rely on |
| 184 // the order of their own <style> tags (#309). | 189 // the order of their own <style> tags (#309). |
| 185 // | 190 // |
| 186 // However, creating a shadow root breaks running CSS transitions. So we | 191 // However, creating a shadow root breaks running CSS transitions. So we |
| 187 // have to create the shadow root before transistions might start (#452). | 192 // have to create the shadow root before transistions might start (#452). |
| 188 // | 193 // |
| 189 // Also, we can't use shadow DOM on Google Docs, since it breaks printing | 194 // Also, we can't use shadow DOM on Google Docs, since it breaks printing |
| 190 // there (#1770). | 195 // there (#1770). |
| 191 var shadow = null; | |
| 192 if ("createShadowRoot" in document.documentElement && document.domain != "docs .google.com") | 196 if ("createShadowRoot" in document.documentElement && document.domain != "docs .google.com") |
| 193 { | 197 { |
| 194 shadow = document.documentElement.createShadowRoot(); | 198 shadow = document.documentElement.createShadowRoot(); |
| 195 shadow.appendChild(document.createElement("shadow")); | 199 shadow.appendChild(document.createElement("shadow")); |
| 196 } | 200 } |
| 197 | 201 |
| 198 // Sets the currently used CSS rules for elemhide filters | 202 var updateStylesheet = function(reinject) |
| 199 var setElemhideCSSRules = function(selectors) | |
| 200 { | 203 { |
| 201 if (selectors.length == 0) | 204 ext.backgroundPage.sendMessage({type: "get-selectors"}, function(selectors) |
| 202 return; | |
| 203 | |
| 204 var style = document.createElement("style"); | |
| 205 style.setAttribute("type", "text/css"); | |
| 206 | |
| 207 if (shadow) | |
| 208 { | 205 { |
| 209 shadow.appendChild(style); | 206 if (observer) |
| 210 selectors = convertSelectorsForShadowDOM(selectors); | |
| 211 } | |
| 212 else | |
| 213 { | |
| 214 // Try to insert the style into the <head> tag, inserting directly under t he | |
| 215 // document root breaks dev tools functionality: | |
| 216 // http://code.google.com/p/chromium/issues/detail?id=178109 | |
| 217 (document.head || document.documentElement).appendChild(style); | |
| 218 } | |
| 219 | |
| 220 var setRules = function() | |
| 221 { | |
| 222 // The sheet property might not exist yet if the | |
| 223 // <style> element was created for a sub frame | |
| 224 if (!style.sheet) | |
| 225 { | 207 { |
| 226 setTimeout(setRules, 0); | 208 observer.disconnect(); |
| 227 return; | 209 observer = null; |
| 228 } | 210 } |
| 229 | 211 |
| 230 // WebKit apparently chokes when the selector list in a CSS rule is huge. | 212 if (style && style.parentElement) |
| 231 // So we split the elemhide selectors into groups. | |
| 232 for (var i = 0; selectors.length > 0; i++) | |
| 233 { | 213 { |
| 234 var selector = selectors.splice(0, SELECTOR_GROUP_SIZE).join(", "); | 214 style.parentElement.removeChild(style); |
| 235 style.sheet.insertRule(selector + " { display: none !important; }", i); | 215 style = null; |
| 236 } | 216 } |
| 237 }; | |
| 238 | 217 |
| 239 setRules(); | 218 if (selectors.length > 0) |
| 240 reinjectRulesWhenRemoved(document, style); | 219 { |
| 220 // Create <style> element lazily, only if we add styles. Add it to | |
| 221 // the shadow DOM if possible. Otherwise fallback to the <head> or | |
| 222 // <html> element. If we have injected a style element before that | |
| 223 // has been removed (the sheet property is null), create a new one. | |
| 224 style = document.createElement("style"); | |
| 225 (shadow || document.head || document.documentElement).appendChild(style) ; | |
| 226 | |
| 227 // It can happen that the frame already navigated to a different | |
| 228 // document while we were waiting for the background page to respond. | |
| 229 // In that case the sheet property will stay null, after addind the | |
| 230 // <style> element to the shadow DOM. | |
| 231 if (style.sheet) | |
| 232 { | |
| 233 // If using shadow DOM, we have to add the ::content pseudo-element | |
| 234 // before each selector, in order to match elements within the | |
| 235 // insertion point. | |
| 236 if (shadow) | |
| 237 selectors = convertSelectorsForShadowDOM(selectors); | |
| 238 | |
| 239 // WebKit (and Blink?) apparently chokes when the selector list in a | |
| 240 // CSS rule is huge. So we split the elemhide selectors into groups. | |
| 241 for (var i = 0; selectors.length > 0; i++) | |
| 242 { | |
| 243 var selector = selectors.splice(0, SELECTOR_GROUP_SIZE).join(", "); | |
| 244 style.sheet.insertRule(selector + " { display: none !important; }", i); | |
| 245 } | |
| 246 } | |
| 247 | |
| 248 observer = reinjectRulesWhenRemoved(document, style); | |
| 249 } | |
| 250 }); | |
| 241 }; | 251 }; |
| 242 | 252 |
| 253 updateStylesheet(); | |
| 254 | |
| 243 document.addEventListener("error", function(event) | 255 document.addEventListener("error", function(event) |
| 244 { | 256 { |
| 245 checkCollapse(event.target); | 257 checkCollapse(event.target); |
| 246 }, true); | 258 }, true); |
| 247 | 259 |
| 248 document.addEventListener("load", function(event) | 260 document.addEventListener("load", function(event) |
| 249 { | 261 { |
| 250 var element = event.target; | 262 var element = event.target; |
| 251 | 263 |
| 252 if (/^i?frame$/.test(element.localName)) | 264 if (/^i?frame$/.test(element.localName)) |
| 253 checkCollapse(element); | 265 checkCollapse(element); |
| 254 | 266 |
| 255 // prior to Chrome 37, content scripts cannot run on about:blank, | 267 // prior to Chrome 37, content scripts cannot run on about:blank, |
| 256 // about:srcdoc and javascript: URLs. Moreover, as of Chrome 40 | 268 // about:srcdoc and javascript: URLs. Moreover, as of Chrome 40 |
| 257 // "load" and "error" events aren't dispatched there. So we have | 269 // "load" and "error" events aren't dispatched there. So we have |
| 258 // to apply element hiding and collapsing from the parent frame. | 270 // to apply element hiding and collapsing from the parent frame. |
| 259 if (/\bChrome\//.test(navigator.userAgent) && isInlineFrame(element)) | 271 if (/\bChrome\//.test(navigator.userAgent) && isInlineFrame(element)) |
| 260 { | 272 { |
| 261 init(element.contentDocument); | 273 init(element.contentDocument); |
| 262 | 274 |
| 263 for (var tagName in typeMap) | 275 for (var tagName in typeMap) |
| 264 Array.prototype.forEach.call(element.contentDocument.getElementsByTagNam e(tagName), checkCollapse); | 276 Array.prototype.forEach.call(element.contentDocument.getElementsByTagNam e(tagName), checkCollapse); |
| 265 } | 277 } |
| 266 }, true); | 278 }, true); |
| 267 | 279 |
| 268 ext.backgroundPage.sendMessage({type: "get-selectors"}, setElemhideCSSRules); | 280 return updateStylesheet; |
| 269 } | 281 } |
| 270 | 282 |
| 271 if (document instanceof HTMLDocument) | 283 if (document instanceof HTMLDocument) |
| 272 { | 284 { |
| 273 checkSitekey(); | 285 checkSitekey(); |
| 274 init(document); | 286 window.updateStylesheet = init(document); |
| 275 } | 287 } |
| OLD | NEW |
« no previous file with comments
|
« include.postload.js ('k')
|
no next file »
|
no next file with comments »
