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

Delta Between Two Patch Sets: include.postload.js

Issue 5455501458407424: Issue 1325 - Use Shadow DOM if possible when highlighting page elements (Closed)
Left Patch Set: Created Sept. 6, 2014, 2:57 p.m.
Right Patch Set: Addressed comments Created Sept. 23, 2014, 11:29 a.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
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details. 12 * GNU General Public License for more details.
13 * 13 *
14 * You should have received a copy of the GNU General Public License 14 * You should have received a copy of the GNU General Public License
15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>. 15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
16 */ 16 */
17 17
18 // Click-to-hide stuff 18 // Click-to-hide stuff
19 var clickHide_activated = false; 19 var clickHide_activated = false;
20 var clickHide_filters = null; 20 var clickHide_filters = null;
21 var currentElement = null; 21 var currentElement = null;
22 var clickHideFilters = null; 22 var clickHideFilters = null;
23 var highlightedElementsSelector = null; 23 var highlightedElementsSelector = null;
24 var clickHideFiltersDialog = null; 24 var clickHideFiltersDialog = null;
25 var lastRightClickEvent = null; 25 var lastRightClickEvent = null;
26 26
27 function createShadowRootIfPossible(element) 27 function supportsShadowRoot(element)
28 { 28 {
29 if (!("createShadowRoot" in element)) 29 if (!("createShadowRoot" in element))
30 return null; 30 return false;
31 31
32 // Those elements ignore insertion points. 32 // There are some elements (e.g. <textarea>), which don't
33 if (element.localName == "applet" || element.localName == 'input' ||
34 element.localName == "object" || element.localName == 'embed' ||
35 element.localName == "details" || element.localName == "summary")
36 return null;
Wladimir Palant 2014/09/10 21:16:33 Where does this list come from? This seems to be h
Sebastian Noack 2014/09/22 11:55:42 I finally found a way to test insertion points.
37
38 // There are some other elements (e.g. <textarea>), which don't even
39 // support author created shadow roots and throw an exception. 33 // support author created shadow roots and throw an exception.
34 var clone = element.cloneNode(false);
40 try 35 try
41 { 36 {
42 return element.createShadowRoot(); 37 clone.createShadowRoot();
43 } 38 }
44 catch (e) 39 catch (e)
45 { 40 {
46 return null; 41 return false;
47 } 42 }
43
44 // There are some elements (e.g. <input>), which support
45 // author created shadow roots, but ignore insertion points.
46 var child = document.createTextNode("");
47 clone.appendChild(child);
48
49 var shadow = document.createElement("shadow");
50 clone.shadowRoot.appendChild(shadow);
51
52 return shadow.getDistributedNodes()[0] == child;
48 } 53 }
49 54
50 function highlightElement(element, shadowColor, backgroundColor) 55 function highlightElement(element, shadowColor, backgroundColor)
51 { 56 {
52 unhighlightElement(element); 57 unhighlightElement(element);
53 58
54 var originalBoxShadowPriority = element.style.getPropertyPriority("box-shadow" ); 59 var originalBoxShadowPriority = element.style.getPropertyPriority("box-shadow" );
55 var originalBackgroundColorPriority = element.style.getPropertyPriority("backg round-color"); 60 var originalBackgroundColorPriority = element.style.getPropertyPriority("backg round-color");
56 var boxShadow = "inset 0px 0px 5px " + shadowColor; 61 var boxShadow = "inset 0px 0px 5px " + shadowColor;
57 62
(...skipping 19 matching lines...) Expand all
77 "background-color", 82 "background-color",
78 originalBackgroundColor, 83 originalBackgroundColor,
79 originalBackgroundColorPriority 84 originalBackgroundColorPriority
80 ); 85 );
81 }; 86 };
82 }; 87 };
83 88
84 var highlightWithShadowDOM = function() 89 var highlightWithShadowDOM = function()
85 { 90 {
86 var style = document.createElement("style"); 91 var style = document.createElement("style");
87 92 style.textContent = ":host {" +
93 "box-shadow:" + boxShadow + " !important;" +
94 "background-color:" + backgroundColor + " !important;" +
95 "}";
96
97 var root = element.createShadowRoot();
88 root.appendChild(document.createElement("shadow")); 98 root.appendChild(document.createElement("shadow"));
89 root.appendChild(style); 99 root.appendChild(style);
90
91 style.sheet.insertRule(":host { box-shadow: " + boxShadow + " !important; ba ckground-color: " + backgroundColor + " !important; }", 0);
Wladimir Palant 2014/09/10 21:16:33 Use style.textContent = ... here for simplicity? N
92 100
93 element._unhighlight = function() 101 element._unhighlight = function()
94 { 102 {
95 root.removeChild(style); 103 root.removeChild(style);
96 }; 104 };
97 }; 105 };
98 106
99 // If the element has important styles we have to replace the 107 // Use shadow DOM if posibble to avoid side effects when the
100 // style attribute, and can't override them with shadow DOM. 108 // web page updates style while highlighted. However, if the
101 if (originalBoxShadowPriority == "important" || 109 // element has important styles we can't override them with shadow DOM.
102 originalBackgroundColorPriority == "important") 110 if (supportsShadowRoot(element) && originalBoxShadowPriority != "importa nt" &&
103 { 111 originalBackgroundColorPriority != "importa nt")
104 highlightWithStyleAttribute();
105 return;
106 }
107
108 // Otherwise we use Shadow DOM if possbile to avoid side effects
109 // when the web page updates style while highlighted.
110 var root = createShadowRootIfPossible(element);
111 if (root)
112 highlightWithShadowDOM(); 112 highlightWithShadowDOM();
113 else 113 else
114 highlightWithStyleAttribute(); 114 highlightWithStyleAttribute();
115 } 115 }
116 116
117 117
118 function unhighlightElement(element) 118 function unhighlightElement(element)
119 { 119 {
120 if ("_unhighlight" in element) 120 if ("_unhighlight" in element)
121 { 121 {
(...skipping 518 matching lines...) Expand 10 before | Expand all | Expand 10 after
640 640
641 clickHide_deactivate(); 641 clickHide_deactivate();
642 } 642 }
643 break; 643 break;
644 default: 644 default:
645 sendResponse({}); 645 sendResponse({});
646 break; 646 break;
647 } 647 }
648 }); 648 });
649 } 649 }
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