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

Side by Side Diff: devtools-panel.js

Issue 29375899: Issue 4871 - Start using ESLint for adblockplusui (Closed)
Patch Set: Created Feb. 20, 2017, 10:01 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« background.js ('K') | « common.js ('k') | ext/background.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
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 "use strict"; 18 "use strict";
19 19
20 var lastFilterQuery = null; 20 let lastFilterQuery = null;
21 21
22 function generateFilter(request, domainSpecific) 22 function generateFilter(request, domainSpecific)
23 { 23 {
24 var filter = request.url.replace(/^[\w\-]+:\/+(?:www\.)?/, "||"); 24 let filter = request.url.replace(/^[\w-]+:\/+(?:www\.)?/, "||");
25 var options = []; 25 let options = [];
26 26
27 if (request.type == "POPUP") 27 if (request.type == "POPUP")
28 { 28 {
29 options.push("popup"); 29 options.push("popup");
30 30
31 if (request.url == "about:blank") 31 if (request.url == "about:blank")
32 domainSpecific = true; 32 domainSpecific = true;
33 } 33 }
34 34
35 if (domainSpecific) 35 if (domainSpecific)
36 options.push("domain=" + request.docDomain); 36 options.push("domain=" + request.docDomain);
37 37
38 if (options.length > 0) 38 if (options.length > 0)
39 filter += "$" + options.join(","); 39 filter += "$" + options.join(",");
40 40
41 return filter; 41 return filter;
42 } 42 }
43 43
44 function createActionButton(action, label, filter) 44 function createActionButton(action, label, filter)
45 { 45 {
46 var button = document.createElement("span"); 46 let button = document.createElement("span");
47 47
48 button.textContent = label; 48 button.textContent = label;
49 button.classList.add("action"); 49 button.classList.add("action");
50 50
51 button.addEventListener("click", function() 51 button.addEventListener("click", () =>
52 { 52 {
53 ext.backgroundPage.sendMessage({ 53 ext.backgroundPage.sendMessage({
54 type: "filters." + action, 54 type: "filters." + action,
55 text: filter 55 text: filter
56 }); 56 });
57 }, false); 57 }, false);
58 58
59 return button; 59 return button;
60 } 60 }
61 61
62 function createRecord(request, filter, template) 62 function createRecord(request, filter, template)
63 { 63 {
64 var row = document.importNode(template, true); 64 let row = document.importNode(template, true);
65 row.dataset.type = request.type; 65 row.dataset.type = request.type;
66 66
67 row.querySelector(".domain").textContent = request.docDomain; 67 row.querySelector(".domain").textContent = request.docDomain;
68 row.querySelector(".type").textContent = request.type; 68 row.querySelector(".type").textContent = request.type;
69 69
70 var urlElement = row.querySelector(".url"); 70 let urlElement = row.querySelector(".url");
71 var actionWrapper = row.querySelector(".action-wrapper"); 71 let actionWrapper = row.querySelector(".action-wrapper");
72 72
73 if (request.url) 73 if (request.url)
74 { 74 {
75 urlElement.textContent = request.url; 75 urlElement.textContent = request.url;
76 76
77 if (request.type != "POPUP") 77 if (request.type != "POPUP")
78 { 78 {
79 urlElement.classList.add("resourceLink"); 79 urlElement.classList.add("resourceLink");
80 urlElement.addEventListener("click", function() 80 urlElement.addEventListener("click", () =>
81 { 81 {
82 ext.devtools.panels.openResource(request.url); 82 ext.devtools.panels.openResource(request.url);
83 }, false); 83 }, false);
84 } 84 }
85 } 85 }
86 86
87 if (filter) 87 if (filter)
88 { 88 {
89 var filterElement = row.querySelector(".filter"); 89 let filterElement = row.querySelector(".filter");
90 var originElement = row.querySelector(".origin"); 90 let originElement = row.querySelector(".origin");
91 91
92 filterElement.textContent = filter.text; 92 filterElement.textContent = filter.text;
93 row.dataset.state = filter.whitelisted ? "whitelisted" : "blocked"; 93 row.dataset.state = filter.whitelisted ? "whitelisted" : "blocked";
94 94
95 if (filter.subscription) 95 if (filter.subscription)
96 originElement.textContent = filter.subscription; 96 originElement.textContent = filter.subscription;
97 else 97 else
98 { 98 {
99 if (filter.userDefined) 99 if (filter.userDefined)
100 originElement.textContent = "user-defined"; 100 originElement.textContent = "user-defined";
101 else 101 else
102 originElement.textContent = "unnamed subscription"; 102 originElement.textContent = "unnamed subscription";
103 103
104 originElement.classList.add("unnamed"); 104 originElement.classList.add("unnamed");
105 } 105 }
106 106
107 if (!filter.whitelisted && request.type != "ELEMHIDE") 107 if (!filter.whitelisted && request.type != "ELEMHIDE")
108 {
108 actionWrapper.appendChild(createActionButton( 109 actionWrapper.appendChild(createActionButton(
109 "add", "Add exception", "@@" + generateFilter(request, false) 110 "add", "Add exception", "@@" + generateFilter(request, false)
110 )); 111 ));
112 }
111 113
112 if (filter.userDefined) 114 if (filter.userDefined)
115 {
113 actionWrapper.appendChild(createActionButton( 116 actionWrapper.appendChild(createActionButton(
114 "remove", "Remove rule", filter.text 117 "remove", "Remove rule", filter.text
115 )); 118 ));
119 }
116 } 120 }
117 else 121 else
122 {
118 actionWrapper.appendChild(createActionButton( 123 actionWrapper.appendChild(createActionButton(
119 "add", "Block item", generateFilter(request, request.specificOnly) 124 "add", "Block item", generateFilter(request, request.specificOnly)
120 )); 125 ));
126 }
121 127
122 if (lastFilterQuery && shouldFilterRow(row, lastFilterQuery)) 128 if (lastFilterQuery && shouldFilterRow(row, lastFilterQuery))
123 row.classList.add("filtered-by-search"); 129 row.classList.add("filtered-by-search");
124 130
125 return row; 131 return row;
126 } 132 }
127 133
128 function shouldFilterRow(row, query) 134 function shouldFilterRow(row, query)
129 { 135 {
130 var elementsToSearch = [ 136 let elementsToSearch = [
131 row.getElementsByClassName("url"), 137 row.getElementsByClassName("url"),
132 row.getElementsByClassName("filter"), 138 row.getElementsByClassName("filter"),
133 row.getElementsByClassName("origin"), 139 row.getElementsByClassName("origin"),
134 row.getElementsByClassName("type") 140 row.getElementsByClassName("type")
135 ]; 141 ];
136 142
137 for (var elements of elementsToSearch) 143 for (let elements of elementsToSearch)
138 { 144 {
139 for (var element of elements) 145 for (let element of elements)
140 { 146 {
141 if (element.innerText.search(query) != -1) 147 if (element.innerText.search(query) != -1)
142 return false; 148 return false;
143 } 149 }
144 } 150 }
145 return true; 151 return true;
146 } 152 }
147 153
148 function performSearch(table, query) 154 function performSearch(table, query)
149 { 155 {
150 for (var row of table.rows) 156 for (let row of table.rows)
151 { 157 {
152 if (shouldFilterRow(row, query)) 158 if (shouldFilterRow(row, query))
153 row.classList.add("filtered-by-search"); 159 row.classList.add("filtered-by-search");
154 else 160 else
155 row.classList.remove("filtered-by-search"); 161 row.classList.remove("filtered-by-search");
156 } 162 }
157 } 163 }
158 164
159 function cancelSearch(table) 165 function cancelSearch(table)
160 { 166 {
161 for (var row of table.rows) 167 for (let row of table.rows)
162 row.classList.remove("filtered-by-search"); 168 row.classList.remove("filtered-by-search");
163 } 169 }
164 170
165 document.addEventListener("DOMContentLoaded", function() 171 document.addEventListener("DOMContentLoaded", () =>
166 { 172 {
167 var container = document.getElementById("items"); 173 let container = document.getElementById("items");
168 var table = container.querySelector("tbody"); 174 let table = container.querySelector("tbody");
169 var template = document.querySelector("template").content.firstElementChild; 175 let template = document.querySelector("template").content.firstElementChild;
170 176
171 document.getElementById("reload").addEventListener("click", function() 177 document.getElementById("reload").addEventListener("click", () =>
172 { 178 {
173 ext.devtools.inspectedWindow.reload(); 179 ext.devtools.inspectedWindow.reload();
174 }, false); 180 }, false);
175 181
176 document.getElementById("filter-state").addEventListener("change", function(ev ent) 182 document.getElementById("filter-state").addEventListener("change", event =>
177 { 183 {
178 container.dataset.filterState = event.target.value; 184 container.dataset.filterState = event.target.value;
179 }, false); 185 }, false);
180 186
181 document.getElementById("filter-type").addEventListener("change", function(eve nt) 187 document.getElementById("filter-type").addEventListener("change", event =>
182 { 188 {
183 container.dataset.filterType = event.target.value; 189 container.dataset.filterType = event.target.value;
184 }, false); 190 }, false);
185 191
186 ext.onMessage.addListener(function(message) 192 ext.onMessage.addListener(message =>
187 { 193 {
188 switch (message.type) 194 switch (message.type)
189 { 195 {
190 case "add-record": 196 case "add-record":
191 table.appendChild(createRecord(message.request, message.filter, template )); 197 table.appendChild(createRecord(message.request, message.filter,
198 template));
192 break; 199 break;
193 200
194 case "update-record": 201 case "update-record":
195 var oldRow = table.getElementsByTagName("tr")[message.index]; 202 let oldRow = table.getElementsByTagName("tr")[message.index];
196 var newRow = createRecord(message.request, message.filter, template); 203 let newRow = createRecord(message.request, message.filter, template);
197 oldRow.parentNode.replaceChild(newRow, oldRow); 204 oldRow.parentNode.replaceChild(newRow, oldRow);
198 newRow.classList.add("changed"); 205 newRow.classList.add("changed");
199 container.classList.add("has-changes"); 206 container.classList.add("has-changes");
200 break; 207 break;
201 208
202 case "remove-record": 209 case "remove-record":
203 var row = table.getElementsByTagName("tr")[message.index]; 210 let row = table.getElementsByTagName("tr")[message.index];
204 row.parentNode.removeChild(row); 211 row.parentNode.removeChild(row);
205 container.classList.add("has-changes"); 212 container.classList.add("has-changes");
206 break; 213 break;
207 214
208 case "reset": 215 case "reset":
209 table.innerHTML = ""; 216 table.innerHTML = "";
210 container.classList.remove("has-changes"); 217 container.classList.remove("has-changes");
211 break; 218 break;
212 } 219 }
213 }); 220 });
214 221
215 window.addEventListener("message", function(event) 222 window.addEventListener("message", event =>
216 { 223 {
217 switch(event.data.type) 224 switch (event.data.type)
218 { 225 {
219 case "performSearch": 226 case "performSearch":
220 performSearch(table, event.data.queryString); 227 performSearch(table, event.data.queryString);
221 lastFilterQuery = event.data.queryString; 228 lastFilterQuery = event.data.queryString;
222 break; 229 break;
223 case "cancelSearch": 230 case "cancelSearch":
224 cancelSearch(table); 231 cancelSearch(table);
225 lastFilterQuery = null; 232 lastFilterQuery = null;
226 break; 233 break;
227 } 234 }
228 }); 235 });
229 236
230 // Since Chrome 54 the themeName is accessible, for earlier versions we must 237 // Since Chrome 54 the themeName is accessible, for earlier versions we must
231 // assume the default theme is being used. 238 // assume the default theme is being used.
232 // https://bugs.chromium.org/p/chromium/issues/detail?id=608869 239 // https://bugs.chromium.org/p/chromium/issues/detail?id=608869
233 let theme = chrome.devtools.panels.themeName || "default"; 240 let theme = chrome.devtools.panels.themeName || "default";
234 document.body.classList.add(theme); 241 document.body.classList.add(theme);
235 }, false); 242 }, false);
OLDNEW
« background.js ('K') | « common.js ('k') | ext/background.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld