Statistics page implemented
This commit is contained in:
nobody
parent
6ca95e1b20
commit
01d5d747e5
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<title>LocalCDN | Statistics</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="statistics.css">
|
||||||
|
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
|
||||||
|
<link rel="icon" href="../images/favicon.ico" type="image/x-icon">
|
||||||
|
<script defer src="../../modules/internal/icons.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<script src="../../core/constants.js"></script>
|
||||||
|
<script src="../../modules/internal/helpers.js"></script>
|
||||||
|
|
||||||
|
<script src="statistics.js"></script>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
|
||||||
|
<img class="icon-logo" src="../../icons/icon.svg" alt="Extension Icon">
|
||||||
|
<div class="heading">LocalCDN <sup id="version-label" class="label-version"></sup></div>
|
||||||
|
|
||||||
|
<div id="donate-button">
|
||||||
|
<div id="donate-button-svg"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="content">
|
||||||
|
|
||||||
|
<div id="website-context" class="panel hidden"></div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer></footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -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);
|
||||||
Loading…
Reference in New Issue