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

Delta Between Two Patch Sets: include.postload.js

Issue 5468762555809792: Issue 1601 - Generate blocking filters for all URLs associated with the selected element (Closed)
Left Patch Set: Addressed comments Created Nov. 26, 2014, 11:07 a.m.
Right Patch Set: Fixed wrong comparision operator Created Dec. 8, 2014, 9:12 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 | no next file » | 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 <http://adblockplus.org/>, 2 * This file is part of Adblock Plus <http://adblockplus.org/>,
3 * Copyright (C) 2006-2014 Eyeo GmbH 3 * Copyright (C) 2006-2014 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 58 matching lines...) Expand 10 before | Expand all | Expand 10 after
69 // author created shadow roots, but ignore insertion points. 69 // author created shadow roots, but ignore insertion points.
70 var child = document.createTextNode(""); 70 var child = document.createTextNode("");
71 clone.appendChild(child); 71 clone.appendChild(child);
72 72
73 var shadow = document.createElement("shadow"); 73 var shadow = document.createElement("shadow");
74 clone.shadowRoot.appendChild(shadow); 74 clone.shadowRoot.appendChild(shadow);
75 75
76 return shadow.getDistributedNodes()[0] == child; 76 return shadow.getDistributedNodes()[0] == child;
77 } 77 }
78 78
79 function getOriginalStyle(element)
80 {
81 if ("_originalStyle" in element)
82 return element._originalStyle;
83
84 return element.getAttribute("style");
85 }
86
79 function highlightElement(element, shadowColor, backgroundColor) 87 function highlightElement(element, shadowColor, backgroundColor)
80 { 88 {
81 unhighlightElement(element); 89 unhighlightElement(element);
82 90
83 var originalBoxShadowPriority = element.style.getPropertyPriority("box-shadow" ); 91 var originalBoxShadowPriority = element.style.getPropertyPriority("box-shadow" );
84 var originalBackgroundColorPriority = element.style.getPropertyPriority("backg round-color"); 92 var originalBackgroundColorPriority = element.style.getPropertyPriority("backg round-color");
85 93
86 var boxShadow = "inset 0px 0px 5px " + shadowColor; 94 var boxShadow = "inset 0px 0px 5px " + shadowColor;
87 95
88 var highlightWithShadowDOM = function() 96 var highlightWithShadowDOM = function()
(...skipping 11 matching lines...) Expand all
100 element._unhighlight = function() 108 element._unhighlight = function()
101 { 109 {
102 root.removeChild(style); 110 root.removeChild(style);
103 }; 111 };
104 }; 112 };
105 113
106 var highlightWithStyleAttribute = function() 114 var highlightWithStyleAttribute = function()
107 { 115 {
108 var originalBoxShadow = element.style.getPropertyValue("box-shadow"); 116 var originalBoxShadow = element.style.getPropertyValue("box-shadow");
109 var originalBackgroundColor = element.style.getPropertyValue("background-col or"); 117 var originalBackgroundColor = element.style.getPropertyValue("background-col or");
118
119 element._originalStyle = getOriginalStyle(element);
110 120
111 element.style.setProperty("box-shadow", boxShadow, "important"); 121 element.style.setProperty("box-shadow", boxShadow, "important");
112 element.style.setProperty("background-color", backgroundColor, "important"); 122 element.style.setProperty("background-color", backgroundColor, "important");
113 123
114 element._unhighlight = function() 124 element._unhighlight = function()
115 { 125 {
116 this.style.removeProperty("box-shadow"); 126 this.style.removeProperty("box-shadow");
117 this.style.setProperty( 127 this.style.setProperty(
118 "box-shadow", 128 "box-shadow",
119 originalBoxShadow, 129 originalBoxShadow,
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after
168 { 178 {
169 Array.prototype.forEach.call( 179 Array.prototype.forEach.call(
170 document.querySelectorAll(highlightedElementsSelector), 180 document.querySelectorAll(highlightedElementsSelector),
171 unhighlightElement 181 unhighlightElement
172 ); 182 );
173 183
174 highlightedElementsSelector = null; 184 highlightedElementsSelector = null;
175 } 185 }
176 } 186 }
177 187
178 function getElementURLs(element) { 188 function getURLsFromObjectElement(element)
189 {
190 var url = element.getAttribute("data");
191 if (url)
192 return [resolveURL(url)];
193
194 for (var i = 0; i < element.children.length; i++)
195 {
196 var child = element.children[i];
197 if (child.localName != "param")
198 continue;
199
200 var name = child.getAttribute("name");
201 if (name != "movie" && // Adobe Flash
202 name != "source" && // Silverlight
203 name != "src" && // Real Media + Quicktime
204 name != "FileName") // Windows Media
205 continue;
206
207 var value = child.getAttribute("value");
208 if (!value)
209 continue;
210
211 return [resolveURL(value)];
212 }
213
214 return [];
215 }
216
217 function getURLsFromAttributes(element)
218 {
179 var urls = []; 219 var urls = [];
180 220
181 if (element.src) 221 if (element.src)
182 urls.push(element.src); 222 urls.push(element.src);
183 223
224 if (element.srcset)
225 {
226 var candidates = element.srcset.split(",");
227 for (var i = 0; i < candidates.length; i++)
228 {
229 var url = candidates[i].trim().replace(/\s+\S+$/, "");
230 if (url)
231 urls.push(resolveURL(url));
232 }
233 }
234
235 return urls;
236 }
237
238 function getURLsFromMediaElement(element)
239 {
240 var urls = getURLsFromAttributes(element);
241
242 for (var i = 0; i < element.children.length; i++)
243 {
244 var child = element.children[i];
245 if (child.localName == "source" || child.localName == "track")
246 urls.push.apply(urls, getURLsFromAttributes(child));
247 }
248
249 if (element.poster)
250 urls.push(element.poster);
251
252 return urls;
253 }
254
255 function getURLsFromElement(element) {
184 switch (element.localName) 256 switch (element.localName)
185 { 257 {
186 case "object": 258 case "object":
187 var url = element.getAttribute("data"); 259 return getURLsFromObjectElement(element);
188 if (url)
189 return [resolveURL(url)];
190
191 for (var i = 0; i < element.children.length; i++)
192 {
193 var child = element.children[i];
194 if (child.localName != "param")
195 continue;
196
197 var name = child.getAttribute("name");
198 if (name != "movie" && name != "src")
199 continue;
200
201 var value = child.getAttribute("value");
202 if (!value)
203 continue;
204
205 return [resolveURL(value)];
206 }
207
208 return [];
209 260
210 case "video": 261 case "video":
211 case "audio": 262 case "audio":
212 case "picture": 263 case "picture":
213 for (var i = 0; i < element.children.length; i++) 264 return getURLsFromMediaElement(element);
214 { 265 }
215 var child = element.children[i]; 266
216 267 return getURLsFromAttributes(element);
217 if (child.localName != "source")
218 continue;
219
220 if (child.src)
221 urls.push(child.src);
222
223 urls = urls.concat(parseSrcSet(child));
224 }
225
226 if (element.poster)
227 urls.push(element.poster);
228
229 break;
230
231 case "img":
232 urls = urls.concat(parseSrcSet(element));
233 }
234
235 return urls;
236 } 268 }
237 269
238 function isBlockable(element) 270 function isBlockable(element)
239 { 271 {
240 if (element.id) 272 if (element.id)
241 return true; 273 return true;
242 if (element.classList.length > 0) 274 if (element.classList.length > 0)
243 return true; 275 return true;
244 if (getElementURLs(element).length > 0) 276 if (getURLsFromElement(element).length > 0)
245 return true; 277 return true;
246 278
247 // We only generate filters based on the "style" attribute, 279 // We only generate filters based on the "style" attribute,
248 // if this is the only way we can generate a filter, and 280 // if this is the only way we can generate a filter, and
249 // only if there are at least two CSS properties defined. 281 // only if there are at least two CSS properties defined.
250 if (/:.+:/.test(element.getAttribute("style"))) 282 if (/:.+:/.test(getOriginalStyle(element)))
251 return true; 283 return true;
252 284
253 return false; 285 return false;
254 } 286 }
255 287
256 // Gets the absolute position of an element by walking up the DOM tree, 288 // Gets the absolute position of an element by walking up the DOM tree,
257 // adding up offsets. 289 // adding up offsets.
258 // I hope there's a better way because it just seems absolutely stupid 290 // I hope there's a better way because it just seems absolutely stupid
259 // that the DOM wouldn't have a direct way to get this, given that it 291 // that the DOM wouldn't have a direct way to get this, given that it
260 // has hundreds and hundreds of other methods that do random junk. 292 // has hundreds and hundreds of other methods that do random junk.
(...skipping 10 matching lines...) Expand all
271 // Adds an overlay to an element, which is probably a Flash object 303 // Adds an overlay to an element, which is probably a Flash object
272 function addElementOverlay(elt) { 304 function addElementOverlay(elt) {
273 // If this element is enclosed in an object tag, we prefer to block that inste ad 305 // If this element is enclosed in an object tag, we prefer to block that inste ad
274 if(!elt) 306 if(!elt)
275 return null; 307 return null;
276 308
277 // If element doesn't have at least one of class name, ID or URL, give up 309 // If element doesn't have at least one of class name, ID or URL, give up
278 // because we don't know how to construct a filter rule for it 310 // because we don't know how to construct a filter rule for it
279 if(!isBlockable(elt)) 311 if(!isBlockable(elt))
280 return; 312 return;
313
314 // If the element isn't rendered (since its or one of its ancestor's
315 // "display" property is "none"), the overlay wouldn't match the element.
316 if (!elt.offsetParent)
317 return;
318
281 var thisStyle = getComputedStyle(elt, null); 319 var thisStyle = getComputedStyle(elt, null);
282 var overlay = document.createElement('div'); 320 var overlay = document.createElement('div');
283 overlay.prisoner = elt; 321 overlay.prisoner = elt;
284 overlay.className = "__adblockplus__overlay"; 322 overlay.className = "__adblockplus__overlay";
285 overlay.setAttribute('style', 'opacity:0.4; background-color:#ffffff; display: inline-box; ' + 'width:' + thisStyle.width + '; height:' + thisStyle.height + '; position:absolute; overflow:hidden; -webkit-box-sizing:border-box; z-index: 999 99'); 323 overlay.setAttribute('style', 'opacity:0.4; background-color:#ffffff; display: inline-box; ' + 'width:' + thisStyle.width + '; height:' + thisStyle.height + '; position:absolute; overflow:hidden; -webkit-box-sizing:border-box;');
286 var pos = getAbsolutePosition(elt); 324 var pos = getAbsolutePosition(elt);
287 overlay.style.left = pos[0] + "px"; 325 overlay.style.left = pos[0] + "px";
288 overlay.style.top = pos[1] + "px"; 326 overlay.style.top = pos[1] + "px";
327
328 if (thisStyle.position != "static")
329 overlay.style.zIndex = thisStyle.zIndex;
330 else
331 overlay.style.zIndex = getComputedStyle(elt.offsetParent).zIndex;
332
289 // elt.parentNode.appendChild(overlay, elt); 333 // elt.parentNode.appendChild(overlay, elt);
290 document.body.appendChild(overlay); 334 document.body.appendChild(overlay);
291 return overlay; 335 return overlay;
292 } 336 }
293 337
294 // Show dialog asking user whether she wants to add the proposed filters derived 338 // Show dialog asking user whether she wants to add the proposed filters derived
295 // from selected page element 339 // from selected page element
296 function clickHide_showDialog(left, top, filters) 340 function clickHide_showDialog(left, top, filters)
297 { 341 {
298 // If we are already selecting, abort now 342 // If we are already selecting, abort now
299 if (clickHide_activated || clickHideFiltersDialog) 343 if (clickHide_activated || clickHideFiltersDialog)
300 { 344 clickHide_deactivate(true);
301 var savedElement = (currentElement.prisoner ? currentElement.prisoner : curr entElement);
302 clickHide_deactivate();
303 currentElement = savedElement;
304 }
305 345
306 clickHide_filters = filters; 346 clickHide_filters = filters;
307 347
308 clickHideFiltersDialog = document.createElement("iframe"); 348 clickHideFiltersDialog = document.createElement("iframe");
309 clickHideFiltersDialog.src = ext.getURL("block.html"); 349 clickHideFiltersDialog.src = ext.getURL("block.html");
310 clickHideFiltersDialog.setAttribute("style", "position: fixed !important; visi bility: hidden; display: block !important; border: 0px !important;"); 350 clickHideFiltersDialog.setAttribute("style", "position: fixed !important; visi bility: hidden; display: block !important; border: 0px !important;");
311 clickHideFiltersDialog.style.WebkitBoxShadow = "5px 5px 20px rgba(0,0,0,0.5)"; 351 clickHideFiltersDialog.style.WebkitBoxShadow = "5px 5px 20px rgba(0,0,0,0.5)";
312 clickHideFiltersDialog.style.zIndex = 0x7FFFFFFF; 352 clickHideFiltersDialog.style.zIndex = 0x7FFFFFFF;
313 353
314 // Position in upper-left all the time 354 // Position in upper-left all the time
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after
356 // on whether the user actually wants these filters 396 // on whether the user actually wants these filters
357 function clickHide_rulesPending() { 397 function clickHide_rulesPending() {
358 clickHide_activated = false; 398 clickHide_activated = false;
359 document.removeEventListener("mouseover", clickHide_mouseOver, true); 399 document.removeEventListener("mouseover", clickHide_mouseOver, true);
360 document.removeEventListener("mouseout", clickHide_mouseOut, true); 400 document.removeEventListener("mouseout", clickHide_mouseOut, true);
361 document.removeEventListener("click", clickHide_mouseClick, true); 401 document.removeEventListener("click", clickHide_mouseClick, true);
362 document.removeEventListener("keydown", clickHide_keyDown, true); 402 document.removeEventListener("keydown", clickHide_keyDown, true);
363 } 403 }
364 404
365 // Turn off click-to-hide 405 // Turn off click-to-hide
366 function clickHide_deactivate() 406 function clickHide_deactivate(keepOverlays)
367 { 407 {
368 if (clickHideFiltersDialog) 408 if (clickHideFiltersDialog)
369 { 409 {
370 document.body.removeChild(clickHideFiltersDialog); 410 document.body.removeChild(clickHideFiltersDialog);
371 clickHideFiltersDialog = null; 411 clickHideFiltersDialog = null;
372 } 412 }
373
374 if(currentElement) {
375 currentElement.removeEventListener("contextmenu", clickHide_elementClickHand ler, false);
376 unhighlightElements();
377 unhighlightElement(currentElement);
378 currentElement = null;
379 clickHideFilters = null;
380 }
381 unhighlightElements();
382 413
383 clickHide_activated = false; 414 clickHide_activated = false;
384 clickHide_filters = null; 415 clickHide_filters = null;
385 if(!document) 416 if(!document)
386 return; // This can happen inside a nuked iframe...I think 417 return; // This can happen inside a nuked iframe...I think
387 document.removeEventListener("mouseover", clickHide_mouseOver, true); 418 document.removeEventListener("mouseover", clickHide_mouseOver, true);
388 document.removeEventListener("mouseout", clickHide_mouseOut, true); 419 document.removeEventListener("mouseout", clickHide_mouseOut, true);
389 document.removeEventListener("click", clickHide_mouseClick, true); 420 document.removeEventListener("click", clickHide_mouseClick, true);
390 document.removeEventListener("keydown", clickHide_keyDown, true); 421 document.removeEventListener("keydown", clickHide_keyDown, true);
391 422
392 // Remove overlays 423 if (!keepOverlays)
393 // For some reason iterating over the array returend by getElementsByClassName () doesn't work 424 {
394 var elt; 425 if (currentElement) {
395 while(elt = document.querySelector('.__adblockplus__overlay')) 426 currentElement.removeEventListener("contextmenu", clickHide_elementClickH andler, true);
396 elt.parentNode.removeChild(elt); 427 unhighlightElements();
428 unhighlightElement(currentElement);
429 currentElement = null;
430 clickHideFilters = null;
431 }
432 unhighlightElements();
433
434 var overlays = document.getElementsByClassName("__adblockplus__overlay");
435 while (overlays.length > 0)
436 overlays[0].parentNode.removeChild(overlays[0]);
437 }
397 } 438 }
398 439
399 function clickHide_elementClickHandler(ev) { 440 function clickHide_elementClickHandler(ev) {
400 ev.preventDefault(); 441 ev.preventDefault();
401 ev.stopPropagation(); 442 ev.stopPropagation();
402 clickHide_mouseClick(ev); 443 clickHide_mouseClick(ev);
403 } 444 }
404 445
405 // Hovering over an element so highlight it 446 // Hovering over an element so highlight it
406 function clickHide_mouseOver(e) 447 function clickHide_mouseOver(e)
(...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after
483 if (elt.classList.length > 0) 524 if (elt.classList.length > 0)
484 { 525 {
485 var selector = ""; 526 var selector = "";
486 527
487 for (var i = 0; i < elt.classList.length; i++) 528 for (var i = 0; i < elt.classList.length; i++)
488 selector += "." + escapeCSS(elt.classList[i]); 529 selector += "." + escapeCSS(elt.classList[i]);
489 530
490 addSelector(selector); 531 addSelector(selector);
491 } 532 }
492 533
493 var urls = getElementURLs(elt); 534 var urls = getURLsFromElement(elt);
494 for (var i = 0; i < urls.length; i++) 535 for (var i = 0; i < urls.length; i++)
495 { 536 {
496 var url = urls[i]; 537 var url = urls[i];
497 var isHTTP = /^https?:/i.test(url); 538
498 539 if (/^https?:/i.test(url))
499 if (isHTTP)
500 { 540 {
501 var filter = url.replace(/^[\w\-]+:\/+(?:www\.)?/, "||"); 541 var filter = url.replace(/^[\w\-]+:\/+(?:www\.)?/, "||");
502 542
503 if (clickHideFilters.indexOf(filter) != -1) 543 if (clickHideFilters.indexOf(filter) == -1)
504 continue; 544 clickHideFilters.push(filter);
505 545
506 clickHideFilters.push(filter); 546 continue;
507 } 547 }
508 548
509 if (url == elt.src) 549 if (url == elt.src)
510 { 550 addSelector(escapeCSS(elt.localName) + '[src=' + quote(elt.getAttribute("s rc")) + ']');
511 var selector = escapeCSS(elt.localName) + '[src=' + quote(elt.getAttribute ("src")) + ']'; 551 }
512
513 if (isHTTP)
514 selectorList.push(selector);
515 else
516 addSelector(selector);
517 }
518 }
519
520 // restore the original style, before generating the fallback filter that
521 // will include the style, and to prevent highlightElements from saving those
522 unhighlightElement(currentElement);
523 552
524 // as last resort, create a filter based on inline styles 553 // as last resort, create a filter based on inline styles
525 if (clickHideFilters.length == 0) 554 if (clickHideFilters.length == 0)
526 { 555 {
527 var style = elt.getAttribute("style"); 556 var style = getOriginalStyle(elt);
528 if (style) 557 if (style)
529 addSelector(escapeCSS(elt.localName) + '[style=' + quote(style) + ']'); 558 addSelector(escapeCSS(elt.localName) + '[style=' + quote(style) + ']');
530 } 559 }
531 560
532 // Show popup 561 // Show popup
533 clickHide_showDialog(e.clientX, e.clientY, clickHideFilters); 562 clickHide_showDialog(e.clientX, e.clientY, clickHideFilters);
534 563
535 // Highlight the elements specified by selector in yellow 564 // Highlight the elements specified by selector in yellow
536 highlightElements(selectorList.join(",")); 565 if (selectorList.length > 0)
566 highlightElements(selectorList.join(","));
537 // Now, actually highlight the element the user clicked on in red 567 // Now, actually highlight the element the user clicked on in red
538 highlightElement(currentElement, "#fd1708", "#f6a1b5"); 568 highlightElement(currentElement, "#fd1708", "#f6a1b5");
539 569
540 // Make sure the browser doesn't handle this click 570 // Make sure the browser doesn't handle this click
541 e.preventDefault(); 571 e.preventDefault();
542 e.stopPropagation(); 572 e.stopPropagation();
543 }
544
545 function parseSrcSet(element)
546 {
547 if (!element.srcset)
548 return [];
549
550 var urls = element.srcset.split(",");
551 for (var i = 0; i < urls.length; i++)
552 {
553 var url = urls[i].replace(/^\s+/, "").replace(/(\s+\S+)?\s*$/, "");
554 if (url)
555 urls[i] = resolveURL(url);
556 else
557 urls.splice(i--, 1);
558 }
559
560 return urls;
561 } 573 }
562 574
563 // This function Copyright (c) 2008 Jeni Tennison, from jquery.uri.js 575 // This function Copyright (c) 2008 Jeni Tennison, from jquery.uri.js
564 // and licensed under the MIT license. See jquery-*.min.js for details. 576 // and licensed under the MIT license. See jquery-*.min.js for details.
565 function removeDotSegments(u) { 577 function removeDotSegments(u) {
566 var r = '', m = []; 578 var r = '', m = [];
567 if (/\./.test(u)) { 579 if (/\./.test(u)) {
568 while (u !== undefined && u !== '') { 580 while (u !== undefined && u !== '') {
569 if (u === '.' || u === '..') { 581 if (u === '.' || u === '..') {
570 u = ''; 582 u = '';
(...skipping 163 matching lines...) Expand 10 before | Expand all | Expand 10 after
734 } 746 }
735 break; 747 break;
736 case "clickhide-move": 748 case "clickhide-move":
737 if (clickHideFiltersDialog) 749 if (clickHideFiltersDialog)
738 { 750 {
739 clickHideFiltersDialog.style.left = (parseInt(clickHideFiltersDialog.s tyle.left, 10) + msg.x) + "px"; 751 clickHideFiltersDialog.style.left = (parseInt(clickHideFiltersDialog.s tyle.left, 10) + msg.x) + "px";
740 clickHideFiltersDialog.style.top = (parseInt(clickHideFiltersDialog.st yle.top, 10) + msg.y) + "px"; 752 clickHideFiltersDialog.style.top = (parseInt(clickHideFiltersDialog.st yle.top, 10) + msg.y) + "px";
741 } 753 }
742 break; 754 break;
743 case "clickhide-close": 755 case "clickhide-close":
744 if (clickHideFiltersDialog) 756 if (clickHideFiltersDialog && msg.remove)
745 { 757 {
746 // Explicitly get rid of currentElement 758 // Explicitly get rid of currentElement
747 if (msg.remove && currentElement && currentElement.parentNode) 759 var element = currentElement.prisoner || currentElement;
748 currentElement.parentNode.removeChild(currentElement); 760 if (element && element.parentNode)
761 element.parentNode.removeChild(element);
749 } 762 }
750 clickHide_deactivate(); 763 clickHide_deactivate();
751 break; 764 break;
752 default: 765 default:
753 sendResponse({}); 766 sendResponse({});
754 break; 767 break;
755 } 768 }
756 }); 769 });
757 770
758 if (window == window.top) 771 if (window == window.top)
759 ext.backgroundPage.sendMessage({type: "report-html-page"}); 772 ext.backgroundPage.sendMessage({type: "report-html-page"});
760 } 773 }
LEFTRIGHT
« no previous file | no next file » | Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Toggle Comments ('s')

Powered by Google App Engine
This is Rietveld