Popup improved

This commit is contained in:
nobody 2021-02-07 08:05:06 +01:00
parent 3d9c269754
commit 849ab3ec95
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
7 changed files with 273 additions and 8 deletions

View File

@ -212,7 +212,11 @@ const Links = {
'DONATE': chrome.extension.getURL('pages/donate/donate.html'),
'CHANGELOG': chrome.extension.getURL('pages/updates/updates.html'),
'FAQ': chrome.extension.getURL('pages/help/help.html'),
'STATISTICS': chrome.extension.getURL('pages/statistics/statistics.html')
'FAQ_HTML_FILTER': chrome.extension.getURL('pages/help/help.html#html-filter'),
'STATISTICS': chrome.extension.getURL('pages/statistics/statistics.html'),
'LOCALCDN_TEST': 'https://www.localcdn.org/test',
'LOCALCDN_TEST_WEBSITE': 'https://www.localcdn.org/test/check?domain=',
'WEBLATE': 'https://hosted.weblate.org/projects/localcdn/',
};
const CDNs = {

View File

@ -22,4 +22,8 @@ CC0
restore.svg
https://www.svgrepo.com/svg/53536/return
CC0
CC0
help-dark.svg, help-light.svg (edited)
https://www.svgrepo.com/svg/240068/help-question
CC0

114
icons/help-dark.svg Normal file
View File

@ -0,0 +1,114 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="400px"
height="400px"
viewBox="0 0 400 400"
style="enable-background:new 0 0 400 400;"
xml:space="preserve"
sodipodi:docname="help.svg"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"><metadata
id="metadata47"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs45" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1680"
inkscape:window-height="997"
id="namedview43"
showgrid="false"
inkscape:zoom="0.59"
inkscape:cx="-41.525424"
inkscape:cy="200"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1"
inkscape:current-layer="Capa_1" />
<g
id="g10"
style="fill:#777777;fill-opacity:1">
<g
id="g8"
style="fill:#777777;fill-opacity:1">
<path
d="M 199.996,0 C 89.719,0 0,89.72 0,200 0,310.279 89.719,400 199.996,400 310.281,400 400,310.279 400,200 400,89.72 310.281,0 199.996,0 Z m 0,373.77 C 104.187,373.77 26.23,295.816 26.23,200 c 0,-95.817 77.957,-173.769 173.766,-173.769 95.816,0 173.772,77.953 173.772,173.769 0.001,95.816 -77.956,173.77 -173.772,173.77 z"
id="path2"
inkscape:connector-curvature="0"
style="fill:#777777;fill-opacity:1" />
<path
d="m 199.996,91.382 c -35.176,0 -63.789,28.616 -63.789,63.793 0,7.243 5.871,13.115 13.113,13.115 7.246,0 13.117,-5.873 13.117,-13.115 0,-20.71 16.848,-37.562 37.559,-37.562 20.719,0 37.566,16.852 37.566,37.562 0,20.714 -16.849,37.566 -37.566,37.566 -7.242,0 -13.113,5.873 -13.113,13.114 v 45.684 c 0,7.243 5.871,13.115 13.113,13.115 7.242,0 13.117,-5.872 13.117,-13.115 v -33.938 c 28.905,-6.064 50.68,-31.746 50.68,-62.427 0,-35.176 -28.617,-63.792 -63.797,-63.792 z"
id="path4"
inkscape:connector-curvature="0"
style="fill:#777777;fill-opacity:1" />
<path
d="m 200.004,273.738 c -9.086,0 -16.465,7.371 -16.465,16.462 0,9.091 7.379,16.465 16.465,16.465 9.094,0 16.457,-7.374 16.457,-16.465 0,-9.091 -7.363,-16.462 -16.457,-16.462 z"
id="path6"
inkscape:connector-curvature="0"
style="fill:#777777;fill-opacity:1" />
</g>
</g>
<g
id="g12">
</g>
<g
id="g14">
</g>
<g
id="g16">
</g>
<g
id="g18">
</g>
<g
id="g20">
</g>
<g
id="g22">
</g>
<g
id="g24">
</g>
<g
id="g26">
</g>
<g
id="g28">
</g>
<g
id="g30">
</g>
<g
id="g32">
</g>
<g
id="g34">
</g>
<g
id="g36">
</g>
<g
id="g38">
</g>
<g
id="g40">
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

114
icons/help-light.svg Normal file
View File

@ -0,0 +1,114 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="400px"
height="400px"
viewBox="0 0 400 400"
style="enable-background:new 0 0 400 400;"
xml:space="preserve"
sodipodi:docname="help.svg"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"><metadata
id="metadata47"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs45" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1680"
inkscape:window-height="997"
id="namedview43"
showgrid="false"
inkscape:zoom="0.59"
inkscape:cx="-41.525424"
inkscape:cy="200"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1"
inkscape:current-layer="Capa_1" />
<g
id="g10"
style="fill:#f2f2f2;fill-opacity:1">
<g
id="g8"
style="fill:#f2f2f2;fill-opacity:1">
<path
d="M 199.996,0 C 89.719,0 0,89.72 0,200 0,310.279 89.719,400 199.996,400 310.281,400 400,310.279 400,200 400,89.72 310.281,0 199.996,0 Z m 0,373.77 C 104.187,373.77 26.23,295.816 26.23,200 c 0,-95.817 77.957,-173.769 173.766,-173.769 95.816,0 173.772,77.953 173.772,173.769 0.001,95.816 -77.956,173.77 -173.772,173.77 z"
id="path2"
inkscape:connector-curvature="0"
style="fill:#f2f2f2;fill-opacity:1" />
<path
d="m 199.996,91.382 c -35.176,0 -63.789,28.616 -63.789,63.793 0,7.243 5.871,13.115 13.113,13.115 7.246,0 13.117,-5.873 13.117,-13.115 0,-20.71 16.848,-37.562 37.559,-37.562 20.719,0 37.566,16.852 37.566,37.562 0,20.714 -16.849,37.566 -37.566,37.566 -7.242,0 -13.113,5.873 -13.113,13.114 v 45.684 c 0,7.243 5.871,13.115 13.113,13.115 7.242,0 13.117,-5.872 13.117,-13.115 v -33.938 c 28.905,-6.064 50.68,-31.746 50.68,-62.427 0,-35.176 -28.617,-63.792 -63.797,-63.792 z"
id="path4"
inkscape:connector-curvature="0"
style="fill:#f2f2f2;fill-opacity:1" />
<path
d="m 200.004,273.738 c -9.086,0 -16.465,7.371 -16.465,16.462 0,9.091 7.379,16.465 16.465,16.465 9.094,0 16.457,-7.374 16.457,-16.465 0,-9.091 -7.363,-16.462 -16.457,-16.462 z"
id="path6"
inkscape:connector-curvature="0"
style="fill:#f2f2f2;fill-opacity:1" />
</g>
</g>
<g
id="g12">
</g>
<g
id="g14">
</g>
<g
id="g16">
</g>
<g
id="g18">
</g>
<g
id="g20">
</g>
<g
id="g22">
</g>
<g
id="g24">
</g>
<g
id="g26">
</g>
<g
id="g28">
</g>
<g
id="g30">
</g>
<g
id="g32">
</g>
<g
id="g34">
</g>
<g
id="g36">
</g>
<g
id="g38">
</g>
<g
id="g40">
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -22,6 +22,20 @@ header {
justify-content: space-between;
}
#manipulateDOM-indicator {
background: url('../../icons/help-dark.svg') no-repeat right center;
color: #555;
background-size: 15px 15px;
padding-right: 20px;
text-decoration: underline;
}
#manipulateDOM-indicator:hover {
color: #777;
text-decoration: none;
cursor: pointer;
}
.panel {
overflow: hidden;
}
@ -60,6 +74,11 @@ footer {
flex-grow: 1;
}
#testing-utility-link {
display: none;
float: left;
}
/**
* Fonts
*/
@ -413,6 +432,15 @@ input:checked + .slider:hover {
border-bottom-color: #292929;
}
#manipulateDOM-indicator {
background: url('../../icons/help-light.svg') no-repeat right center;
background-size: 15px 15px;
padding-right: 20px;
text-decoration: underline;
color: #f2f2f2;
font-weight: bold;
}
/**
* Lists
*/

