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

Delta Between Two Patch Sets: devtools-panel.js

Issue 29695580: Issue 5093 - Indicate whether request in devtools panel belongs to tab (Closed)
Left Patch Set: Created Feb. 13, 2018, 2:08 p.m.
Right Patch Set: Created March 2, 2018, 3:53 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') | skin/devtools-panel.css » ('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 <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 150 matching lines...) Expand 10 before | Expand all | Expand 10 after
161 { 161 {
162 for (let element of elements) 162 for (let element of elements)
163 { 163 {
164 if (element.innerText.search(query) != -1) 164 if (element.innerText.search(query) != -1)
165 return false; 165 return false;
166 } 166 }
167 } 167 }
168 return true; 168 return true;
169 } 169 }
170 170
171 function performSearch(table, query) 171 function performSearch(rows, query)
172 { 172 {
173 for (let row of table.rows) 173 for (let row of rows)
174 { 174 {
175 if (shouldFilterRow(row, query)) 175 if (shouldFilterRow(row, query))
176 row.classList.add("filtered-by-search"); 176 row.classList.add("filtered-by-search");
177 else 177 else
178 row.classList.remove("filtered-by-search"); 178 row.classList.remove("filtered-by-search");
179 } 179 }
180 } 180 }
181 181
182 function cancelSearch(table) 182 function cancelSearch(table)
183 { 183 {
184 for (let row of table.rows) 184 for (let row of table.rows)
185 row.classList.remove("filtered-by-search"); 185 row.classList.remove("filtered-by-search");
186 } 186 }
187 187
188 /** 188 function createZebra(rows, state, type)
189 * Return a generic <tr> placeholder 189 {
190 * double linked with the <tr> itself to simplify 190 let i = 0;
191 * tbody swaps / filtering of undesired rows. 191 for (const tr of rows)
192 * @param {HTMLTableRowElement} tr 192 {
193 * @returns {Comment} 193 tr.hidden = (state ? tr.dataset.state !== state : false) ||
194 */ 194 (type ? tr.dataset.type !== type : false);
195 function getPlaceholder(tr) 195
196 { 196 if (!tr.hidden)
197 let placeholder = tr.placeholder; 197 tr.classList.toggle("odd", !!(i++ % 2));
198 if (!placeholder)
199 {
200 placeholder = document.createComment("placeholder");
201 tr.placeholder = placeholder;
202 placeholder.placeholder = tr;
203 }
204 return placeholder;
205 }
206
207 /**
208 * Put back all hidden table rows and eventually
209 * filters those that do not match the state or type.
210 * @param {HTMLTableSectionElement} tbody
211 * @param {DOMStringMap} dataset
212 */
213 function updateRows(tbody, dataset)
214 {
215 const {filterState, filterType} = dataset;
216
217 // create a list of possible CSS filter
218 // excluding #background-items from the list of rows to consider
219 const query = [];
220 if (filterState)
221 {
222 query.push(`tr:not(#background-items):not([data-state="${filterState}"])`);
223 }
224 if (filterType)
225 {
226 query.push(`tr:not(#background-items):not([data-type="${filterType}"])`);
227 }
228
229 // use filters to match nodes or retrieve them later on
230 const selector = query.join(",");
231 for (const node of tbody.childNodes)
232 {
233 // comments linked to table rows
234 // that won't match selector will be used
235 // to place their linked row back in the tbody
236 if (
237 node.nodeType === Node.COMMENT_NODE &&
238 (!selector || !node.placeholder.matches(selector))
239 )
240 {
241 tbody.replaceChild(node.placeholder, node);
242 }
243 }
244
245 // if there is a list of nodes to filter
246 if (selector)
247 {
248 // per each of them put a placeholder inside the tbody
249 for (const tr of tbody.querySelectorAll(selector))
250 {
251 tbody.replaceChild(getPlaceholder(tr), tr);
252 }
253 } 198 }
254 } 199 }
255 200
256 document.addEventListener("DOMContentLoaded", () => 201 document.addEventListener("DOMContentLoaded", () =>
257 { 202 {
258 let container = document.getElementById("items"); 203 const container = document.getElementById("items");
259 let table = container.querySelector("tbody"); 204 const foregroundTable = container.querySelector("table.foreground tbody");
260 let bgItems = container.querySelector("#background-items"); 205 const backgroundTable = container.querySelector("table.background tbody");
261 let template = document.querySelector("template").content.firstElementChild; 206 const template = document.querySelector("template")
207 .content.firstElementChild;
208
209 // We update rows by message index.
210 // Since we don't have a linear collection of rows anymore,
211 // all records, as row, will be indexed in here.
212 // Memory wise, this is just a collection that points
213 // at live DOM nodes (rows), so this does not imply
214 // higher memory consumption, leaks, or any other concern.
262 const records = []; 215 const records = [];
216
217 const filterState = document.getElementById("filter-state");
218 const filterType = document.getElementById("filter-type");
219
220 const updateRowsState = () =>
221 {
222 const state = filterState.value;
223 const type = filterType.value;
224 createZebra(foregroundTable.querySelectorAll("tr"), state, type);
225 const notFirstTR = "tr:not(:first-child)";
226 createZebra(backgroundTable.querySelectorAll(notFirstTR), state, type);
227 };
263 228
264 document.getElementById("reload").addEventListener("click", () => 229 document.getElementById("reload").addEventListener("click", () =>
265 { 230 {
266 ext.devtools.inspectedWindow.reload(); 231 ext.devtools.inspectedWindow.reload();
267 }, false); 232 }, false);
268 233
269 document.getElementById("filter-state").addEventListener("change", (event) => 234 // update rows visibility state per each change
270 { 235 filterState.addEventListener("change", updateRowsState, false);
271 container.dataset.filterState = event.target.value; 236 filterType.addEventListener("change", updateRowsState, false);
272 updateRows(table, container.dataset);
273 }, false);
274
275 document.getElementById("filter-type").addEventListener("change", (event) =>
276 {
277 container.dataset.filterType = event.target.value;
278 updateRows(table, container.dataset);
279 }, false);
280 237
281 ext.onMessage.addListener((message) => 238 ext.onMessage.addListener((message) =>
282 { 239 {
283 switch (message.type) 240 switch (message.type)
284 { 241 {
285 case "add-record": 242 case "add-record":
286 let record = createRecord(message.request, message.filter, template); 243 const record = createRecord(message.request, message.filter, template);
287 records.push(record); 244 records.push(record);
245 // waiting for 6402 to ship
288 if (message.request.docDomain == null) 246 if (message.request.docDomain == null)
289 { 247 backgroundTable.appendChild(record);
290 table.appendChild(record);
291 }
292 else 248 else
293 { 249 foregroundTable.appendChild(record);
294 table.insertBefore(record, bgItems);
295 }
296 break; 250 break;
297 251
298 case "update-record": 252 case "update-record":
299 let oldRow = records[message.index]; 253 let oldRow = records[message.index];
300 let newRow = createRecord(message.request, message.filter, template); 254 let newRow = createRecord(message.request, message.filter, template);
301 records[message.index] = newRow; 255 records[message.index] = newRow;
302 let liveRow = oldRow.parentNode ? oldRow : oldRow.placeholder; 256 oldRow.parentNode.replaceChild(newRow, oldRow);
303 liveRow.parentNode.replaceChild(newRow, liveRow);
304 newRow.classList.add("changed"); 257 newRow.classList.add("changed");
305 container.classList.add("has-changes"); 258 container.classList.add("has-changes");
306 break; 259 break;
307 260
308 case "remove-record": 261 case "remove-record":
309 let row = records.splice(message.index, 1)[0]; 262 let row = records.splice(message.index, 1)[0];
310 let live = row.parentNode ? row : row.placeholder; 263 row.parentNode.removeChild(row);
311 live.parentNode.removeChild(live);
312 container.classList.add("has-changes"); 264 container.classList.add("has-changes");
313 break; 265 break;
314 266
315 case "reset": 267 case "reset":
316 records.splice(0); 268 records.splice(0);
317 table.innerHTML = ""; 269 foregroundTable.innerHTML = "";
318 container.classList.remove("has-changes"); 270 container.classList.remove("has-changes");
319 break; 271 break;
320 } 272 }
273 updateRowsState();
321 }); 274 });
322 275
323 window.addEventListener("message", (event) => 276 window.addEventListener("message", (event) =>
324 { 277 {
325 switch (event.data.type) 278 switch (event.data.type)
326 { 279 {
327 case "performSearch": 280 case "performSearch":
328 performSearch(table, event.data.queryString); 281 performSearch(records, event.data.queryString);
329 lastFilterQuery = event.data.queryString; 282 lastFilterQuery = event.data.queryString;
330 break; 283 break;
331 case "cancelSearch": 284 case "cancelSearch":
332 cancelSearch(table); 285 cancelSearch(records);
333 lastFilterQuery = null; 286 lastFilterQuery = null;
334 break; 287 break;
335 } 288 }
336 }); 289 });
337 290
338 // Since Chrome 54 the themeName is accessible, for earlier versions we must 291 // Since Chrome 54 the themeName is accessible, for earlier versions we must
339 // assume the default theme is being used. 292 // assume the default theme is being used.
340 // https://bugs.chromium.org/p/chromium/issues/detail?id=608869 293 // https://bugs.chromium.org/p/chromium/issues/detail?id=608869
341 let theme = browser.devtools.panels.themeName || "default"; 294 let theme = browser.devtools.panels.themeName || "default";
342 document.body.classList.add(theme); 295 document.body.classList.add(theme);
343 }, false); 296 }, false);
LEFTRIGHT

Powered by Google App Engine
This is Rietveld