diff --git a/pages/statistics/statistics.css b/pages/statistics/statistics.css new file mode 100644 index 00000000..34be8896 --- /dev/null +++ b/pages/statistics/statistics.css @@ -0,0 +1,314 @@ +/** + * Sections + */ + +body { + background-color: #f0f0f0; + color: #555; + cursor: default; + font-family: 'Noto Sans', Arial, sans-serif !important; + font-size: 75%; + margin: 0 auto; + overflow-y: auto; + overflow-x: hidden; + padding: 0px 15px 0px 15px; +} + +header { + align-items: center; + border-bottom: solid #d3d3d3 1px; + display: flex; + position: relative; + padding: 8px; +} + +.panel { + overflow: hidden; + padding: 10px 8px; +} + +.panel:not(:last-child) { + border-bottom: 1px solid #d8d8d8; +} + +.subpanel { + overflow: hidden; +} + +footer { + overflow: hidden; + padding: 8px; +} + +/** + * Fonts + */ + +@font-face { + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 400; + src: url('../../modules/noto-sans/noto-sans.woff2') + format('woff2'); +} + +@font-face { + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 600; + src: url('../../modules/noto-sans/noto-sans-bold.woff2') + format('woff2'); +} + +@font-face { + font-family: 'Noto Sans'; + font-style: italic; + font-weight: 400; + src: url('../../modules/noto-sans/noto-sans-italic.woff2') + format('woff2'); +} + +/** + * Headings + */ + +.heading { + font-size: 14px; + font-weight: 600; + padding-left: 0; + width: 100%; +} + +.subheading { + font-weight: 600; + margin-bottom: 2px; + text-align: center; +} + +/** + * Lists + */ + +.list { + margin: 0; + padding: 8px 0 0; + min-width: 300px; +} + +.list-item { + background-color: #f7f7f7; + border: 1px solid #e4e4e4; + color: #737373; + font-weight: 600; + list-style: none; + margin: 0; + padding: 10px; +} + +.sublist { + align-items: center; + background-color: #ececec; + border: 1px solid #e0e0e0; + box-shadow: inset 0 2px 10px #e2e2e2; + list-style: none; + padding-left: 8px; + padding: 0; + margin-top: 0px; +} + +.sublist:last-child { + border-bottom: 1px solid #e0e0e0; +} + +.sublist-item { + border-bottom: 1px solid #e0e0e0; + color: #737373; + font-weight: 600; + padding: 10px; +} + +.sublist-item:last-child { + border-bottom: none; +} + +.cdn-list { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +#get-stats-btn { + color: white; +} + +/** + * Icons + */ + +.icon { + margin-right: 6px; +} + +.icon-logo { + height: 26px; + padding: 14px 6px 14px 8px; + width: 26px; +} + +/** + * Buttons + */ + +#donate-button { + -moz-user-select: none; + user-select: none; + color: #5f5f5f; + cursor: pointer; + float: right; + font-size: 12px; + padding: 5px; +} + +#donate-button:hover { + transform: scale(1.3); +} + +#donate-button-svg { + background-size: cover; + width: 15px; + height: 15px; +} + +#donate-button-svg { + background-image: url("../../icons/donate.svg"); +} + +/** + * Miscellaneous + */ + +.badge { + background-color: #6bb798; + border-radius: 10px; + color: #fff; + font-family: monospace; + font-size: 13px; + font-weight: 600; + margin-right: 8px; + padding: 3px 15px; +} + +.counter { + font-size: 36px; + font-weight: 600; + margin-top: 4px; + text-align: center; +} + +.description { + color: #777; + font-style: italic; + margin: 0 6px; + text-align: center; +} + +.label-version { + color: #6aac91; + font-size: 9px; +} + +.label-domain { + color: #bbb; + display: flex; + font-style: italic; + overflow: hidden; + padding: 6px 0 0 4px; + white-space: nowrap; +} + +.side-note { + color: #a5a5a5; + font-style: italic; + font-weight: 400; +} + +/** + * Compatibility + */ + +@media (prefers-color-scheme: dark) { + + /** + * Sections + */ + + body { + background-color: #404040; + color: #f9f9fa; + } + + header { + border-bottom-color: #292929; + } + + /** + * Lists + */ + + .list-item { + background-color: #484848; + border-color: #292929; + color: #f0f0f0; + } + + .sublist { + background-color: #323232; + border-color: #292929; + box-shadow: inset 0 2px 10px #292929; + } + + .sublist:last-child { + border-bottom-color: #292929; + } + + .sublist-item { + border-bottom-color: #2c2c2c; + color: #f0f0f0; + } + + /** + * Links + */ + + .link-text { + color: #7d7d7d; + } + + .link-text:hover { + color: #dadada; + } + + /** + * Miscellaneous + */ + + .badge { + color: #2d5042; + } + + .description { + color: #dadada; + } + + .label-domain { + color: #717171; + } + + .panel:not(:last-child) { + border-bottom-color: #292929; + } + + .side-note { + color: #888; + } +} diff --git a/pages/statistics/statistics.html b/pages/statistics/statistics.html new file mode 100644 index 00000000..2e0ea569 --- /dev/null +++ b/pages/statistics/statistics.html @@ -0,0 +1,46 @@ + + + + + + + LocalCDN | Statistics + + + + + + + + + + + + + + + + + +
+ + +
LocalCDN
+ + + +
+ +
+ + + +
+ + + + + + diff --git a/pages/statistics/statistics.js b/pages/statistics/statistics.js new file mode 100644 index 00000000..67f95ca5 --- /dev/null +++ b/pages/statistics/statistics.js @@ -0,0 +1,187 @@ +/** + * Details of Requests + * Belongs to LocalCDN. + * + * @author nobody42 + * @since 2020-02-26 + * @license MPL 2.0 + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. + */ + +'use strict'; + +/** + * Overview + */ + +var statistics = {}; + +/** + * Private Methods + */ + +statistics._renderContents = function () { + + helpers.insertI18nContentIntoDocument(document); + helpers.insertI18nTitlesIntoDocument(document); + + statistics._renderNonContextualContents(); + statistics._renderContextualContents(); +}; + +statistics._renderNonContextualContents = function () { + + let donationButtonElement, versionLabelElement, version; + + version = chrome.runtime.getManifest().version; + + donationButtonElement = document.getElementById('donate-button'); + donationButtonElement.addEventListener('mouseup', statistics._onDonationButtonClicked); + + versionLabelElement = document.getElementById('version-label'); + versionLabelElement.innerText = helpers.formatVersion(version); +}; + +statistics._renderInjectionPanel = function (statisticData) { + + let websiteContextElement, injectionOverviewElement; + + websiteContextElement = document.getElementById('website-context'); + injectionOverviewElement = statistics._createInjectionOverviewElement(statisticData); + + websiteContextElement.append(injectionOverviewElement); +}; + +statistics._renderContextualContents = function () { + + if (Object.keys(statisticData).length > 0) { + statistics._renderInjectionPanel(statisticData); + } +}; + +statistics._createInjectionOverviewElement = function (statisticData) { + + let divOutline = document.createElement('div'); + divOutline.setAttribute('class', 'cdn-list'); + + for (let source in statisticData) { + + let injectionOverviewElement = document.createElement('div'); + injectionOverviewElement.setAttribute('class', 'list'); + + let injectionGroupHeaderElement, injectionGroupElement, cdn; + + cdn = statisticData[source]; + + injectionGroupHeaderElement = statistics._createInjectionGroupHeaderElement(source, cdn); + injectionGroupElement = statistics._createInjectionGroupElement(source, cdn); + + injectionOverviewElement.appendChild(injectionGroupHeaderElement); + injectionOverviewElement.appendChild(injectionGroupElement); + + divOutline.appendChild(injectionOverviewElement); + } + + return divOutline; +}; + +statistics._createInjectionGroupHeaderElement = function (source, cdn) { + + let injectionGroupHeaderElement, badgeElement, badgeTextNode, cdnNameTextNode; + + injectionGroupHeaderElement = document.createElement('li'); + injectionGroupHeaderElement.setAttribute('class', 'list-item'); + + badgeElement = document.createElement('span'); + badgeElement.setAttribute('class', 'badge'); + + badgeTextNode = document.createTextNode(cdn.length); + badgeElement.appendChild(badgeTextNode); + + cdnNameTextNode = document.createTextNode(helpers.determineCdnName(source)); + + injectionGroupHeaderElement.appendChild(badgeElement); + injectionGroupHeaderElement.appendChild(cdnNameTextNode); + + return injectionGroupHeaderElement; +}; + +statistics._createInjectionGroupElement = function (source, cdn) { + + let injectionGroupElement; + + injectionGroupElement = document.createElement('ul'); + injectionGroupElement.setAttribute('class', 'sublist'); + + for (let injection of cdn) { + + let injectionElement = statistics._createInjectionElement(injection); + injectionGroupElement.appendChild(injectionElement); + } + + return injectionGroupElement; +}; + +statistics._createInjectionElement = function (injection) { + + let injectionElement, filename, name, nameTextNode, noteElement, noteTextNode; + + injectionElement = document.createElement('li'); + injectionElement.setAttribute('class', 'sublist-item'); + filename = helpers.extractFilenameFromPath(injection.path); + + // If bundle empty, use filename + if (injection.bundle === ''){ + name = helpers.determineResourceName(filename); + } else { + name = injection.bundle + ' (Bundle)' + } + + nameTextNode = document.createTextNode(`- ${name}`); + injectionElement.appendChild(nameTextNode); + + if (injection.version !== null) { + noteElement = document.createElement('span'); + noteElement.setAttribute('class', 'side-note'); + let versionNode = (injection.version === 'beta') ? ` ${injection.version}` : ` v${injection.version}`; + noteTextNode = document.createTextNode(versionNode); + noteElement.appendChild(noteTextNode); + injectionElement.appendChild(noteElement); + } + + return injectionElement; +}; + + +/** + * Event Handlers + */ + +statistics._onDocumentLoaded = function () { + + chrome.storage.local.get([Setting.STATISTIC_DATA], function (items) { + statisticData = items.statisticData; + statistics._renderContents(); + }); + +}; + +statistics._onDonationButtonClicked = function () { + + chrome.tabs.update({ + 'url': chrome.extension.getURL('pages/donate/donate.html'), + 'active': (event.button === 0) + }); + +}; + + +/** + * Initializations + */ + +let statisticData; +document.addEventListener('DOMContentLoaded', statistics._onDocumentLoaded);