View File

@ -55,7 +55,7 @@
</section>
<footer>
<div id="testing-utility">
<a id="testing-utility-link" class="link-text">localcdn.org/test</a>
<a id="testing-utility-link" class="link-text">Website broken?</a>
</div>
<div id="statistics-button" class="button" data-i18n-title="headerStatistics">
<div id="statistics-button-svg" class="button-svg"></div>

View File

@ -77,6 +77,7 @@ popup._renderNonContextualContents = function () {
popup._renderContextualContents = function () {
if (popup._domain !== null) {
popup._renderDomainAllowlistPanel();
document.getElementById('testing-utility-link').style.display = 'block';
}
if (Object.keys(popup._resourceInjections).length > 0) {
@ -435,7 +436,7 @@ popup._onDocumentLoaded = function () {
popup._onTestingUtilityLinkClicked = function (event) {
if (event.button === 0 || event.button === 1) {
chrome.tabs.create({
url: 'https://www.localcdn.org/test',
url: Links.LOCALCDN_TEST_WEBSITE + popup._targetTab.url,
active: event.button === 0,
});
}
@ -453,7 +454,7 @@ popup._onOptionsButtonClicked = function () {
popup._onDonationButtonClicked = function () {
if (event.button === 0 || event.button === 1) {
chrome.tabs.create({
url: chrome.extension.getURL('pages/donate/donate.html'),
url: Links.DONATE,
active: event.button === 0,
});
}
@ -487,7 +488,7 @@ popup._close = function () {
popup._onInfoButtonClicked = function () {
if (event.button === 0 || event.button === 1) {
chrome.tabs.create({
url: chrome.extension.getURL('pages/help/help.html#html-filter'),
url: Links.FAQ_HTML_FILTER,
active: event.button === 0,
});
}
@ -500,7 +501,7 @@ popup._onInfoButtonClicked = function () {
popup._onIncompleteTranslation = function () {
if (event.button === 0 || event.button === 1) {
chrome.tabs.create({
url: 'https://hosted.weblate.org/projects/localcdn/',
url: Links.Weblate,
active: event.button === 0,
});
}
@ -513,7 +514,7 @@ popup._onIncompleteTranslation = function () {
popup._onStatisticsButtonClicked = function () {
if (event.button === 0 || event.button === 1) {
chrome.tabs.create({
url: chrome.extension.getURL('pages/statistics/statistics.html'),
url: Links.STATISTICS,
active: event.button === 0,
});
}