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

Side by Side Diff: lib/cssInjection.js

Issue 29564767: Issue 242 - Use user style sheets on Chromium (Closed) Base URL: https://hg.adblockplus.org/adblockpluschrome/
Patch Set: Update comment Created Jan. 31, 2018, 1:13 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 | « include.preload.js ('k') | no next file » | 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
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 /** @module cssInjection */ 18 /** @module cssInjection */
19 19
20 "use strict"; 20 "use strict";
21 21
22 const {RegExpFilter} = require("filterClasses"); 22 const {RegExpFilter} = require("filterClasses");
23 const {ElemHide} = require("elemHide"); 23 const {ElemHide} = require("elemHide");
24 const {ElemHideEmulation} = require("elemHideEmulation"); 24 const {ElemHideEmulation} = require("elemHideEmulation");
25 const {checkWhitelisted} = require("whitelisting"); 25 const {checkWhitelisted} = require("whitelisting");
26 const {extractHostFromFrame} = require("url"); 26 const {extractHostFromFrame} = require("url");
27 const {port} = require("messaging"); 27 const {port} = require("messaging");
28 const devtools = require("devtools"); 28 const devtools = require("devtools");
29 const info = require("info");
29 30
30 const userStyleSheetsSupported = "extensionTypes" in browser && 31 // Chromium's support for tabs.removeCSS is still a work in progress and the
31 "CSSOrigin" in browser.extensionTypes; 32 // API is likely to be different from Firefox's; for now we just don't use it
33 // at all, even if it's available.
34 // See https://crbug.com/608854
35 const styleSheetRemovalSupported = "removeCSS" in browser.tabs &&
36 info.platform == "gecko";
37
32 const selectorGroupSize = 1024; 38 const selectorGroupSize = 1024;
33 39
40 let userStyleSheetsSupported = true;
41
34 function* splitSelectors(selectors) 42 function* splitSelectors(selectors)
35 { 43 {
36 // Chromium's Blink engine supports only up to 8,192 simple selectors, and 44 // Chromium's Blink engine supports only up to 8,192 simple selectors, and
37 // even fewer compound selectors, in a rule. The exact number of selectors 45 // even fewer compound selectors, in a rule. The exact number of selectors
38 // that would work depends on their sizes (e.g. "#foo .bar" has a size of 2). 46 // that would work depends on their sizes (e.g. "#foo .bar" has a size of 2).
39 // Since we don't know the sizes of the selectors here, we simply split them 47 // Since we don't know the sizes of the selectors here, we simply split them
40 // into groups of 1,024, based on the reasonable assumption that the average 48 // into groups of 1,024, based on the reasonable assumption that the average
41 // selector won't have a size greater than 8. The alternative would be to 49 // selector won't have a size greater than 8. The alternative would be to
42 // calculate the sizes of the selectors and divide them up accordingly, but 50 // calculate the sizes of the selectors and divide them up accordingly, but
43 // this approach is more efficient and has worked well in practice. In theory 51 // this approach is more efficient and has worked well in practice. In theory
(...skipping 10 matching lines...) Expand all
54 yield selectorGroup.join(", ") + " {display: none !important;}"; 62 yield selectorGroup.join(", ") + " {display: none !important;}";
55 } 63 }
56 64
57 function createStyleSheet(selectors) 65 function createStyleSheet(selectors)
58 { 66 {
59 return Array.from(createRules(selectors)).join("\n"); 67 return Array.from(createRules(selectors)).join("\n");
60 } 68 }
61 69
62 function addStyleSheet(tabId, frameId, styleSheet) 70 function addStyleSheet(tabId, frameId, styleSheet)
63 { 71 {
64 browser.tabs.insertCSS(tabId, { 72 try
65 code: styleSheet, 73 {
66 cssOrigin: "user", 74 browser.tabs.insertCSS(tabId, {
67 frameId, 75 code: styleSheet,
68 matchAboutBlank: true, 76 cssOrigin: "user",
69 runAt: "document_start" 77 frameId,
70 }); 78 matchAboutBlank: true,
79 runAt: "document_start"
80 });
81 }
82 catch (error)
83 {
84 if (/\bError processing cssOrigin\b/.test(error.message) == -1)
85 throw error;
86
87 userStyleSheetsSupported = false;
88 }
89
90 return userStyleSheetsSupported;
71 } 91 }
72 92
73 function removeStyleSheet(tabId, frameId, styleSheet) 93 function removeStyleSheet(tabId, frameId, styleSheet)
74 { 94 {
95 if (!styleSheetRemovalSupported)
96 return;
97
75 browser.tabs.removeCSS(tabId, { 98 browser.tabs.removeCSS(tabId, {
76 code: styleSheet, 99 code: styleSheet,
77 cssOrigin: "user", 100 cssOrigin: "user",
78 frameId, 101 frameId,
79 matchAboutBlank: true 102 matchAboutBlank: true
80 }); 103 });
81 } 104 }
82 105
83 function updateFrameStyles(tabId, frameId, selectors, groupName) 106 function updateFrameStyles(tabId, frameId, selectors, groupName)
84 { 107 {
85 let styleSheet = null; 108 let styleSheet = null;
86 if (selectors.length > 0) 109 if (selectors.length > 0)
87 styleSheet = createStyleSheet(selectors); 110 styleSheet = createStyleSheet(selectors);
88 111
89 let frame = ext.getFrame(tabId, frameId); 112 let frame = ext.getFrame(tabId, frameId);
90 if (!frame.injectedStyleSheets) 113 if (!frame.injectedStyleSheets)
91 frame.injectedStyleSheets = new Map(); 114 frame.injectedStyleSheets = new Map();
92 115
93 let oldStyleSheet = frame.injectedStyleSheets.get(groupName); 116 let oldStyleSheet = frame.injectedStyleSheets.get(groupName);
94 117
95 // Ideally we would compare the old and new style sheets and skip this code 118 // Ideally we would compare the old and new style sheets and skip this code
96 // if they're the same, but the old style sheet can be a leftover from a 119 // if they're the same, but the old style sheet can be a leftover from a
97 // previous instance of the frame. We must add the new style sheet 120 // previous instance of the frame. We must add the new style sheet
98 // regardless. 121 // regardless.
99 122
100 // Add the new style sheet first to keep previously hidden elements from 123 // Add the new style sheet first to keep previously hidden elements from
101 // reappearing momentarily. 124 // reappearing momentarily.
102 if (styleSheet) 125 if (styleSheet && !addStyleSheet(tabId, frameId, styleSheet))
103 addStyleSheet(tabId, frameId, styleSheet); 126 return false;
104 127
105 // Sometimes the old and new style sheets can be exactly the same. In such a 128 // Sometimes the old and new style sheets can be exactly the same. In such a
106 // case, do not remove the "old" style sheet, because it is in fact the new 129 // case, do not remove the "old" style sheet, because it is in fact the new
107 // style sheet now. 130 // style sheet now.
108 if (oldStyleSheet && oldStyleSheet != styleSheet) 131 if (oldStyleSheet && oldStyleSheet != styleSheet)
109 removeStyleSheet(tabId, frameId, oldStyleSheet); 132 removeStyleSheet(tabId, frameId, oldStyleSheet);
110 133
111 frame.injectedStyleSheets.set(groupName, styleSheet); 134 frame.injectedStyleSheets.set(groupName, styleSheet);
135 return true;
112 } 136 }
113 137
114 port.on("elemhide.getSelectors", (message, sender) => 138 port.on("elemhide.getSelectors", (message, sender) =>
115 { 139 {
116 let selectors = []; 140 let selectors = [];
117 let emulatedPatterns = []; 141 let emulatedPatterns = [];
118 let trace = devtools && devtools.hasPanel(sender.page); 142 let trace = devtools && devtools.hasPanel(sender.page);
119 let inline = !userStyleSheetsSupported; 143 let inline = !userStyleSheetsSupported;
120 144
121 if (!checkWhitelisted(sender.page, sender.frame, 145 if (!checkWhitelisted(sender.page, sender.frame,
122 RegExpFilter.typeMap.DOCUMENT | 146 RegExpFilter.typeMap.DOCUMENT |
123 RegExpFilter.typeMap.ELEMHIDE)) 147 RegExpFilter.typeMap.ELEMHIDE))
124 { 148 {
125 let hostname = extractHostFromFrame(sender.frame); 149 let hostname = extractHostFromFrame(sender.frame);
126 let specificOnly = checkWhitelisted(sender.page, sender.frame, 150 let specificOnly = checkWhitelisted(sender.page, sender.frame,
127 RegExpFilter.typeMap.GENERICHIDE); 151 RegExpFilter.typeMap.GENERICHIDE);
128 152
129 selectors = ElemHide.getSelectorsForDomain( 153 selectors = ElemHide.getSelectorsForDomain(
130 hostname, 154 hostname,
131 specificOnly ? ElemHide.SPECIFIC_ONLY : ElemHide.ALL_MATCHING 155 specificOnly ? ElemHide.SPECIFIC_ONLY : ElemHide.ALL_MATCHING
132 ); 156 );
133 157
134 for (let filter of ElemHideEmulation.getRulesForDomain(hostname)) 158 for (let filter of ElemHideEmulation.getRulesForDomain(hostname))
135 emulatedPatterns.push({selector: filter.selector, text: filter.text}); 159 emulatedPatterns.push({selector: filter.selector, text: filter.text});
136 } 160 }
137 161
138 if (!inline) 162 if (!inline && !updateFrameStyles(sender.page.id, sender.frame.id,
139 updateFrameStyles(sender.page.id, sender.frame.id, selectors); 163 selectors))
164 {
165 inline = true;
166 }
140 167
141 let response = {trace, inline, emulatedPatterns}; 168 let response = {trace, inline, emulatedPatterns};
142 if (trace || inline) 169 if (trace || inline)
143 response.selectors = selectors; 170 response.selectors = selectors;
144 171
172 // If we can't remove user style sheets using tabs.removeCSS, we'll only keep
173 // adding them, which could cause problems with emulation filters as
174 // described in issue #5864. Instead, we can just ask the content script to
175 // add styles for emulation filters inline.
176 if (!styleSheetRemovalSupported)
177 response.inlineEmulated = true;
178
145 return response; 179 return response;
146 }); 180 });
147 181
148 port.on("elemhide.injectSelectors", (message, sender) => 182 port.on("elemhide.injectSelectors", (message, sender) =>
149 { 183 {
150 updateFrameStyles(sender.page.id, sender.frame.id, message.selectors, 184 updateFrameStyles(sender.page.id, sender.frame.id, message.selectors,
151 message.groupName); 185 message.groupName);
152 }); 186 });
OLDNEW
« no previous file with comments | « include.preload.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld