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

Side by Side Diff: include.preload.js

Issue 29370970: [adblockpluschrome] Issue 3596 - Added support for CSS property filters to devtools panel (Closed)
Patch Set: renamed addFilters to addSelectors and moved empty filters initialization to the top Created Feb. 15, 2017, 2:09 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/devtools.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-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
(...skipping 174 matching lines...) Expand 10 before | Expand all | Expand 10 after
185 try 185 try
186 { 186 {
187 return element.contentDocument; 187 return element.contentDocument;
188 } 188 }
189 catch (e) 189 catch (e)
190 { 190 {
191 return null; 191 return null;
192 } 192 }
193 } 193 }
194 194
195 function ElementHidingTracer(selectors) 195 function ElementHidingTracer()
196 { 196 {
197 this.selectors = selectors; 197 this.selectors = [];
198 this.filters = [];
198 199
199 this.changedNodes = []; 200 this.changedNodes = [];
200 this.timeout = null; 201 this.timeout = null;
202 this.started = false;
201 203
202 this.observer = new MutationObserver(this.observe.bind(this)); 204 this.observer = new MutationObserver(this.observe.bind(this));
203 this.trace = this.trace.bind(this); 205 this.trace = this.trace.bind(this);
204
205 if (document.readyState == "loading")
206 document.addEventListener("DOMContentLoaded", this.trace);
207 else
208 this.trace();
209 } 206 }
210 ElementHidingTracer.prototype = { 207 ElementHidingTracer.prototype = {
211 checkNodes: function(nodes) 208 start: function()
212 { 209 {
213 var matchedSelectors = []; 210 if (document.readyState == "loading")
211 document.addEventListener("DOMContentLoaded", this.trace);
212 else
213 this.trace();
214 },
214 215
215 // Find all selectors that match any hidden element inside the given nodes. 216 addSelectors: function(selectors, filters)
216 for (var i = 0; i < this.selectors.length; i++) 217 {
218 if (!filters)
219 filters = new Array(selectors.length);
220
221 if (this.started)
222 window.setTimeout(() => {
223 this.checkNodes([document], selectors, filters);
224 }, 0);
225
226 this.selectors.push(...selectors);
227 this.filters.push(...filters);
228 },
229
230 checkNodes: function(nodes, selectors, filters)
231 {
232 let matchedFilters = [];
233
234 for (let i = 0; i < selectors.length; i++)
217 { 235 {
218 var selector = this.selectors[i]; 236 nodes: for (let node of nodes)
237 {
238 let elements = node.querySelectorAll(selectors[i]);
219 239
220 for (var j = 0; j < nodes.length; j++) 240 for (let element of elements)
221 {
222 var elements = nodes[j].querySelectorAll(selector);
223 var matched = false;
224
225 for (var k = 0; k < elements.length; k++)
226 { 241 {
227 // Only consider selectors that actually have an effect on the 242 // Only consider selectors that actually have an effect on the
228 // computed styles, and aren't overridden by rules with higher 243 // computed styles, and aren't overridden by rules with higher
229 // priority, or haven't been circumvented in a different way. 244 // priority, or haven't been circumvented in a different way.
230 if (getComputedStyle(elements[k]).display == "none") 245 if (getComputedStyle(element).display == "none")
231 { 246 {
232 matchedSelectors.push(selector); 247 let filter = filters[i] || selectors[i];
233 matched = true; 248 matchedFilters.push(filter.replace(/^.*?##/, ""));
234 break; 249 break nodes;
235 } 250 }
236 } 251 }
237
238 if (matched)
239 break;
240 } 252 }
241 } 253 }
242 254
243 if (matchedSelectors.length > 0) 255 if (matchedFilters.length > 0)
244 ext.backgroundPage.sendMessage({ 256 ext.backgroundPage.sendMessage({
245 type: "devtools.traceElemHide", 257 type: "devtools.traceElemHide",
246 selectors: matchedSelectors 258 selectors: matchedFilters
247 }); 259 });
248 }, 260 },
249 261
250 onTimeout: function() 262 onTimeout: function()
251 { 263 {
252 this.checkNodes(this.changedNodes); 264 this.checkNodes(this.changedNodes, this.selectors, this.filters);
253 this.changedNodes = []; 265 this.changedNodes = [];
254 this.timeout = null; 266 this.timeout = null;
255 }, 267 },
256 268
257 observe: function(mutations) 269 observe: function(mutations)
258 { 270 {
259 // Forget previously changed nodes that are no longer in the DOM. 271 // Forget previously changed nodes that are no longer in the DOM.
260 for (var i = 0; i < this.changedNodes.length; i++) 272 for (var i = 0; i < this.changedNodes.length; i++)
261 { 273 {
262 if (!document.contains(this.changedNodes[i])) 274 if (!document.contains(this.changedNodes[i]))
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after
305 317
306 // Check only nodes whose descendants have changed, and not more often 318 // Check only nodes whose descendants have changed, and not more often
307 // than once a second. Otherwise large pages with a lot of DOM mutations 319 // than once a second. Otherwise large pages with a lot of DOM mutations
308 // (like YouTube) freeze when the devtools panel is active. 320 // (like YouTube) freeze when the devtools panel is active.
309 if (this.timeout == null) 321 if (this.timeout == null)
310 this.timeout = setTimeout(this.onTimeout.bind(this), 1000); 322 this.timeout = setTimeout(this.onTimeout.bind(this), 1000);
311 }, 323 },
312 324
313 trace: function() 325 trace: function()
314 { 326 {
315 this.checkNodes([document]); 327 this.started = true;
328 this.checkNodes([document], this.selectors, this.filters);
316 329
317 this.observer.observe( 330 this.observer.observe(
318 document, 331 document,
319 { 332 {
320 childList: true, 333 childList: true,
321 attributes: true, 334 attributes: true,
322 subtree: true 335 subtree: true
323 } 336 }
324 ); 337 );
325 }, 338 },
(...skipping 157 matching lines...) Expand 10 before | Expand all | Expand 10 after
483 var shadow = shadowRoot(this); 496 var shadow = shadowRoot(this);
484 return shadow == ourShadowRoot ? null : shadow; 497 return shadow == ourShadowRoot ? null : shadow;
485 } 498 }
486 }); 499 });
487 }, null); 500 }, null);
488 } 501 }
489 502
490 return shadow; 503 return shadow;
491 }, 504 },
492 505
493 addSelectors: function(selectors) 506 addSelectors: function(selectors, filters)
494 { 507 {
495 if (selectors.length == 0) 508 if (!selectors.length)
496 return; 509 return;
497 510
511 if (this.tracer)
512 this.tracer.addSelectors(selectors, filters);
513
498 if (!this.style) 514 if (!this.style)
499 { 515 {
500 // Create <style> element lazily, only if we add styles. Add it to 516 // Create <style> element lazily, only if we add styles. Add it to
501 // the shadow DOM if possible. Otherwise fallback to the <head> or 517 // the shadow DOM if possible. Otherwise fallback to the <head> or
502 // <html> element. If we have injected a style element before that 518 // <html> element. If we have injected a style element before that
503 // has been removed (the sheet property is null), create a new one. 519 // has been removed (the sheet property is null), create a new one.
504 this.style = document.createElement("style"); 520 this.style = document.createElement("style");
505 (this.shadow || document.head 521 (this.shadow || document.head
506 || document.documentElement).appendChild(this.style); 522 || document.documentElement).appendChild(this.style);
507 523
(...skipping 29 matching lines...) Expand all
537 { 553 {
538 var selector = selectors.slice(i, i + this.selectorGroupSize).join(", "); 554 var selector = selectors.slice(i, i + this.selectorGroupSize).join(", ");
539 this.style.sheet.insertRule(selector + "{display: none !important;}", 555 this.style.sheet.insertRule(selector + "{display: none !important;}",
540 this.style.sheet.cssRules.length); 556 this.style.sheet.cssRules.length);
541 } 557 }
542 }, 558 },
543 559
544 apply: function() 560 apply: function()
545 { 561 {
546 var selectors = null; 562 var selectors = null;
547 var elemHideEmulationLoaded = false;
548 563
549 var checkLoaded = function() 564 var checkLoaded = function()
550 { 565 {
551 if (!selectors || !elemHideEmulationLoaded)
552 return;
553
554 if (this.tracer) 566 if (this.tracer)
555 this.tracer.disconnect(); 567 this.tracer.disconnect();
556 this.tracer = null; 568 this.tracer = null;
557 569
570 if (selectors.trace)
571 this.tracer = new ElementHidingTracer();
572
558 if (this.style && this.style.parentElement) 573 if (this.style && this.style.parentElement)
559 this.style.parentElement.removeChild(this.style); 574 this.style.parentElement.removeChild(this.style);
560 this.style = null; 575 this.style = null;
561 576
562 this.addSelectors(selectors.selectors); 577 if (selectors.selectors)
578 this.addSelectors(selectors.selectors);
579
563 this.elemHideEmulation.apply(); 580 this.elemHideEmulation.apply();
564 581
565 if (selectors.trace) 582 if (this.tracer)
566 this.tracer = new ElementHidingTracer(selectors.selectors); 583 this.tracer.start();
567 }.bind(this); 584 }.bind(this);
568 585
569 ext.backgroundPage.sendMessage({type: "get-selectors"}, function(response) 586 ext.backgroundPage.sendMessage({type: "get-selectors"}, response =>
570 { 587 {
571 selectors = response; 588 selectors = response;
572 checkLoaded(); 589 this.elemHideEmulation.load(checkLoaded);
573 });
574
575 this.elemHideEmulation.load(function()
576 {
577 elemHideEmulationLoaded = true;
578 checkLoaded();
579 }); 590 });
580 } 591 }
581 }; 592 };
582 593
583 if (document instanceof HTMLDocument) 594 if (document instanceof HTMLDocument)
584 { 595 {
585 checkSitekey(); 596 checkSitekey();
586 wrapWebSocket(); 597 wrapWebSocket();
587 598
588 var elemhide = new ElemHide(); 599 var elemhide = new ElemHide();
589 elemhide.apply(); 600 elemhide.apply();
590 601
591 document.addEventListener("error", function(event) 602 document.addEventListener("error", function(event)
592 { 603 {
593 checkCollapse(event.target); 604 checkCollapse(event.target);
594 }, true); 605 }, true);
595 606
596 document.addEventListener("load", function(event) 607 document.addEventListener("load", function(event)
597 { 608 {
598 var element = event.target; 609 var element = event.target;
599 if (/^i?frame$/.test(element.localName)) 610 if (/^i?frame$/.test(element.localName))
600 checkCollapse(element); 611 checkCollapse(element);
601 }, true); 612 }, true);
602 } 613 }
OLDNEW
« no previous file with comments | « no previous file | lib/devtools.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld