refactor (#1481)

pages/popup/popup.css

@@ -286,7 +286,6 @@ footer {
 .counter {
     font-size: 26px;
     font-weight: 600;
-    margin-top: 4px;
     text-align: center;
 }
 
@@ -334,6 +333,10 @@ footer {
     width: 100%;
 }
 
+.counter-blocked-missing > table {
+    border-spacing: 0;
+}
+
 
 
 /**

pages/popup/popup.html

@@ -68,6 +68,21 @@
                         <span data-i18n-content="blockGoogleFontsTitle">Block Google Fonts</span>
                     </div>
                 </div>
+                <div id="website-context-replaced"></div>
+                <div id="counter-blocked-missing" class="counter-blocked-missing" hidden>
+                    <table>
+                        <tbody>
+                            <tr>
+                                <td data-i18n-context="counterBlocked">Blocked:</td>
+                                <td id="counter-blocked-number"></td>
+                            </tr>
+                            <tr>
+                                <td data-i18n-context="counterMissing">Missing:</td>
+                                <td id="counter-missing-number"</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
             </div>
             <div id="extension-context" class="panel">
                 <div id="injection-counter" class="counter">0</div>

pages/popup/popup.js

@@ -101,7 +101,31 @@ popup._renderContextualContents = function () {
                 popup._missingCounter > 0;
 
     if (isVisible) {
-        popup._renderInjectionPanel(popup._resourceInjections);
+        let websiteContextElement, injectionOverviewElement;
+
+        websiteContextElement = document.getElementById('website-context-replaced');
+
+        injectionOverviewElement = document.createElement('ul');
+        injectionOverviewElement.setAttribute('class', 'list');
+
+        for (let source in popup._resourceInjections) {
+            let injectionGroupHeaderElement, injectionGroupElement, cdn;
+
+            cdn = popup._resourceInjections[source];
+
+            injectionGroupHeaderElement = popup._createInjectionGroupHeaderElement(source, cdn);
+            injectionGroupElement = popup._createInjectionGroupElement(source, cdn);
+
+            injectionOverviewElement.appendChild(injectionGroupHeaderElement);
+            injectionOverviewElement.appendChild(injectionGroupElement);
+        }
+
+        injectionOverviewElement.setAttribute('class', 'panel-overflow');
+
+        websiteContextElement.append(injectionOverviewElement);
+        popup._renderBlockedAndMissingElementHeader(popup._blockedCounter, 'blocked');
+        popup._renderBlockedAndMissingElementHeader(popup._missingCounter, 'missing');
+        document.getElementById('counter-blocked-missing').style.display = 'block';
     }
 };
 
@@ -165,18 +189,6 @@ popup._renderDomainAllowlistPanel = function () {
     websiteContextElement.style.display = 'block';
 };
 
-popup._renderInjectionPanel = function (groupedInjections) {
-    let websiteContextElement, injectionOverviewElement;
-
-    websiteContextElement = document.getElementById('website-context');
-    injectionOverviewElement = popup._createInjectionOverviewElement(groupedInjections);
-    injectionOverviewElement.setAttribute('class', 'panel-overflow');
-
-    websiteContextElement.append(injectionOverviewElement);
-    websiteContextElement.append(popup._renderBlockedAndMissingElementHeader(popup._blockedCounter, 'Blocked'));
-    websiteContextElement.append(popup._renderBlockedAndMissingElementHeader(popup._missingCounter, 'Missing'));
-};
-
 popup._enableProtection = function () {
     let message = {
         'topic': 'allowlist:remove-domain',
@@ -349,25 +361,6 @@ popup._groupResourceInjections = function (injections) {
     return groupedInjections;
 };
 
-popup._createInjectionOverviewElement = function (groupedInjections) {
-    let injectionOverviewElement = document.createElement('ul');
-    injectionOverviewElement.setAttribute('class', 'list');
-
-    for (let source in groupedInjections) {
-        let injectionGroupHeaderElement, injectionGroupElement, cdn;
-
-        cdn = groupedInjections[source];
-
-        injectionGroupHeaderElement = popup._createInjectionGroupHeaderElement(source, cdn);
-        injectionGroupElement = popup._createInjectionGroupElement(source, cdn);
-
-        injectionOverviewElement.appendChild(injectionGroupHeaderElement);
-        injectionOverviewElement.appendChild(injectionGroupElement);
-    }
-
-    return injectionOverviewElement;
-};
-
 popup._createInjectionGroupHeaderElement = function (source, cdn) {
     let injectionGroupHeaderElement, badgeElement, badgeTextNode, cdnNameTextNode;
 
@@ -492,22 +485,10 @@ popup._renderLocaleNotice = function () {
 };
 
 popup._renderBlockedAndMissingElementHeader = function (counter, type) {
-    let parent, typeElem, counterElem, typeElemTextNode, counterElemTextNode;
+    let counterElement;
 
-    parent = document.createElement('div');
+    counterElement = document.getElementById(`counter-${type}-number`);
-
+    counterElement.textContent = counter;
-    typeElemTextNode = document.createTextNode(`${type}: `);
-    typeElem = document.createElement('span');
-    typeElem.appendChild(typeElemTextNode);
-
-    counterElemTextNode = document.createTextNode(counter);
-    counterElem = document.createElement('span');
-    counterElem.appendChild(counterElemTextNode);
-
-    parent.appendChild(typeElem);
-    parent.appendChild(counterElem);
-
-    return parent;
 };
 
 

pages/updates/updates.html

@@ -48,7 +48,7 @@
                         </ul>
                         <p>Improved</p>
                         <ul>
-                            <li>Handling and logging of blocked resources (<a href="https://codeberg.org/nobody/LocalCDN/issues/1481">#1481</a>)</li>
+                            <li>Handling and logging of blocked and missing resources (<a href="https://codeberg.org/nobody/LocalCDN/issues/1481">#1481</a>)</li>
                         </ul>
                     </div>
                     <div id="generator-section">