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