Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Delta Between Two Patch Sets: include.preload.js

Issue 29370970: [adblockpluschrome] Issue 3596 - Added support for CSS property filters to devtools panel (Closed)
Left Patch Set: Addressed review comments Created Feb. 18, 2017, 12:56 p.m.
Right Patch Set: Addressed review comment Created Feb. 23, 2017, 2:23 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « dependencies ('k') | lib/devtools.js » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
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-2016 Eyeo GmbH 3 * Copyright (C) 2006-2016 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
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details. 12 * GNU General Public License for more details.
13 * 13 *
14 * You should have received a copy of the GNU General Public License 14 * You should have received a copy of the GNU General Public License
15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>. 15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
16 */ 16 */
17 17
18 var typeMap = { 18 "use strict";
19
20 const typeMap = {
19 "img": "IMAGE", 21 "img": "IMAGE",
20 "input": "IMAGE", 22 "input": "IMAGE",
21 "picture": "IMAGE", 23 "picture": "IMAGE",
22 "audio": "MEDIA", 24 "audio": "MEDIA",
23 "video": "MEDIA", 25 "video": "MEDIA",
24 "frame": "SUBDOCUMENT", 26 "frame": "SUBDOCUMENT",
25 "iframe": "SUBDOCUMENT", 27 "iframe": "SUBDOCUMENT",
26 "object": "OBJECT", 28 "object": "OBJECT",
27 "embed": "OBJECT" 29 "embed": "OBJECT"
28 }; 30 };
29 31
30 function getURLsFromObjectElement(element) 32 function getURLsFromObjectElement(element)
31 { 33 {
32 var url = element.getAttribute("data"); 34 let url = element.getAttribute("data");
33 if (url) 35 if (url)
34 return [url]; 36 return [url];
35 37
36 for (var i = 0; i < element.children.length; i++) 38 for (let child of element.children)
37 { 39 {
38 var child = element.children[i];
39 if (child.localName != "param") 40 if (child.localName != "param")
40 continue; 41 continue;
41 42
42 var name = child.getAttribute("name"); 43 let name = child.getAttribute("name");
43 if (name != "movie" && // Adobe Flash 44 if (name != "movie" && // Adobe Flash
44 name != "source" && // Silverlight 45 name != "source" && // Silverlight
45 name != "src" && // Real Media + Quicktime 46 name != "src" && // Real Media + Quicktime
46 name != "FileName") // Windows Media 47 name != "FileName") // Windows Media
47 continue; 48 continue;
48 49
49 var value = child.getAttribute("value"); 50 let value = child.getAttribute("value");
50 if (!value) 51 if (!value)
51 continue; 52 continue;
52 53
53 return [value]; 54 return [value];
54 } 55 }
55 56
56 return []; 57 return [];
57 } 58 }
58 59
59 function getURLsFromAttributes(element) 60 function getURLsFromAttributes(element)
60 { 61 {
61 var urls = []; 62 let urls = [];
62 63
63 if (element.src) 64 if (element.src)
64 urls.push(element.src); 65 urls.push(element.src);
65 66
66 if (element.srcset) 67 if (element.srcset)
67 { 68 {
68 var candidates = element.srcset.split(","); 69 for (let candidate of element.srcset.split(","))
69 for (var i = 0; i < candidates.length; i++) 70 {
70 { 71 let url = candidate.trim().replace(/\s+\S+$/, "");
71 var url = candidates[i].trim().replace(/\s+\S+$/, "");
72 if (url) 72 if (url)
73 urls.push(url); 73 urls.push(url);
74 } 74 }
75 } 75 }
76 76
77 return urls; 77 return urls;
78 } 78 }
79 79
80 function getURLsFromMediaElement(element) 80 function getURLsFromMediaElement(element)
81 { 81 {
82 var urls = getURLsFromAttributes(element); 82 let urls = getURLsFromAttributes(element);
83 83
84 for (var i = 0; i < element.children.length; i++) 84 for (let child of element.children)
85 { 85 {
86 var child = element.children[i];
87 if (child.localName == "source" || child.localName == "track") 86 if (child.localName == "source" || child.localName == "track")
88 urls.push.apply(urls, getURLsFromAttributes(child)); 87 urls.push.apply(urls, getURLsFromAttributes(child));
89 } 88 }
90 89
91 if (element.poster) 90 if (element.poster)
92 urls.push(element.poster); 91 urls.push(element.poster);
93 92
94 return urls; 93 return urls;
95 } 94 }
96 95
97 function getURLsFromElement(element) 96 function getURLsFromElement(element)
98 { 97 {
99 var urls; 98 let urls;
100 switch (element.localName) 99 switch (element.localName)
101 { 100 {
102 case "object": 101 case "object":
103 urls = getURLsFromObjectElement(element); 102 urls = getURLsFromObjectElement(element);
104 break; 103 break;
105 104
106 case "video": 105 case "video":
107 case "audio": 106 case "audio":
108 case "picture": 107 case "picture":
109 urls = getURLsFromMediaElement(element); 108 urls = getURLsFromMediaElement(element);
110 break; 109 break;
111 110
112 default: 111 default:
113 urls = getURLsFromAttributes(element); 112 urls = getURLsFromAttributes(element);
114 break; 113 break;
115 } 114 }
116 115
117 for (var i = 0; i < urls.length; i++) 116 for (let i = 0; i < urls.length; i++)
118 { 117 {
119 if (/^(?!https?:)[\w-]+:/i.test(urls[i])) 118 if (/^(?!https?:)[\w-]+:/i.test(urls[i]))
120 urls.splice(i--, 1); 119 urls.splice(i--, 1);
121 } 120 }
122 121
123 return urls; 122 return urls;
124 } 123 }
125 124
126 function checkCollapse(element) 125 function checkCollapse(element)
127 { 126 {
128 var mediatype = typeMap[element.localName]; 127 let mediatype = typeMap[element.localName];
129 if (!mediatype) 128 if (!mediatype)
130 return; 129 return;
131 130
132 var urls = getURLsFromElement(element); 131 let urls = getURLsFromElement(element);
133 if (urls.length == 0) 132 if (urls.length == 0)
134 return; 133 return;
135 134
136 ext.backgroundPage.sendMessage( 135 ext.backgroundPage.sendMessage(
137 { 136 {
138 type: "filters.collapse", 137 type: "filters.collapse",
139 urls: urls, 138 urls: urls,
140 mediatype: mediatype, 139 mediatype: mediatype,
141 baseURL: document.location.href 140 baseURL: document.location.href
142 }, 141 },
143 142
144 function(collapse) 143 collapse =>
145 { 144 {
146 function collapseElement() 145 function collapseElement()
147 { 146 {
148 var propertyName = "display"; 147 let propertyName = "display";
149 var propertyValue = "none"; 148 let propertyValue = "none";
150 if (element.localName == "frame") 149 if (element.localName == "frame")
151 { 150 {
152 propertyName = "visibility"; 151 propertyName = "visibility";
153 propertyValue = "hidden"; 152 propertyValue = "hidden";
154 } 153 }
155 154
156 if (element.style.getPropertyValue(propertyName) != propertyValue || 155 if (element.style.getPropertyValue(propertyName) != propertyValue ||
157 element.style.getPropertyPriority(propertyName) != "important") 156 element.style.getPropertyPriority(propertyName) != "important")
158 element.style.setProperty(propertyName, propertyValue, "important"); 157 element.style.setProperty(propertyName, propertyValue, "important");
159 } 158 }
160 159
161 if (collapse) 160 if (collapse)
162 { 161 {
163 collapseElement(); 162 collapseElement();
164 163
165 new MutationObserver(collapseElement).observe( 164 new MutationObserver(collapseElement).observe(
166 element, { 165 element, {
167 attributes: true, 166 attributes: true,
168 attributeFilter: ["style"] 167 attributeFilter: ["style"]
169 } 168 }
170 ); 169 );
171 } 170 }
172 } 171 }
173 ); 172 );
174 } 173 }
175 174
176 function checkSitekey() 175 function checkSitekey()
177 { 176 {
178 var attr = document.documentElement.getAttribute("data-adblockkey"); 177 let attr = document.documentElement.getAttribute("data-adblockkey");
179 if (attr) 178 if (attr)
180 ext.backgroundPage.sendMessage({type: "filters.addKey", token: attr}); 179 ext.backgroundPage.sendMessage({type: "filters.addKey", token: attr});
181 } 180 }
182 181
183 function getContentDocument(element) 182 function getContentDocument(element)
184 { 183 {
185 try 184 try
186 { 185 {
187 return element.contentDocument; 186 return element.contentDocument;
188 } 187 }
(...skipping 13 matching lines...) Expand all
202 201
203 this.observer = new MutationObserver(this.observe.bind(this)); 202 this.observer = new MutationObserver(this.observe.bind(this));
204 this.trace = this.trace.bind(this); 203 this.trace = this.trace.bind(this);
205 204
206 if (document.readyState == "loading") 205 if (document.readyState == "loading")
207 document.addEventListener("DOMContentLoaded", this.trace); 206 document.addEventListener("DOMContentLoaded", this.trace);
208 else 207 else
209 this.trace(); 208 this.trace();
210 } 209 }
211 ElementHidingTracer.prototype = { 210 ElementHidingTracer.prototype = {
212 addSelectors: function(selectors, filters) 211 addSelectors(selectors, filters)
213 { 212 {
214 if (!filters)
215 filters = new Array(selectors.length);
Sebastian Noack 2017/02/20 12:19:55 In the end, it turns out the logic would be somewh
wspee 2017/02/23 10:29:39 NP, Done.
216
217 if (document.readyState != "loading") 213 if (document.readyState != "loading")
218 this.checkNodes([document], selectors, filters); 214 this.checkNodes([document], selectors, filters);
219 215
220 this.selectors.push(...selectors); 216 this.selectors.push(...selectors);
221 this.filters.push(...filters); 217 this.filters.push(...filters);
222 }, 218 },
223 219
224 checkNodes: function(nodes, selectors, filters) 220 checkNodes(nodes, selectors, filters)
225 { 221 {
226 let matchedSelectors = []; 222 let matchedSelectors = [];
227 223
228 for (let i = 0; i < selectors.length; i++) 224 for (let i = 0; i < selectors.length; i++)
229 { 225 {
230 nodes: for (let node of nodes) 226 nodes: for (let node of nodes)
231 { 227 {
232 let elements = node.querySelectorAll(selectors[i]); 228 let elements = node.querySelectorAll(selectors[i]);
233 229
234 for (let element of elements) 230 for (let element of elements)
235 { 231 {
236 // Only consider selectors that actually have an effect on the 232 // Only consider selectors that actually have an effect on the
237 // computed styles, and aren't overridden by rules with higher 233 // computed styles, and aren't overridden by rules with higher
238 // priority, or haven't been circumvented in a different way. 234 // priority, or haven't been circumvented in a different way.
239 if (getComputedStyle(element).display == "none") 235 if (getComputedStyle(element).display == "none")
240 { 236 {
241 let filter = filters[i] || selectors[i]; 237 matchedSelectors.push(filters[i].replace(/^.*?##/, ""));
242 matchedSelectors.push(filter.replace(/^.*?##/, ""));
243 break nodes; 238 break nodes;
244 } 239 }
245 } 240 }
246 } 241 }
247 } 242 }
248 243
249 if (matchedSelectors.length > 0) 244 if (matchedSelectors.length > 0)
250 ext.backgroundPage.sendMessage({ 245 ext.backgroundPage.sendMessage({
251 type: "devtools.traceElemHide", 246 type: "devtools.traceElemHide",
252 selectors: matchedSelectors 247 selectors: matchedSelectors
253 }); 248 });
254 }, 249 },
255 250
256 onTimeout: function() 251 onTimeout()
257 { 252 {
258 this.checkNodes(this.changedNodes, this.selectors, this.filters); 253 this.checkNodes(this.changedNodes, this.selectors, this.filters);
259 this.changedNodes = []; 254 this.changedNodes = [];
260 this.timeout = null; 255 this.timeout = null;
261 }, 256 },
262 257
263 observe: function(mutations) 258 observe(mutations)
264 { 259 {
265 // Forget previously changed nodes that are no longer in the DOM. 260 // Forget previously changed nodes that are no longer in the DOM.
266 for (var i = 0; i < this.changedNodes.length; i++) 261 for (let i = 0; i < this.changedNodes.length; i++)
267 { 262 {
268 if (!document.contains(this.changedNodes[i])) 263 if (!document.contains(this.changedNodes[i]))
269 this.changedNodes.splice(i--, 1); 264 this.changedNodes.splice(i--, 1);
270 } 265 }
271 266
272 for (var j = 0; j < mutations.length; j++) 267 for (let mutation of mutations)
273 { 268 {
274 var mutation = mutations[j]; 269 let node = mutation.target;
275 var node = mutation.target;
276 270
277 // Ignore mutations of nodes that aren't in the DOM anymore. 271 // Ignore mutations of nodes that aren't in the DOM anymore.
278 if (!document.contains(node)) 272 if (!document.contains(node))
279 continue; 273 continue;
280 274
281 // Since querySelectorAll() doesn't consider the root itself 275 // Since querySelectorAll() doesn't consider the root itself
282 // and since CSS selectors can also match siblings, we have 276 // and since CSS selectors can also match siblings, we have
283 // to consider the parent node for attribute mutations. 277 // to consider the parent node for attribute mutations.
284 if (mutation.type == "attributes") 278 if (mutation.type == "attributes")
285 node = node.parentNode; 279 node = node.parentNode;
286 280
287 var addNode = true; 281 let addNode = true;
288 for (var k = 0; k < this.changedNodes.length; k++) 282 for (let i = 0; i < this.changedNodes.length; i++)
289 { 283 {
290 var previouslyChangedNode = this.changedNodes[k]; 284 let previouslyChangedNode = this.changedNodes[i];
291 285
292 // If we are already going to check an ancestor of this node, 286 // If we are already going to check an ancestor of this node,
293 // we can ignore this node, since it will be considered anyway 287 // we can ignore this node, since it will be considered anyway
294 // when checking one of its ancestors. 288 // when checking one of its ancestors.
295 if (previouslyChangedNode.contains(node)) 289 if (previouslyChangedNode.contains(node))
296 { 290 {
297 addNode = false; 291 addNode = false;
298 break; 292 break;
299 } 293 }
300 294
301 // If this node is an ancestor of a node that previously changed, 295 // If this node is an ancestor of a node that previously changed,
302 // we can ignore that node, since it will be considered anyway 296 // we can ignore that node, since it will be considered anyway
303 // when checking one of its ancestors. 297 // when checking one of its ancestors.
304 if (node.contains(previouslyChangedNode)) 298 if (node.contains(previouslyChangedNode))
305 this.changedNodes.splice(k--, 1); 299 this.changedNodes.splice(i--, 1);
306 } 300 }
307 301
308 if (addNode) 302 if (addNode)
309 this.changedNodes.push(node); 303 this.changedNodes.push(node);
310 } 304 }
311 305
312 // Check only nodes whose descendants have changed, and not more often 306 // Check only nodes whose descendants have changed, and not more often
313 // than once a second. Otherwise large pages with a lot of DOM mutations 307 // than once a second. Otherwise large pages with a lot of DOM mutations
314 // (like YouTube) freeze when the devtools panel is active. 308 // (like YouTube) freeze when the devtools panel is active.
315 if (this.timeout == null) 309 if (this.timeout == null)
316 this.timeout = setTimeout(this.onTimeout.bind(this), 1000); 310 this.timeout = setTimeout(this.onTimeout.bind(this), 1000);
317 }, 311 },
318 312
319 trace: function() 313 trace()
320 { 314 {
321 this.checkNodes([document], this.selectors, this.filters); 315 this.checkNodes([document], this.selectors, this.filters);
322 316
323 this.observer.observe( 317 this.observer.observe(
324 document, 318 document,
325 { 319 {
326 childList: true, 320 childList: true,
327 attributes: true, 321 attributes: true,
328 subtree: true 322 subtree: true
329 } 323 }
330 ); 324 );
331 }, 325 },
332 326
333 disconnect: function() 327 disconnect()
334 { 328 {
335 document.removeEventListener("DOMContentLoaded", this.trace); 329 document.removeEventListener("DOMContentLoaded", this.trace);
336 this.observer.disconnect(); 330 this.observer.disconnect();
337 clearTimeout(this.timeout); 331 clearTimeout(this.timeout);
338 } 332 }
339 }; 333 };
340 334
341 function runInPageContext(fn, arg) 335 function runInPageContext(fn, arg)
342 { 336 {
343 var script = document.createElement("script"); 337 let script = document.createElement("script");
344 script.type = "application/javascript"; 338 script.type = "application/javascript";
345 script.async = false; 339 script.async = false;
346 script.textContent = "(" + fn + ")(" + JSON.stringify(arg) + ");"; 340 script.textContent = "(" + fn + ")(" + JSON.stringify(arg) + ");";
347 document.documentElement.appendChild(script); 341 document.documentElement.appendChild(script);
348 document.documentElement.removeChild(script); 342 document.documentElement.removeChild(script);
349 } 343 }
350 344
351 // Chrome doesn't allow us to intercept WebSockets[1], and therefore 345 // Chrome doesn't allow us to intercept WebSockets[1], and therefore
352 // some ad networks are misusing them as a way to serve adverts and circumvent 346 // some ad networks are misusing them as a way to serve adverts and circumvent
353 // us. As a workaround we wrap WebSocket, preventing blocked WebSocket 347 // us. As a workaround we wrap WebSocket, preventing blocked WebSocket
354 // connections from being opened. 348 // connections from being opened.
355 // [1] - https://bugs.chromium.org/p/chromium/issues/detail?id=129353 349 // [1] - https://bugs.chromium.org/p/chromium/issues/detail?id=129353
356 function wrapWebSocket() 350 function wrapWebSocket()
357 { 351 {
358 var eventName = "abpws-" + Math.random().toString(36).substr(2); 352 let eventName = "abpws-" + Math.random().toString(36).substr(2);
359 353
360 document.addEventListener(eventName, function(event) 354 document.addEventListener(eventName, event =>
361 { 355 {
362 ext.backgroundPage.sendMessage({ 356 ext.backgroundPage.sendMessage({
363 type: "request.websocket", 357 type: "request.websocket",
364 url: event.detail.url 358 url: event.detail.url
365 }, function (block) 359 }, block =>
366 { 360 {
367 document.dispatchEvent( 361 document.dispatchEvent(
368 new CustomEvent(eventName + "-" + event.detail.url, {detail: block}) 362 new CustomEvent(eventName + "-" + event.detail.url, {detail: block})
369 ); 363 );
370 }); 364 });
371 }); 365 });
372 366
373 runInPageContext(function(eventName) 367 runInPageContext(eventName =>
374 { 368 {
375 // As far as possible we must track everything we use that could be 369 // As far as possible we must track everything we use that could be
376 // sabotaged by the website later in order to circumvent us. 370 // sabotaged by the website later in order to circumvent us.
377 var RealWebSocket = WebSocket; 371 let RealWebSocket = WebSocket;
378 var closeWebSocket = Function.prototype.call.bind(RealWebSocket.prototype.cl ose); 372 let closeWebSocket = Function.prototype.call.bind(RealWebSocket.prototype.cl ose);
379 var addEventListener = document.addEventListener.bind(document); 373 let addEventListener = document.addEventListener.bind(document);
380 var removeEventListener = document.removeEventListener.bind(document); 374 let removeEventListener = document.removeEventListener.bind(document);
381 var dispatchEvent = document.dispatchEvent.bind(document); 375 let dispatchEvent = document.dispatchEvent.bind(document);
382 var CustomEvent = window.CustomEvent; 376 let CustomEvent = window.CustomEvent;
383 377
384 function checkRequest(url, callback) 378 function checkRequest(url, callback)
385 { 379 {
386 var incomingEventName = eventName + "-" + url; 380 let incomingEventName = eventName + "-" + url;
387 function listener(event) 381 function listener(event)
388 { 382 {
389 callback(event.detail); 383 callback(event.detail);
390 removeEventListener(incomingEventName, listener); 384 removeEventListener(incomingEventName, listener);
391 } 385 }
392 addEventListener(incomingEventName, listener); 386 addEventListener(incomingEventName, listener);
393 387
394 dispatchEvent(new CustomEvent(eventName, { 388 dispatchEvent(new CustomEvent(eventName, {
395 detail: {url: url} 389 detail: {url: url}
396 })); 390 }));
397 } 391 }
398 392
399 function WrappedWebSocket(url) 393 function WrappedWebSocket(url)
400 { 394 {
401 // Throw correct exceptions if the constructor is used improperly. 395 // Throw correct exceptions if the constructor is used improperly.
402 if (!(this instanceof WrappedWebSocket)) return RealWebSocket(); 396 if (!(this instanceof WrappedWebSocket)) return RealWebSocket();
403 if (arguments.length < 1) return new RealWebSocket(); 397 if (arguments.length < 1) return new RealWebSocket();
404 398
405 var websocket; 399 let websocket;
406 if (arguments.length == 1) 400 if (arguments.length == 1)
407 websocket = new RealWebSocket(url); 401 websocket = new RealWebSocket(url);
408 else 402 else
409 websocket = new RealWebSocket(url, arguments[1]); 403 websocket = new RealWebSocket(url, arguments[1]);
410 404
411 checkRequest(websocket.url, function(blocked) 405 checkRequest(websocket.url, blocked =>
412 { 406 {
413 if (blocked) 407 if (blocked)
414 closeWebSocket(websocket); 408 closeWebSocket(websocket);
415 }); 409 });
416 410
417 return websocket; 411 return websocket;
418 } 412 }
419 WrappedWebSocket.prototype = RealWebSocket.prototype; 413 WrappedWebSocket.prototype = RealWebSocket.prototype;
420 WebSocket = WrappedWebSocket.bind(); 414 WebSocket = WrappedWebSocket.bind();
421 Object.defineProperties(WebSocket, { 415 Object.defineProperties(WebSocket, {
422 CONNECTING: {value: RealWebSocket.CONNECTING, enumerable: true}, 416 CONNECTING: {value: RealWebSocket.CONNECTING, enumerable: true},
423 OPEN: {value: RealWebSocket.OPEN, enumerable: true}, 417 OPEN: {value: RealWebSocket.OPEN, enumerable: true},
424 CLOSING: {value: RealWebSocket.CLOSING, enumerable: true}, 418 CLOSING: {value: RealWebSocket.CLOSING, enumerable: true},
425 CLOSED: {value: RealWebSocket.CLOSED, enumerable: true}, 419 CLOSED: {value: RealWebSocket.CLOSED, enumerable: true},
426 prototype: {value: RealWebSocket.prototype} 420 prototype: {value: RealWebSocket.prototype}
427 }); 421 });
428 422
429 RealWebSocket.prototype.constructor = WebSocket; 423 RealWebSocket.prototype.constructor = WebSocket;
430 }, eventName); 424 }, eventName);
431 } 425 }
432 426
433 function ElemHide() 427 function ElemHide()
434 { 428 {
435 this.shadow = this.createShadowTree(); 429 this.shadow = this.createShadowTree();
436 this.style = null; 430 this.style = null;
437 this.tracer = null; 431 this.tracer = null;
438 432
439 this.elemHideEmulation = new ElemHideEmulation( 433 this.elemHideEmulation = new ElemHideEmulation(
440 window, 434 window,
441 function(callback) 435 callback =>
442 { 436 {
443 ext.backgroundPage.sendMessage({ 437 ext.backgroundPage.sendMessage({
444 type: "filters.get", 438 type: "filters.get",
445 what: "elemhideemulation" 439 what: "elemhideemulation"
446 }, callback); 440 }, callback);
447 }, 441 },
448 this.addSelectors.bind(this) 442 this.addSelectors.bind(this)
449 ); 443 );
450 } 444 }
451 ElemHide.prototype = { 445 ElemHide.prototype = {
452 selectorGroupSize: 200, 446 selectorGroupSize: 200,
453 447
454 createShadowTree: function() 448 createShadowTree()
455 { 449 {
456 // Use Shadow DOM if available as to not mess with with web pages that 450 // Use Shadow DOM if available as to not mess with with web pages that
457 // rely on the order of their own <style> tags (#309). However, creating 451 // rely on the order of their own <style> tags (#309). However, creating
458 // a shadow root breaks running CSS transitions. So we have to create 452 // a shadow root breaks running CSS transitions. So we have to create
459 // the shadow root before transistions might start (#452). 453 // the shadow root before transistions might start (#452).
460 if (!("createShadowRoot" in document.documentElement)) 454 if (!("createShadowRoot" in document.documentElement))
461 return null; 455 return null;
462 456
463 // Using shadow DOM causes issues on some Google websites, 457 // Using shadow DOM causes issues on some Google websites,
464 // including Google Docs, Gmail and Blogger (#1770, #2602, #2687). 458 // including Google Docs, Gmail and Blogger (#1770, #2602, #2687).
465 if (/\.(?:google|blogger)\.com$/.test(document.domain)) 459 if (/\.(?:google|blogger)\.com$/.test(document.domain))
466 return null; 460 return null;
467 461
468 // Finally since some users have both AdBlock and Adblock Plus installed we 462 // Finally since some users have both AdBlock and Adblock Plus installed we
469 // have to consider how the two extensions interact. For example we want to 463 // have to consider how the two extensions interact. For example we want to
470 // avoid creating the shadowRoot twice. 464 // avoid creating the shadowRoot twice.
471 var shadow = document.documentElement.shadowRoot || 465 let shadow = document.documentElement.shadowRoot ||
472 document.documentElement.createShadowRoot(); 466 document.documentElement.createShadowRoot();
473 shadow.appendChild(document.createElement("shadow")); 467 shadow.appendChild(document.createElement("shadow"));
474 468
475 // Stop the website from messing with our shadow root (#4191, #4298). 469 // Stop the website from messing with our shadow root (#4191, #4298).
476 if ("shadowRoot" in Element.prototype) 470 if ("shadowRoot" in Element.prototype)
477 { 471 {
478 runInPageContext(function() 472 runInPageContext(() =>
479 { 473 {
480 var ourShadowRoot = document.documentElement.shadowRoot; 474 let ourShadowRoot = document.documentElement.shadowRoot;
481 if (!ourShadowRoot) 475 if (!ourShadowRoot)
482 return; 476 return;
483 var desc = Object.getOwnPropertyDescriptor(Element.prototype, "shadowRoo t"); 477 let desc = Object.getOwnPropertyDescriptor(Element.prototype, "shadowRoo t");
484 var shadowRoot = Function.prototype.call.bind(desc.get); 478 let shadowRoot = Function.prototype.call.bind(desc.get);
485 479
486 Object.defineProperty(Element.prototype, "shadowRoot", { 480 Object.defineProperty(Element.prototype, "shadowRoot", {
487 configurable: true, enumerable: true, get: function() 481 configurable: true, enumerable: true, get()
488 { 482 {
489 var shadow = shadowRoot(this); 483 let shadow = shadowRoot(this);
490 return shadow == ourShadowRoot ? null : shadow; 484 return shadow == ourShadowRoot ? null : shadow;
491 } 485 }
492 }); 486 });
493 }, null); 487 }, null);
494 } 488 }
495 489
496 return shadow; 490 return shadow;
497 }, 491 },
498 492
499 addSelectors: function(selectors, filters) 493 addSelectors(selectors, filters)
500 { 494 {
501 if (selectors.length == 0) 495 if (selectors.length == 0)
502 return; 496 return;
503 497
504 if (!this.style) 498 if (!this.style)
505 { 499 {
506 // Create <style> element lazily, only if we add styles. Add it to 500 // Create <style> element lazily, only if we add styles. Add it to
507 // the shadow DOM if possible. Otherwise fallback to the <head> or 501 // the shadow DOM if possible. Otherwise fallback to the <head> or
508 // <html> element. If we have injected a style element before that 502 // <html> element. If we have injected a style element before that
509 // has been removed (the sheet property is null), create a new one. 503 // has been removed (the sheet property is null), create a new one.
510 this.style = document.createElement("style"); 504 this.style = document.createElement("style");
511 (this.shadow || document.head 505 (this.shadow || document.head
512 || document.documentElement).appendChild(this.style); 506 || document.documentElement).appendChild(this.style);
513 507
514 // It can happen that the frame already navigated to a different 508 // It can happen that the frame already navigated to a different
515 // document while we were waiting for the background page to respond. 509 // document while we were waiting for the background page to respond.
516 // In that case the sheet property will stay null, after addind the 510 // In that case the sheet property will stay null, after addind the
517 // <style> element to the shadow DOM. 511 // <style> element to the shadow DOM.
518 if (!this.style.sheet) 512 if (!this.style.sheet)
519 return; 513 return;
520 } 514 }
521 515
522 // If using shadow DOM, we have to add the ::content pseudo-element 516 // If using shadow DOM, we have to add the ::content pseudo-element
523 // before each selector, in order to match elements within the 517 // before each selector, in order to match elements within the
524 // insertion point. 518 // insertion point.
525 let preparedSelectors = []; 519 let preparedSelectors = [];
526 if (this.shadow) 520 if (this.shadow)
527 { 521 {
528 for (var i = 0; i < selectors.length; i++) 522 for (let selector of selectors)
529 { 523 {
530 var subSelectors = splitSelector(selectors[i]); 524 let subSelectors = splitSelector(selector);
531 for (var j = 0; j < subSelectors.length; j++) 525 for (let subSelector of subSelectors)
532 preparedSelectors.push("::content " + subSelectors[j]); 526 preparedSelectors.push("::content " + subSelector);
533 } 527 }
534 } 528 }
535 else 529 else
536 { 530 {
537 preparedSelectors = selectors; 531 preparedSelectors = selectors;
538 } 532 }
539 533
540 // Safari only allows 8192 primitive selectors to be injected at once[1], we 534 // Safari only allows 8192 primitive selectors to be injected at once[1], we
541 // therefore chunk the inserted selectors into groups of 200 to be safe. 535 // therefore chunk the inserted selectors into groups of 200 to be safe.
542 // (Chrome also has a limit, larger... but we're not certain exactly what it 536 // (Chrome also has a limit, larger... but we're not certain exactly what it
543 // is! Edge apparently has no such limit.) 537 // is! Edge apparently has no such limit.)
544 // [1] - https://github.com/WebKit/webkit/blob/1cb2227f6b2a1035f7bdc46e5ab69 debb75fc1de/Source/WebCore/css/RuleSet.h#L68 538 // [1] - https://github.com/WebKit/webkit/blob/1cb2227f6b2a1035f7bdc46e5ab69 debb75fc1de/Source/WebCore/css/RuleSet.h#L68
545 for (var i = 0; i < preparedSelectors.length; i += this.selectorGroupSize) 539 for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize)
546 { 540 {
547 var selector = preparedSelectors.slice(i, i + this.selectorGroupSize).join (", "); 541 let selector = preparedSelectors.slice(i, i + this.selectorGroupSize).join (", ");
548 this.style.sheet.insertRule(selector + "{display: none !important;}", 542 this.style.sheet.insertRule(selector + "{display: none !important;}",
549 this.style.sheet.cssRules.length); 543 this.style.sheet.cssRules.length);
550 } 544 }
551 545
552 if (this.tracer) 546 if (this.tracer)
553 this.tracer.addSelectors(selectors, filters); 547 this.tracer.addSelectors(selectors, filters || selectors);
554 }, 548 },
555 549
556 apply: function() 550 apply()
557 { 551 {
558 ext.backgroundPage.sendMessage({type: "get-selectors"}, response => 552 ext.backgroundPage.sendMessage({type: "get-selectors"}, response =>
559 { 553 {
560 if (this.tracer) 554 if (this.tracer)
561 this.tracer.disconnect(); 555 this.tracer.disconnect();
562 this.tracer = null; 556 this.tracer = null;
563 557
564 if (this.style && this.style.parentElement) 558 if (this.style && this.style.parentElement)
565 this.style.parentElement.removeChild(this.style); 559 this.style.parentElement.removeChild(this.style);
566 this.style = null; 560 this.style = null;
567 561
568 if (response.trace) 562 if (response.trace)
569 this.tracer = new ElementHidingTracer(); 563 this.tracer = new ElementHidingTracer();
570 564
571 this.addSelectors(response.selectors); 565 this.addSelectors(response.selectors);
572
573 this.elemHideEmulation.apply(); 566 this.elemHideEmulation.apply();
574 }); 567 });
575 } 568 }
576 }; 569 };
577 570
578 if (document instanceof HTMLDocument) 571 if (document instanceof HTMLDocument)
579 { 572 {
580 checkSitekey(); 573 checkSitekey();
581 wrapWebSocket(); 574 wrapWebSocket();
582 575
576 // This variable is also used by our other content scripts, outside of the
577 // current scope.
583 var elemhide = new ElemHide(); 578 var elemhide = new ElemHide();
584 elemhide.apply(); 579 elemhide.apply();
585 580
586 document.addEventListener("error", function(event) 581 document.addEventListener("error", event =>
587 { 582 {
588 checkCollapse(event.target); 583 checkCollapse(event.target);
589 }, true); 584 }, true);
590 585
591 document.addEventListener("load", function(event) 586 document.addEventListener("load", event =>
592 { 587 {
593 var element = event.target; 588 let element = event.target;
594 if (/^i?frame$/.test(element.localName)) 589 if (/^i?frame$/.test(element.localName))
595 checkCollapse(element); 590 checkCollapse(element);
596 }, true); 591 }, true);
597 } 592 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld