xiMatrix

commit

39093383bf5a016a1c5d1903f4edbcee29ee10b0

parent

e53547dfce3d5b7294514e039e58b39efb0dac18

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2022-07-30 18:57

refactor popup.js

Diffstat

1 files changed, 80 insertions, 82 deletions

diff --git a/popup.js b/popup.js

@@ -1,12 +1,16 @@
    1     1 /* global browser shared */
    2     2 
   -1     3 var context;
   -1     4 var requests;
   -1     5 var rules;
   -1     6 
    3     7 var table = document.querySelector('table');
    4     8 
    5     9 var sendMessage = function(type, data) {
    6    10     return browser.runtime.sendMessage({type: type, data: data});
    7    11 };
    8    12 
    9    -1 var getHostnames = function(data) {
   -1    13 var getHostnames = function() {
   10    14     var hostnames = [];
   11    15 
   12    16     var addSubdomains = function(h) {
@@ -21,10 +25,10 @@ var getHostnames = function(data) {
   21    25         }
   22    26     };
   23    27 
   24    -1     for (const hostname in (data.rules[data.context] || {})) {
   -1    28     for (const hostname in rules[context]) {
   25    29         addSubdomains(hostname);
   26    30     }
   27    -1     for (const hostname in data.requests) {
   -1    31     for (const hostname in requests) {
   28    32         addSubdomains(hostname);
   29    33     }
   30    34 
@@ -33,102 +37,96 @@ var getHostnames = function(data) {
   33    37         .sort()
   34    38         .map(h => h.reverse().join('.'));
   35    39 
   36    -1     addSubdomains(data.context);
   -1    40     addSubdomains(context);
   37    41 
   38    42     return hostnames.filter((value, i) => hostnames.indexOf(value) === i);
   39    43 };
   40    44 
   41    -1 sendMessage('get').then(data => {
   42    -1     var updateInherit = function(type) {
   43    -1         var selector = 'input';
   44    -1         if (type !== '*') {
   45    -1             selector += `[data-type="${type}"]`;
   46    -1         }
   47    -1         table.querySelectorAll(selector).forEach(input => {
   48    -1             input.classList.toggle('inherit-allow', shared.shouldAllow(
   49    -1                 data.rules,
   50    -1                 data.context,
   51    -1                 input.dataset.hostname,
   52    -1                 input.dataset.type,
   53    -1             ));
   54    -1         });
   55    -1     };
   -1    45 var updateInherit = function(type) {
   -1    46     var selector = 'input';
   -1    47     if (type !== '*') {
   -1    48         selector += `[data-type="${type}"]`;
   -1    49     }
   -1    50     table.querySelectorAll(selector).forEach(input => {
   -1    51         input.classList.toggle('inherit-allow', shared.shouldAllow(
   -1    52             rules,
   -1    53             context,
   -1    54             input.dataset.hostname,
   -1    55             input.dataset.type,
   -1    56         ));
   -1    57     });
   -1    58 };
   56    59 
   57    -1     var createCheckbox = function(hostname, type, rule) {
   58    -1         var input = document.createElement('input');
   59    -1         input.type = 'checkbox';
   60    -1         input.dataset.hostname = hostname;
   61    -1         input.dataset.type = type;
   62    -1         input.checked = rule;
   63    -1         input.onchange = () => {
   64    -1             sendMessage('setRule', [
   65    -1                 hostname, type, input.checked
   66    -1             ]).then(rules => {
   67    -1                 data.rules = rules;
   68    -1                 updateInherit(type);
   69    -1             });
   70    -1         };
   71    -1         return input;
   -1    60 var createCheckbox = function(hostname, type) {
   -1    61     var input = document.createElement('input');
   -1    62     input.type = 'checkbox';
   -1    63     input.dataset.hostname = hostname;
   -1    64     input.dataset.type = type;
   -1    65 
   -1    66     var c = (hostname === 'first-party') ? '*' : context;
   -1    67     input.checked = (rules[c][hostname] || {})[type];
   -1    68 
   -1    69     input.onchange = () => {
   -1    70         sendMessage(
   -1    71             'setRule',
   -1    72             [hostname, type, input.checked],
   -1    73         ).then(newRules => {
   -1    74             rules = newRules;
   -1    75             updateInherit(type);
   -1    76         });
   72    77     };
   73    78 
   74    -1     var createHeader = function(rules) {
   75    -1         let tr = document.createElement('tr');
   76    -1 
   77    -1         tr.append(document.createElement('th'));
   78    -1 
   79    -1         for (const type of shared.TYPES) {
   80    -1             let rule = rules['*'] ? rules['*'][type] : null;
   81    -1 
   82    -1             let th = document.createElement('th');
   83    -1             th.append(createCheckbox('*', type, rule));
   84    -1             tr.append(th);
   85    -1 
   86    -1             let span = document.createElement('span');
   87    -1             span.textContent = type;
   88    -1             th.append(span);
   89    -1         }
   90    -1 
   91    -1         return tr;
   92    -1     };
   -1    79     return input;
   -1    80 };
   93    81 
   94    -1     var createRow = function(hostname, rules) {
   95    -1         let tr = document.createElement('tr');
   -1    82 var createCell = function(tag, hostname, type, text) {
   -1    83     const cell = document.createElement(tag);
   -1    84     cell.append(createCheckbox(hostname, type));
   96    85 
   97    -1         let th = document.createElement('th');
   98    -1         let rule = rules[hostname] ? rules[hostname]['*'] : null;
   99    -1         th.append(createCheckbox(hostname, '*', rule));
  100    -1         tr.append(th);
   -1    86     const span = document.createElement('span');
   -1    87     span.textContent = text;
   -1    88     cell.append(span);
  101    89 
  102    -1         let span = document.createElement('span');
  103    -1         span.textContent = hostname;
  104    -1         th.append(span);
   -1    90     return cell;
   -1    91 };
  105    92 
  106    -1         for (const type of shared.TYPES) {
  107    -1             let count = data.requests[hostname] ? data.requests[hostname][type] : null;
  108    -1             let rule = rules[hostname] ? rules[hostname][type] : null;
   -1    93 var createHeader = function() {
   -1    94     var tr = document.createElement('tr');
   -1    95     tr.append(document.createElement('th'));
   -1    96     for (const type of shared.TYPES) {
   -1    97         tr.append(createCell('th', '*', type, type));
   -1    98     }
   -1    99     return tr;
   -1   100 };
  109   101 
  110    -1             let td = document.createElement('td');
  111    -1             if (hostname !== 'inline' || ['css', 'script', 'media'].includes(type)) {
  112    -1                 td.append(createCheckbox(hostname, type, rule));
  113    -1             } else {
  114    -1                 td.className = 'disabled';
  115    -1             }
   -1   102 var createRow = function(hostname) {
   -1   103     var tr = document.createElement('tr');
   -1   104     tr.append(createCell('th', hostname, '*', hostname));
   -1   105     for (const type of shared.TYPES) {
   -1   106         const count = (requests[hostname] || {})[type];
   -1   107 
   -1   108         if (hostname !== 'inline' || ['css', 'script', 'media'].includes(type)) {
   -1   109             tr.append(createCell('td', hostname, type, count));
   -1   110         } else {
   -1   111             const td = document.createElement('td');
   -1   112             td.className = 'disabled';
  116   113             tr.append(td);
  117    -1 
  118    -1             let span = document.createElement('span');
  119    -1             span.textContent = count;
  120    -1             td.append(span);
  121   114         }
   -1   115     }
   -1   116     return tr;
   -1   117 };
  122   118 
  123    -1         return tr;
  124    -1     };
   -1   119 sendMessage('get').then(data => {
   -1   120     context = data.context;
   -1   121     requests = data.requests;
   -1   122     rules = data.rules;
  125   123 
  126    -1     table.append(createHeader(data.rules[data.context]));
  127    -1     table.append(createRow('inline', data.rules[data.context]));
  128    -1     table.append(createRow('first-party', data.rules['*']));
   -1   124     table.append(createHeader());
   -1   125     table.append(createRow('inline'));
   -1   126     table.append(createRow('first-party'));
  129   127 
  130    -1     for (const hostname of getHostnames(data)) {
  131    -1         table.append(createRow(hostname, data.rules[data.context]));
   -1   128     for (const hostname of getHostnames()) {
   -1   129         table.append(createRow(hostname));
  132   130     }
  133   131 
  134   132     updateInherit('*');