Improved button for "show more injections"

pages/popup/popup.css

@@ -29,11 +29,12 @@ header {
 }
 
 .panel:not(:last-child) {
-    border-bottom: 1px solid #d8d8d8;
+    padding: 10px 8px 0px 8px;
 }
 
 .subpanel {
     overflow: hidden;
+    padding-bottom: 10px;
 }
 
 footer {
@@ -41,6 +42,16 @@ footer {
     padding: 8px;
 }
 
+#more-injections-section {
+    padding: 10px 8px;
+    font-weight: bold;
+    border-bottom: 1px solid #d8d8d8;
+}
+
+/* #more-injections-section > p {
+    padding: 0px;
+} */
+
 /**
  * Fonts
  */
@@ -117,6 +128,7 @@ footer {
 
 .sublist:last-child {
     border-bottom: 1px solid #e0e0e0;
+    margin-bottom: 0px;
 }
 
 .sublist-item {
@@ -130,11 +142,13 @@ footer {
     border-bottom: none;
 }
 
-#get-stats-btn {
+#get-more-injections-btn {
     cursor: pointer;
+    background-color: #f0f0f0;
+    color: #737373;
 }
 
-#get-stats-btn:hover {
+#get-more-injections-btn:hover {
     color: #a3a3a3;
     text-decoration: underline;
 }

pages/popup/popup.html

@@ -67,6 +67,8 @@
 
             </div>
 
+            <div id="more-injections-section"></div>
+
             <div id="extension-context" class="panel">
 
                 <div id="injection-counter" class="counter">0</div>

pages/popup/popup.js

@@ -18,6 +18,7 @@
  * Popup
  */
 
+let counterFrameworks = 0;
 var popup = {};
 
 /**
@@ -284,13 +285,14 @@ popup._createInjectionOverviewElement = function (groupedInjections) {
         let injectionGroupHeaderElement, injectionGroupElement, cdn;
 
         cdn = groupedInjections[source];
-
+        if (counterFrameworks < 3) {
             injectionGroupHeaderElement = popup._createInjectionGroupHeaderElement(source, cdn);
             injectionGroupElement = popup._createInjectionGroupElement(source, cdn);
 
             injectionOverviewElement.appendChild(injectionGroupHeaderElement);
             injectionOverviewElement.appendChild(injectionGroupElement);
         }
+    }
 
     return injectionOverviewElement;
 };
@@ -330,49 +332,51 @@ popup._createInjectionGroupElement = function (source, cdn) {
     injectionGroupElement = document.createElement('ul');
     injectionGroupElement.setAttribute('class', 'sublist');
 
-    count = 0;
     oversized = false;
     for (let injection of filtered) {
 
-        if(count < 3){
+        if(counterFrameworks < 3){
             let injectionElement = popup._createInjectionElement(injection);
             injectionGroupElement.appendChild(injectionElement);
         } else {
             oversized = true;
         }
-        count++;
+        counterFrameworks++;
     }
     if (oversized) {
-        let injectionElement = popup._createInjectionElement(filtered, count-3, true);
-        injectionGroupElement.appendChild(injectionElement);
+        let injectionElement = popup._createInjectionElement(filtered, true);
+        let moreInjectionsSection = document.getElementById('more-injections-section');
+        moreInjectionsSection.appendChild(injectionElement);
     }
-    count = 0;
     return injectionGroupElement;
 };
 
-popup._createInjectionElement = function (injection, counter = 0, oversized = false) {
+popup._createInjectionElement = function (injection, oversized = false) {
 
     let injectionElement, filename, name, nameTextNode, noteElement, noteTextNode;
 
-    injectionElement = document.createElement('li');
-    injectionElement.setAttribute('class', 'sublist-item');
 
     if(oversized) {
+
+        let lastElement = document.createElement('p');
         let moreInjections = document.createElement('span');
 
-        nameTextNode = document.createTextNode(`... and ${counter} more`);
-        moreInjections.setAttribute('id', 'get-stats-btn');
+        nameTextNode = document.createTextNode(`... and more`);
+        moreInjections.setAttribute('id', 'get-more-injections-btn');
 
         moreInjections.addEventListener('mouseup', function() {
             popup._onMoreInjectionsButton();
         }, false);
 
         moreInjections.appendChild(nameTextNode);
-        injectionElement.appendChild(moreInjections);
+        lastElement.appendChild(moreInjections);
 
-        return injectionElement;
+        return lastElement;
     }
 
+    injectionElement = document.createElement('li');
+    injectionElement.setAttribute('class', 'sublist-item');
+
     filename = helpers.extractFilenameFromPath(injection.path);
 
     // If bundle empty, use filename
@@ -454,6 +458,7 @@ popup._onOptionsButtonClicked = function () {
 };
 
 popup._onDonationButtonClicked = function () {
+
     if (event.button === 0 || event.button === 1) {
 
         chrome.tabs.create({