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

Delta Between Two Patch Sets: include.preload.js

Issue 29575739: Issue 5864 - Remove previous style sheet before adding one (Closed) Base URL: https://hg.adblockplus.org/adblockpluschrome/
Left Patch Set: Always remove old rules Created Oct. 14, 2017, 9:29 p.m.
Right Patch Set: Fix rebase Created Jan. 25, 2018, 2:37 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 | « no previous file | lib/cssInjection.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-present eyeo GmbH 3 * Copyright (C) 2006-present 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 147 matching lines...) Expand 10 before | Expand all | Expand 10 after
158 function checkCollapse(element) 158 function checkCollapse(element)
159 { 159 {
160 let mediatype = typeMap.get(element.localName); 160 let mediatype = typeMap.get(element.localName);
161 if (!mediatype) 161 if (!mediatype)
162 return; 162 return;
163 163
164 let urls = getURLsFromElement(element); 164 let urls = getURLsFromElement(element);
165 if (urls.length == 0) 165 if (urls.length == 0)
166 return; 166 return;
167 167
168 chrome.runtime.sendMessage( 168 browser.runtime.sendMessage(
169 { 169 {
170 type: "filters.collapse", 170 type: "filters.collapse",
171 urls, 171 urls,
172 mediatype, 172 mediatype,
173 baseURL: document.location.href 173 baseURL: document.location.href
174 }, 174 },
175 175
176 collapse => 176 collapse =>
177 { 177 {
178 if (collapse) 178 if (collapse)
179 { 179 {
180 hideElement(element); 180 hideElement(element);
181 } 181 }
182 } 182 }
183 ); 183 );
184 } 184 }
185 185
186 function checkSitekey() 186 function checkSitekey()
187 { 187 {
188 let attr = document.documentElement.getAttribute("data-adblockkey"); 188 let attr = document.documentElement.getAttribute("data-adblockkey");
189 if (attr) 189 if (attr)
190 chrome.runtime.sendMessage({type: "filters.addKey", token: attr}); 190 browser.runtime.sendMessage({type: "filters.addKey", token: attr});
191 } 191 }
192 192
193 function ElementHidingTracer() 193 function ElementHidingTracer()
194 { 194 {
195 this.selectors = []; 195 this.selectors = [];
196 this.changedNodes = []; 196 this.changedNodes = [];
197 this.timeout = null; 197 this.timeout = null;
198 this.observer = new MutationObserver(this.observe.bind(this)); 198 this.observer = new MutationObserver(this.observe.bind(this));
199 this.trace = this.trace.bind(this); 199 this.trace = this.trace.bind(this);
200 200
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after
241 selectors.push(selector); 241 selectors.push(selector);
242 242
243 break nodes; 243 break nodes;
244 } 244 }
245 } 245 }
246 } 246 }
247 } 247 }
248 248
249 if (selectors.length > 0 || filters.length > 0) 249 if (selectors.length > 0 || filters.length > 0)
250 { 250 {
251 chrome.runtime.sendMessage({ 251 browser.runtime.sendMessage({
252 type: "devtools.traceElemHide", 252 type: "devtools.traceElemHide",
253 selectors, filters 253 selectors, filters
254 }); 254 });
255 } 255 }
256 }, 256 },
257 257
258 onTimeout() 258 onTimeout()
259 { 259 {
260 this.checkNodes(this.changedNodes, this.selectors); 260 this.checkNodes(this.changedNodes, this.selectors);
261 this.changedNodes = []; 261 this.changedNodes = [];
(...skipping 73 matching lines...) Expand 10 before | Expand all | Expand 10 after
335 { 335 {
336 document.removeEventListener("DOMContentLoaded", this.trace); 336 document.removeEventListener("DOMContentLoaded", this.trace);
337 this.observer.disconnect(); 337 this.observer.disconnect();
338 clearTimeout(this.timeout); 338 clearTimeout(this.timeout);
339 } 339 }
340 }; 340 };
341 341
342 function ElemHide() 342 function ElemHide()
343 { 343 {
344 this.shadow = this.createShadowTree(); 344 this.shadow = this.createShadowTree();
345 this.styles = new Map(); 345 this.styles = new Map();
Manish Jethani 2017/10/14 21:35:33 Now it's a map.
346 this.tracer = null; 346 this.tracer = null;
347 this.inline = true; 347 this.inline = true;
348 this.emulatedPatterns = null; 348 this.emulatedPatterns = null;
349 this.injectedSelectors = [];
350 349
351 this.elemHideEmulation = new ElemHideEmulation( 350 this.elemHideEmulation = new ElemHideEmulation(
352 this.addSelectors.bind(this), 351 this.addSelectors.bind(this),
353 this.hideElements.bind(this) 352 this.hideElements.bind(this)
354 ); 353 );
355 } 354 }
356 ElemHide.prototype = { 355 ElemHide.prototype = {
357 selectorGroupSize: 200, 356 selectorGroupSize: 200,
358 357
359 createShadowTree() 358 createShadowTree()
(...skipping 13 matching lines...) Expand all
373 // Finally since some users have both AdBlock and Adblock Plus installed we 372 // Finally since some users have both AdBlock and Adblock Plus installed we
374 // have to consider how the two extensions interact. For example we want to 373 // have to consider how the two extensions interact. For example we want to
375 // avoid creating the shadowRoot twice. 374 // avoid creating the shadowRoot twice.
376 let shadow = document.documentElement.shadowRoot || 375 let shadow = document.documentElement.shadowRoot ||
377 document.documentElement.createShadowRoot(); 376 document.documentElement.createShadowRoot();
378 shadow.appendChild(document.createElement("shadow")); 377 shadow.appendChild(document.createElement("shadow"));
379 378
380 return shadow; 379 return shadow;
381 }, 380 },
382 381
383 injectSelectors(selectors) 382 addSelectorsInline(selectors, groupName)
384 {
385 if (selectors.length == 0 && this.injectedSelectors.length == 0)
386 return;
387
388 chrome.runtime.sendMessage({
Manish Jethani 2017/10/14 21:35:33 Keeping it simple.
389 type: "elemhide.injectSelectors",
390 selectors,
391 oldSelectors: this.injectedSelectors
392 });
393
394 this.injectedSelectors = selectors;
395 },
396
397 addSelectorsInline(selectors, filters, groupName)
398 { 383 {
399 let style = this.styles.get(groupName); 384 let style = this.styles.get(groupName);
400 385
401 if (style) 386 if (style)
402 { 387 {
403 while (style.sheet.cssRules.length > 0) 388 while (style.sheet.cssRules.length > 0)
404 style.sheet.deleteRule(0); 389 style.sheet.deleteRule(0);
Manish Jethani 2017/10/14 21:35:33 Using CSSStyleSheet.deleteRule here.
405 } 390 }
406 391
407 if (selectors.length == 0) 392 if (selectors.length == 0)
408 return; 393 return;
409 394
410 if (!style) 395 if (!style)
411 { 396 {
412 // Create <style> element lazily, only if we add styles. Add it to 397 // Create <style> element lazily, only if we add styles. Add it to
413 // the shadow DOM if possible. Otherwise fallback to the <head> or 398 // the shadow DOM if possible. Otherwise fallback to the <head> or
414 // <html> element. If we have injected a style element before that 399 // <html> element. If we have injected a style element before that
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
448 // Safari only allows 8192 primitive selectors to be injected at once[1], we 433 // Safari only allows 8192 primitive selectors to be injected at once[1], we
449 // therefore chunk the inserted selectors into groups of 200 to be safe. 434 // therefore chunk the inserted selectors into groups of 200 to be safe.
450 // (Chrome also has a limit, larger... but we're not certain exactly what it 435 // (Chrome also has a limit, larger... but we're not certain exactly what it
451 // is! Edge apparently has no such limit.) 436 // is! Edge apparently has no such limit.)
452 // [1] - https://github.com/WebKit/webkit/blob/1cb2227f6b2a1035f7bdc46e5ab69 debb75fc1de/Source/WebCore/css/RuleSet.h#L68 437 // [1] - https://github.com/WebKit/webkit/blob/1cb2227f6b2a1035f7bdc46e5ab69 debb75fc1de/Source/WebCore/css/RuleSet.h#L68
453 for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize) 438 for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize)
454 { 439 {
455 let selector = preparedSelectors.slice( 440 let selector = preparedSelectors.slice(
456 i, i + this.selectorGroupSize 441 i, i + this.selectorGroupSize
457 ).join(", "); 442 ).join(", ");
458 style.sheet.insertRule(selector + "{display: none !important;}", 443 this.style.sheet.insertRule(selector + "{display: none !important;}",
459 style.sheet.cssRules.length); 444 this.style.sheet.cssRules.length);
460 } 445 }
461
462 if (this.tracer)
463 this.tracer.addSelectors(selectors, filters);
464 }, 446 },
465 447
466 addSelectors(selectors, filters) 448 addSelectors(selectors, filters)
467 { 449 {
468 if (this.inline) 450 if (this.inline)
469 { 451 {
470 // Insert the style rules inline if we have been instructed by the 452 // Insert the style rules inline if we have been instructed by the
471 // background page to do so. This is usually the case, except on platforms 453 // background page to do so. This is usually the case, except on platforms
472 // that do support user stylesheets via the chrome.tabs.insertCSS API 454 // that do support user stylesheets via the browser.tabs.insertCSS API
473 // (Firefox 53 onwards for now and possibly Chrome in the near future). 455 // (Firefox 53 onwards for now and possibly Chrome in the near future).
474 // Once all supported platforms have implemented this API, we can remove 456 // Once all supported platforms have implemented this API, we can remove
475 // the code below. See issue #5090. 457 // the code below. See issue #5090.
476 // Related Chrome and Firefox issues: 458 // Related Chrome and Firefox issues:
477 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009 459 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009
478 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026 460 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026
479 this.addSelectorsInline(selectors, filters, "emulated"); 461 this.addSelectorsInline(selectors, "emulated");
480 } 462 }
481 else 463 else
482 { 464 {
483 this.injectSelectors(selectors); 465 browser.runtime.sendMessage({
484 466 type: "elemhide.injectSelectors",
485 if (this.tracer && selectors.length > 0) 467 selectors,
486 this.tracer.addSelectors(selectors, filters); 468 groupName: "emulated"
487 } 469 });
470 }
471
472 if (this.tracer)
473 this.tracer.addSelectors(selectors, filters);
488 }, 474 },
489 475
490 hideElements(elements, filters) 476 hideElements(elements, filters)
491 { 477 {
492 for (let element of elements) 478 for (let element of elements)
493 hideElement(element); 479 hideElement(element);
494 480
495 if (this.tracer) 481 if (this.tracer)
496 { 482 {
497 chrome.runtime.sendMessage({ 483 browser.runtime.sendMessage({
498 type: "devtools.traceElemHide", 484 type: "devtools.traceElemHide",
499 selectors: [], 485 selectors: [],
500 filters 486 filters
501 }); 487 });
502 } 488 }
503 }, 489 },
504 490
505 apply() 491 apply()
506 { 492 {
507 chrome.runtime.sendMessage({type: "elemhide.getSelectors"}, response => 493 browser.runtime.sendMessage({type: "elemhide.getSelectors"}, response =>
508 { 494 {
509 if (this.tracer) 495 if (this.tracer)
510 this.tracer.disconnect(); 496 this.tracer.disconnect();
511 this.tracer = null; 497 this.tracer = null;
512 498
513 if (response.trace) 499 if (response.trace)
514 this.tracer = new ElementHidingTracer(); 500 this.tracer = new ElementHidingTracer();
515 501
516 this.inline = response.inline; 502 this.inline = response.inline;
517 503
518 if (this.inline) 504 if (this.inline)
519 this.addSelectorsInline(response.selectors); 505 this.addSelectorsInline(response.selectors, "standard");
Manish Jethani 2017/10/14 21:35:33 Note that we don't have to pass the group name her
520 else if (this.tracer) 506
507 if (this.tracer)
521 this.tracer.addSelectors(response.selectors); 508 this.tracer.addSelectors(response.selectors);
522 509
523 this.elemHideEmulation.apply(response.emulatedPatterns); 510 this.elemHideEmulation.apply(response.emulatedPatterns);
524 }); 511 });
525 } 512 }
526 }; 513 };
527 514
528 if (document instanceof HTMLDocument) 515 if (document instanceof HTMLDocument)
529 { 516 {
530 checkSitekey(); 517 checkSitekey();
531 518
532 elemhide = new ElemHide(); 519 elemhide = new ElemHide();
533 elemhide.apply(); 520 elemhide.apply();
534 521
535 document.addEventListener("error", event => 522 document.addEventListener("error", event =>
536 { 523 {
537 checkCollapse(event.target); 524 checkCollapse(event.target);
538 }, true); 525 }, true);
539 526
540 document.addEventListener("load", event => 527 document.addEventListener("load", event =>
541 { 528 {
542 let element = event.target; 529 let element = event.target;
543 if (/^i?frame$/.test(element.localName)) 530 if (/^i?frame$/.test(element.localName))
544 checkCollapse(element); 531 checkCollapse(element);
545 }, true); 532 }, true);
546 } 533 }
534
535 window.checkCollapse = checkCollapse;
536 window.elemhide = elemhide;
537 window.typeMap = typeMap;
538 window.getURLsFromElement = getURLsFromElement;
LEFTRIGHT
« no previous file | lib/cssInjection.js » ('j') | Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Toggle Comments ('s')

Powered by Google App Engine
This is Rietveld