diff --git a/pages/popup/popup.css b/pages/popup/popup.css index aa6f0b19..014f97d5 100644 --- a/pages/popup/popup.css +++ b/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; } diff --git a/pages/popup/popup.html b/pages/popup/popup.html index ccdd2578..68917c03 100644 --- a/pages/popup/popup.html +++ b/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> diff --git a/pages/popup/popup.js b/pages/popup/popup.js index 1994eec0..7b1b4ecc 100644 --- a/pages/popup/popup.js +++ b/pages/popup/popup.js @@ -18,6 +18,7 @@ * Popup */ +let counterFrameworks = 0; var popup = {}; /** @@ -284,12 +285,13 @@ popup._createInjectionOverviewElement = function (groupedInjections) { let injectionGroupHeaderElement, injectionGroupElement, cdn; cdn = groupedInjections[source]; + if (counterFrameworks < 3) { + injectionGroupHeaderElement = popup._createInjectionGroupHeaderElement(source, cdn); + injectionGroupElement = popup._createInjectionGroupElement(source, cdn); - injectionGroupHeaderElement = popup._createInjectionGroupHeaderElement(source, cdn); - injectionGroupElement = popup._createInjectionGroupElement(source, cdn); - - injectionOverviewElement.appendChild(injectionGroupHeaderElement); - injectionOverviewElement.appendChild(injectionGroupElement); + 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({