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

Delta Between Two Patch Sets: devtools-panel.js

Issue 5646124035604480: Issue 154 - Added UI for devtools panel on Chrome (Closed)
Left Patch Set: Addressed some comments Created Jan. 12, 2015, 11:55 a.m.
Right Patch Set: Added new request types Created Jan. 28, 2016, 7:37 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 | « devtools-panel.html ('k') | ext/background.js » ('j') | 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 <https://adblockplus.org/>,
3 * Copyright (C) 2006-2015 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
18 "use strict";
17 19
18 function generateFilter(request) 20 function generateFilter(request)
19 { 21 {
20 var filter = request.url.replace(/^[\w\-]+:\/+(?:www\.)?/, "||"); 22 var filter = request.url.replace(/^[\w\-]+:\/+(?:www\.)?/, "||");
21 23
22 if (request.type == "POPUP") 24 if (request.type == "POPUP")
23 { 25 {
24 filter += "$popup"; 26 filter += "$popup";
25 27
26 if (request.url == "about:blank") 28 if (request.url == "about:blank")
27 filter += ",domain=" + request.docDomain; 29 filter += ",domain=" + request.docDomain;
28 } 30 }
29 31
30 return filter; 32 return filter;
31 } 33 }
32 34
33 function createActionButton(action, label, filter, port) 35 function createActionButton(action, label, filter)
34 { 36 {
35 var button = document.createElement("span"); 37 var button = document.createElement("span");
36 38
37 button.textContent = label; 39 button.textContent = label;
38 button.classList.add("action"); 40 button.classList.add("action");
39 41
40 button.addEventListener("click", function() 42 button.addEventListener("click", function()
41 { 43 {
42 port.postMessage({action: action, filter: filter}); 44 ext.backgroundPage.sendMessage({
43 }); 45 type: "filters." + action,
46 text: filter
47 });
48 }, false);
44 49
45 return button; 50 return button;
46 } 51 }
47 52
48 function createRecord(request, filter, port) 53 function createRecord(request, filter, template)
49 { 54 {
50 var row = document.createElement("tr"); 55 var row = document.importNode(template, true);
51 row.dataset.type = request.type; 56 row.dataset.type = request.type;
52 57
53 var requestCell = document.createElement("td"); 58 row.querySelector(".domain").textContent = request.docDomain;
54 row.appendChild(requestCell); 59 row.querySelector(".type").textContent = request.type;
55 60
56 var requestWrapper = document.createElement("div"); 61 var urlElement = row.querySelector(".url");
57 requestWrapper.classList.add("request-wrapper"); 62 var actionWrapper = row.querySelector(".action-wrapper");
58 requestCell.appendChild(requestWrapper);
59
60 var urlElement = document.createElement("div");
61 urlElement.classList.add("url");
62 urlElement.innerHTML = "&nbsp;";
63 requestWrapper.appendChild(urlElement);
64
65 var domainElement = document.createElement("div");
66 domainElement.classList.add("domain");
67 domainElement.textContent = request.docDomain;
68 requestWrapper.appendChild(domainElement);
69
70 var typeElement = document.createElement("div");
71 typeElement.classList.add("type");
72 typeElement.textContent = request.type;
73 requestWrapper.appendChild(typeElement);
74
75 var filterCell = document.createElement("td");
76 row.appendChild(filterCell);
77
78 var actionWrapper = document.createElement("div");
79 actionWrapper.classList.add("action-wrapper");
80 filterCell.appendChild(actionWrapper);
81
82 var filterWrapper = document.createElement("div");
83 filterWrapper.classList.add("filter-wrapper");
84 actionWrapper.appendChild(filterWrapper);
85
86 var filterElement = document.createElement("div");
87 filterElement.innerHTML = "&nbsp;";
88 filterElement.classList.add("filter");
89 filterWrapper.appendChild(filterElement);
90
91 var originElement = document.createElement("div");
92 originElement.innerHTML = "&nbsp;";
93 originElement.classList.add("origin");
94 filterWrapper.appendChild(originElement);
95 63
96 if (request.url) 64 if (request.url)
97 { 65 {
98 urlElement.textContent = request.url; 66 urlElement.textContent = request.url;
99 67
100 if ("openResource" in ext.devtools.panels && request.type != "POPUP") 68 if ("openResource" in ext.devtools.panels && request.type != "POPUP")
101 { 69 {
102 urlElement.classList.add("resourceLink"); 70 urlElement.classList.add("resourceLink");
103 urlElement.addEventListener("click", function() 71 urlElement.addEventListener("click", function()
104 { 72 {
105 ext.devtools.panels.openResource(request.url); 73 ext.devtools.panels.openResource(request.url);
106 }); 74 }, false);
107 } 75 }
108 } 76 }
109 77
110 if (filter) 78 if (filter)
111 { 79 {
80 var filterElement = row.querySelector(".filter");
81 var originElement = row.querySelector(".origin");
82
112 filterElement.textContent = filter.text; 83 filterElement.textContent = filter.text;
113 row.dataset.state = filter.whitelisted ? "whitelisted" : "blocked"; 84 row.dataset.state = filter.whitelisted ? "whitelisted" : "blocked";
114 85
115 if (filter.subscription) 86 if (filter.subscription)
116 originElement.textContent = filter.subscription; 87 originElement.textContent = filter.subscription;
117 else 88 else
118 { 89 {
119 if (filter.userDefined) 90 if (filter.userDefined)
120 originElement.textContent = "user-defined"; 91 originElement.textContent = "user-defined";
121 else 92 else
122 originElement.textContent = "unnamed subscription"; 93 originElement.textContent = "unnamed subscription";
123 94
124 originElement.classList.add("unnamed"); 95 originElement.classList.add("unnamed");
125 } 96 }
126 97
127 if (!filter.whitelisted && request.type != "ELEMHIDE") 98 if (!filter.whitelisted && request.type != "ELEMHIDE")
128 actionWrapper.appendChild(createActionButton("add", "Whitelist request", " @@" + generateFilter(request), port)); 99 actionWrapper.appendChild(createActionButton("add", "Add exception", "@@" + generateFilter(request)));
129 100
130 if (filter.userDefined) 101 if (filter.userDefined)
131 actionWrapper.appendChild(createActionButton("remove", "Remove filter", fi lter.text, port)); 102 actionWrapper.appendChild(createActionButton("remove", "Remove rule", filt er.text));
132 } 103 }
133 else 104 else
134 actionWrapper.appendChild(createActionButton("add", "Block request", generat eFilter(request), port)); 105 actionWrapper.appendChild(createActionButton("add", "Block item", generateFi lter(request)));
135 106
136 return row; 107 return row;
137 } 108 }
138 109
139 document.addEventListener("DOMContentLoaded", function() 110 document.addEventListener("DOMContentLoaded", function()
140 { 111 {
141 var port = ext.devtools.connect();
142 var container = document.getElementById("items"); 112 var container = document.getElementById("items");
143 var table = container.getElementsByTagName("table")[0]; 113 var table = container.querySelector("tbody");
114 var template = document.querySelector("template").content.firstElementChild;
144 115
145 port.onMessage.addListener(function(msg) 116 document.getElementById("reload").addEventListener("click", function()
146 { 117 {
147 switch (msg.type) 118 ext.devtools.inspectedWindow.reload();
119 }, false);
120
121 document.getElementById("filter-state").addEventListener("change", function(ev ent)
122 {
123 container.dataset.filterState = event.target.value;
124 }, false);
125
126 document.getElementById("filter-type").addEventListener("change", function(eve nt)
127 {
128 container.dataset.filterType = event.target.value;
129 }, false);
130
131 ext.onMessage.addListener(function(message)
132 {
133 switch (message.type)
148 { 134 {
149 case "add-record": 135 case "add-record":
150 table.appendChild(createRecord(msg.request, msg.filter, port)); 136 table.appendChild(createRecord(message.request, message.filter, template ));
151 break; 137 break;
152 138
153 case "update-record": 139 case "update-record":
154 var oldRow = table.getElementsByTagName("tr")[msg.index]; 140 var oldRow = table.getElementsByTagName("tr")[message.index];
155 var newRow = createRecord(msg.request, msg.filter, port); 141 var newRow = createRecord(message.request, message.filter, template);
156 oldRow.parentNode.replaceChild(newRow, oldRow); 142 oldRow.parentNode.replaceChild(newRow, oldRow);
157 newRow.classList.add("changed"); 143 newRow.classList.add("changed");
158 container.classList.add("has-changes"); 144 container.classList.add("has-changes");
159 break; 145 break;
160 146
161 case "remove-record": 147 case "remove-record":
162 var row = table.getElementsByTagName("tr")[msg.index]; 148 var row = table.getElementsByTagName("tr")[message.index];
163 row.parentNode.removeChild(row); 149 row.parentNode.removeChild(row);
164 container.classList.add("has-changes"); 150 container.classList.add("has-changes");
165 break; 151 break;
166 152
167 case "reset": 153 case "reset":
168 table.innerHTML = ""; 154 table.innerHTML = "";
169 container.classList.remove("has-changes"); 155 container.classList.remove("has-changes");
170 break; 156 break;
171 } 157 }
172 }); 158 });
173 159 }, false);
174 document.getElementById("reload").addEventListener("click", function()
175 {
176 ext.devtools.inspectedWindow.reload();
177 });
178
179 document.getElementById("filter-state").addEventListener("change", function(ev ent)
180 {
181 container.dataset.filterState = event.target.value;
182 });
183
184 document.getElementById("filter-type").addEventListener("change", function(eve nt)
185 {
186 container.dataset.filterType = event.target.value;
187 });
188 });
LEFTRIGHT

Powered by Google App Engine
This is Rietveld