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

Side by Side Diff: lib/content/snippets.js

Issue 30024560: Issue 7450 - Implement hide-if-contains-visible-text snippet (Closed) Base URL: https://hg.adblockplus.org/adblockpluscore/
Patch Set: Rework snippet Created April 17, 2019, 5:11 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 | test/browser/_utils.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 390 matching lines...) Expand 10 before | Expand all | Expand 10 after
401 } 401 }
402 }); 402 });
403 } 403 }
404 404
405 exports["hide-if-shadow-contains"] = makeInjector(hideIfShadowContains, 405 exports["hide-if-shadow-contains"] = makeInjector(hideIfShadowContains,
406 toRegExp, regexEscape, 406 toRegExp, regexEscape,
407 hideElement); 407 hideElement);
408 408
409 /** 409 /**
410 * Hides any HTML element or one of its ancestors matching a CSS selector if 410 * Hides any HTML element or one of its ancestors matching a CSS selector if
411 * it matches the provided condition.
412 *
413 * @param {function} match The function that match the element.
414 * @param {string} selector The CSS selector that an HTML element must match
415 * for it to be hidden.
416 * @param {string?} [searchSelector] The CSS selector that an HTML element
417 * containing the given string must match. Defaults to the value of the
418 * <code>selector</code> argument.
419 */
420 function hideIfMatch(match, selector = "*", searchSelector = null)
421 {
422 if (searchSelector == null)
423 searchSelector = selector;
424
425 new MutationObserver(() =>
426 {
427 for (let element of document.querySelectorAll(searchSelector))
428 {
429 if (match(element))
430 {
431 let closest = element.closest(selector);
432 if (closest)
433 hideElement(closest);
434 }
435 }
436 })
437 .observe(document, {childList: true, characterData: true, subtree: true});
438 }
439
440 /**
441 * Hides any HTML element or one of its ancestors matching a CSS selector if
411 * the text content of the element contains a given string. 442 * the text content of the element contains a given string.
412 * 443 *
413 * @param {string} search The string to look for in HTML elements. If the 444 * @param {string} search The string to look for in HTML elements. If the
414 * string begins and ends with a slash (<code>/</code>), the text in between 445 * string begins and ends with a slash (<code>/</code>), the text in between
415 * is treated as a regular expression. 446 * is treated as a regular expression.
416 * @param {string} selector The CSS selector that an HTML element must match 447 * @param {string} selector The CSS selector that an HTML element must match
417 * for it to be hidden. 448 * for it to be hidden.
418 * @param {string?} [searchSelector] The CSS selector that an HTML element 449 * @param {string?} [searchSelector] The CSS selector that an HTML element
419 * containing the given string must match. Defaults to the value of the 450 * containing the given string must match. Defaults to the value of the
420 * <code>selector</code> argument. 451 * <code>selector</code> argument.
421 */ 452 */
422 function hideIfContains(search, selector = "*", searchSelector = null) 453 function hideIfContains(search, selector = "*", searchSelector = null)
423 { 454 {
424 if (searchSelector == null) 455 let re = toRegExp(search);
425 searchSelector = selector; 456
457 hideIfMatch(element => re.test(element.textContent),
458 selector, searchSelector);
459 }
460
461 exports["hide-if-contains"] = hideIfContains;
462
463 /**
464 * Hides any HTML element matching a CSS selector if the visible text content
465 * of the element contains a given string.
466 *
467 * @param {string} search The text to match to the visible text. Is considered
468 * visible text that isn't hidden by CSS properties or other means.
469 * If the string begins and ends with a slash (<code>/</code>), the
470 * text in between is treated as a regular expression.
471 * @param {string} selector The CSS selector that an HTML element must match
472 * for it to be hidden.
473 * @param {string?} [searchSelector] The CSS selector that an HTML element
474 * containing the given string must match. Defaults to the value of the
475 * <code>selector</code> argument.
476 */
477 function hideIfContainsVisibleText(search, selector, searchSelector = null)
478 {
479 /**
480 * Determines if the text inside the element is visible.
481 * @param {Element} element The leaf element we are checking.
482 * @param {?CSSStyleDeclaration} [style] The computed style of element. If
483 * falsey it will be queried.
484 * @returns {bool} Whether the text is visible.
485 */
486 function isTextVisible(element, style)
487 {
488 if (!style)
489 style = window.getComputedStyle(element);
490
491 if (style.getPropertyValue("opacity") == "0")
492 return false;
493 if (style.getPropertyValue("font-size") == "0px")
494 return false;
495 if (style.getPropertyValue("color") ==
496 style.getPropertyValue("background-color"))
497 return false;
498
499 return true;
500 }
501
502 /**
503 * Returns the visible text content from an element and its children.
504 * @param {Element} element The element whose visible text we want.
505 * @returns {string} The text that is visible.
506 */
507 function getVisibleContent(element)
508 {
509 let style = window.getComputedStyle(element);
510 if (style.getPropertyValue("display") == "none")
511 return "";
512 let visibility = style.getPropertyValue("visibility");
513 if (visibility == "hidden" || visibility == "collapse")
514 return "";
515
516 let text = "";
517 for (let node of element.childNodes)
518 {
519 switch (node.nodeType)
520 {
521 case Node.ELEMENT_NODE:
522 text += getVisibleContent(node);
523 break;
524 case Node.TEXT_NODE:
525 if (isTextVisible(element, style))
526 text += node.nodeValue;
527 break;
528 }
529 }
530 return text;
531 }
426 532
427 let re = toRegExp(search); 533 let re = toRegExp(search);
428 534
429 new MutationObserver(() => 535 hideIfMatch(element =>
430 { 536 {
431 for (let element of document.querySelectorAll(searchSelector)) 537 let content = getVisibleContent(element);
432 { 538 return re.test(content);
433 if (re.test(element.textContent)) 539 }, selector, searchSelector);
434 {
435 let closest = element.closest(selector);
436 if (closest)
437 hideElement(closest);
438 }
439 }
440 })
441 .observe(document, {childList: true, characterData: true, subtree: true});
442 } 540 }
443 541
444 exports["hide-if-contains"] = hideIfContains; 542 exports["hide-if-contains-visible-text"] =
543 makeInjector(hideIfContainsVisibleText, hideIfMatch, hideElement);
445 544
446 /** 545 /**
447 * Hides any HTML element or one of its ancestors matching a CSS selector if 546 * Hides any HTML element or one of its ancestors matching a CSS selector if
448 * the text content of the element contains a given string and, optionally, if 547 * the text content of the element contains a given string and, optionally, if
449 * the element's computed style contains a given string. 548 * the element's computed style contains a given string.
450 * 549 *
451 * @param {string} search The string to look for in HTML elements. If the 550 * @param {string} search The string to look for in HTML elements. If the
452 * string begins and ends with a slash (<code>/</code>), the text in between 551 * string begins and ends with a slash (<code>/</code>), the text in between
453 * is treated as a regular expression. 552 * is treated as a regular expression.
454 * @param {string} selector The CSS selector that an HTML element must match 553 * @param {string} selector The CSS selector that an HTML element must match
(...skipping 438 matching lines...) Expand 10 before | Expand all | Expand 10 after
893 992
894 args[0] = url.href; 993 args[0] = url.href;
895 } 994 }
896 995
897 return fetch_.apply(this, args); 996 return fetch_.apply(this, args);
898 }; 997 };
899 } 998 }
900 999
901 exports["strip-fetch-query-parameter"] = makeInjector(stripFetchQueryParameter, 1000 exports["strip-fetch-query-parameter"] = makeInjector(stripFetchQueryParameter,
902 toRegExp, regexEscape); 1001 toRegExp, regexEscape);
OLDNEW
« no previous file with comments | « no previous file | test/browser/_utils.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld