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

Side by Side Diff: include.preload.js

Issue 29670575: Issue 5899 - Use CSS attribute selectors for collapsing media elements (Closed) Base URL: https://hg.adblockplus.org/adblockpluschrome/
Patch Set: Rebase Created April 19, 2018, 9:53 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | lib/cssInjection.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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 18 matching lines...) Expand all
29 ["input", "IMAGE"], 29 ["input", "IMAGE"],
30 ["picture", "IMAGE"], 30 ["picture", "IMAGE"],
31 ["audio", "MEDIA"], 31 ["audio", "MEDIA"],
32 ["video", "MEDIA"], 32 ["video", "MEDIA"],
33 ["frame", "SUBDOCUMENT"], 33 ["frame", "SUBDOCUMENT"],
34 ["iframe", "SUBDOCUMENT"], 34 ["iframe", "SUBDOCUMENT"],
35 ["object", "OBJECT"], 35 ["object", "OBJECT"],
36 ["embed", "OBJECT"] 36 ["embed", "OBJECT"]
37 ]); 37 ]);
38 38
39 let collapsingSelectors = new Set();
40
39 function getURLsFromObjectElement(element) 41 function getURLsFromObjectElement(element)
40 { 42 {
41 let url = element.getAttribute("data"); 43 let url = element.getAttribute("data");
42 if (url) 44 if (url)
43 return [url]; 45 return [url];
44 46
45 for (let child of element.children) 47 for (let child of element.children)
46 { 48 {
47 if (child.localName != "param") 49 if (child.localName != "param")
48 continue; 50 continue;
(...skipping 73 matching lines...) Expand 10 before | Expand all | Expand 10 after
122 124
123 for (let i = 0; i < urls.length; i++) 125 for (let i = 0; i < urls.length; i++)
124 { 126 {
125 if (/^(?!https?:)[\w-]+:/i.test(urls[i])) 127 if (/^(?!https?:)[\w-]+:/i.test(urls[i]))
126 urls.splice(i--, 1); 128 urls.splice(i--, 1);
127 } 129 }
128 130
129 return urls; 131 return urls;
130 } 132 }
131 133
134 function isCollapsibleMediaElement(element, mediatype)
135 {
136 if (mediatype != "MEDIA")
137 return false;
138
139 if (!element.getAttribute("src"))
140 return false;
141
142 for (let child of element.children)
143 {
144 // If the <video> or <audio> element contains any <source> or <track>
145 // children, we cannot address it in CSS by the source URL; in that case we
146 // don't "collapse" it using a CSS selector but rather hide it directly by
147 // setting the style="..." attribute.
148 if (["source", "track"].includes(child.localName))
149 return false;
150 }
151
152 return true;
153 }
154
155 function collapseMediaElement(element, srcValue)
156 {
157 if (!srcValue)
158 return;
159
160 let selector = element.localName + "[src=" + CSS.escape(srcValue) + "]";
161
162 // Adding selectors is expensive so do it only if we really have a new
163 // selector.
164 if (!collapsingSelectors.has(selector))
165 {
166 collapsingSelectors.add(selector);
167 elemhide.addSelectors([selector], null, "collapsing", true);
168 }
169 }
170
132 function hideElement(element) 171 function hideElement(element)
133 { 172 {
134 function doHide() 173 function doHide()
135 { 174 {
136 let propertyName = "display"; 175 let propertyName = "display";
137 let propertyValue = "none"; 176 let propertyValue = "none";
138 if (element.localName == "frame") 177 if (element.localName == "frame")
139 { 178 {
140 propertyName = "visibility"; 179 propertyName = "visibility";
141 propertyValue = "hidden"; 180 propertyValue = "hidden";
(...skipping 17 matching lines...) Expand all
159 function checkCollapse(element) 198 function checkCollapse(element)
160 { 199 {
161 let mediatype = typeMap.get(element.localName); 200 let mediatype = typeMap.get(element.localName);
162 if (!mediatype) 201 if (!mediatype)
163 return; 202 return;
164 203
165 let urls = getURLsFromElement(element); 204 let urls = getURLsFromElement(element);
166 if (urls.length == 0) 205 if (urls.length == 0)
167 return; 206 return;
168 207
208 let collapsibleMediaElement = isCollapsibleMediaElement(element, mediatype);
209
210 // Save the value of the src attribute because it can change between now and
211 // when we get the response from the background page.
212 let srcValue = collapsibleMediaElement ? element.getAttribute("src") : null;
213
169 browser.runtime.sendMessage( 214 browser.runtime.sendMessage(
170 { 215 {
171 type: "filters.collapse", 216 type: "filters.collapse",
172 urls, 217 urls,
173 mediatype, 218 mediatype,
174 baseURL: document.location.href 219 baseURL: document.location.href
175 }, 220 },
176
177 collapse => 221 collapse =>
178 { 222 {
179 if (collapse) 223 if (collapse)
180 { 224 {
181 hideElement(element); 225 if (collapsibleMediaElement)
226 collapseMediaElement(element, srcValue);
227 else
228 hideElement(element);
182 } 229 }
183 } 230 }
184 ); 231 );
185 } 232 }
186 233
187 function checkSitekey() 234 function checkSitekey()
188 { 235 {
189 let attr = document.documentElement.getAttribute("data-adblockkey"); 236 let attr = document.documentElement.getAttribute("data-adblockkey");
190 if (attr) 237 if (attr)
191 browser.runtime.sendMessage({type: "filters.addKey", token: attr}); 238 browser.runtime.sendMessage({type: "filters.addKey", token: attr});
(...skipping 187 matching lines...) Expand 10 before | Expand all | Expand 10 after
379 // Finally since some users have both AdBlock and Adblock Plus installed we 426 // Finally since some users have both AdBlock and Adblock Plus installed we
380 // have to consider how the two extensions interact. For example we want to 427 // have to consider how the two extensions interact. For example we want to
381 // avoid creating the shadowRoot twice. 428 // avoid creating the shadowRoot twice.
382 let shadow = document.documentElement.shadowRoot || 429 let shadow = document.documentElement.shadowRoot ||
383 document.documentElement.createShadowRoot(); 430 document.documentElement.createShadowRoot();
384 shadow.appendChild(document.createElement("content")); 431 shadow.appendChild(document.createElement("content"));
385 432
386 return shadow; 433 return shadow;
387 }, 434 },
388 435
389 addSelectorsInline(selectors, groupName) 436 addSelectorsInline(selectors, groupName, appendOnly = false)
390 { 437 {
391 let style = this.styles.get(groupName); 438 let style = this.styles.get(groupName);
392 439
393 if (style) 440 if (style && !appendOnly)
394 { 441 {
395 while (style.sheet.cssRules.length > 0) 442 while (style.sheet.cssRules.length > 0)
396 style.sheet.deleteRule(0); 443 style.sheet.deleteRule(0);
397 } 444 }
398 445
399 if (selectors.length == 0) 446 if (selectors.length == 0)
400 return; 447 return;
401 448
402 if (!style) 449 if (!style)
403 { 450 {
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after
451 for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize) 498 for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize)
452 { 499 {
453 let selector = preparedSelectors.slice( 500 let selector = preparedSelectors.slice(
454 i, i + this.selectorGroupSize 501 i, i + this.selectorGroupSize
455 ).join(", "); 502 ).join(", ");
456 style.sheet.insertRule(selector + "{display: none !important;}", 503 style.sheet.insertRule(selector + "{display: none !important;}",
457 style.sheet.cssRules.length); 504 style.sheet.cssRules.length);
458 } 505 }
459 }, 506 },
460 507
461 addSelectors(selectors, filters) 508 addSelectors(selectors, filters, groupName = "emulated", appendOnly = false)
462 { 509 {
463 if (this.inline || this.inlineEmulated) 510 if (this.inline || this.inlineEmulated)
464 { 511 {
465 // Insert the style rules inline if we have been instructed by the 512 // Insert the style rules inline if we have been instructed by the
466 // background page to do so. This is usually the case, except on platforms 513 // background page to do so. This is usually the case, except on platforms
467 // that do support user stylesheets via the browser.tabs.insertCSS API 514 // that do support user stylesheets via the browser.tabs.insertCSS API
468 // (Firefox 53 onwards for now and possibly Chrome in the near future). 515 // (Firefox 53 onwards for now and possibly Chrome in the near future).
469 // Once all supported platforms have implemented this API, we can remove 516 // Once all supported platforms have implemented this API, we can remove
470 // the code below. See issue #5090. 517 // the code below. See issue #5090.
471 // Related Chrome and Firefox issues: 518 // Related Chrome and Firefox issues:
472 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009 519 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009
473 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026 520 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026
474 this.addSelectorsInline(selectors, "emulated"); 521 this.addSelectorsInline(selectors, groupName, appendOnly);
475 } 522 }
476 else 523 else
477 { 524 {
478 browser.runtime.sendMessage({ 525 browser.runtime.sendMessage({
479 type: "elemhide.injectSelectors", 526 type: "elemhide.injectSelectors",
480 selectors, 527 selectors,
481 groupName: "emulated" 528 groupName,
529 appendOnly
482 }); 530 });
483 } 531 }
484 532
485 if (this.tracer) 533 // Only trace selectors that are based directly on hiding filters
534 // (i.e. leave out collapsing selectors).
535 if (this.tracer && groupName != "collapsing")
486 this.tracer.addSelectors(selectors, filters); 536 this.tracer.addSelectors(selectors, filters);
487 }, 537 },
488 538
489 hideElements(elements, filters) 539 hideElements(elements, filters)
490 { 540 {
491 for (let element of elements) 541 for (let element of elements)
492 hideElement(element); 542 hideElement(element);
493 543
494 if (this.tracer) 544 if (this.tracer)
495 { 545 {
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after
548 let element = event.target; 598 let element = event.target;
549 if (/^i?frame$/.test(element.localName)) 599 if (/^i?frame$/.test(element.localName))
550 checkCollapse(element); 600 checkCollapse(element);
551 }, true); 601 }, true);
552 } 602 }
553 603
554 window.checkCollapse = checkCollapse; 604 window.checkCollapse = checkCollapse;
555 window.elemhide = elemhide; 605 window.elemhide = elemhide;
556 window.typeMap = typeMap; 606 window.typeMap = typeMap;
557 window.getURLsFromElement = getURLsFromElement; 607 window.getURLsFromElement = getURLsFromElement;
OLDNEW
« no previous file with comments | « no previous file | lib/cssInjection.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld