From 2b57d75c08a7eadf569dca9705dc5f547d7859a4 Mon Sep 17 00:00:00 2001 From: idk Date: Tue, 19 Nov 2019 22:13:02 -0500 Subject: [PATCH] Make a smarter, prettier homepage --- Readme.md | 2 +- .../content/aboutI2p/aboutI2p-content.js | 6 + src/chrome/content/aboutI2p/aboutI2p.xhtml | 100 +++++-- src/chrome/content/i2pbutton.js | 13 +- src/chrome/locale/en-US/aboutI2p.dtd | 38 ++- src/chrome/skin/aboutI2p.css | 264 +++++++++++++++++- 6 files changed, 367 insertions(+), 56 deletions(-) diff --git a/Readme.md b/Readme.md index 7f1dbef..42f603f 100644 --- a/Readme.md +++ b/Readme.md @@ -56,5 +56,5 @@ To test local changes, you need to copy the pkg/i2pbutton-*.xpi over the i2pbutton@geti2p.net.xpi ``` -Desktop\I2P Browser Alpha\Browser\I2PBrowser\Data\Browser\%profile_directory%\extensions\ +Desktop\I2P Browser Beta\Browser\I2PBrowser\Data\Browser\%profile_directory%\extensions\ ``` \ No newline at end of file diff --git a/src/chrome/content/aboutI2p/aboutI2p-content.js b/src/chrome/content/aboutI2p/aboutI2p-content.js index 0f2476d..302f3e1 100644 --- a/src/chrome/content/aboutI2p/aboutI2p-content.js +++ b/src/chrome/content/aboutI2p/aboutI2p-content.js @@ -79,6 +79,12 @@ var AboutI2pListener = { body.removeAttribute("i2pconsoleon") } + if (aData.i2pProxyOn) { + body.setAttribute("i2pproxyon", "yes") + } else { + body.removeAttribute("i2pproxyon") + } + if (aData.updateChannel) body.setAttribute("updatechannel", aData.updateChannel); else diff --git a/src/chrome/content/aboutI2p/aboutI2p.xhtml b/src/chrome/content/aboutI2p/aboutI2p.xhtml index 4dad149..13946a3 100644 --- a/src/chrome/content/aboutI2p/aboutI2p.xhtml +++ b/src/chrome/content/aboutI2p/aboutI2p.xhtml @@ -28,44 +28,90 @@ window.addEventListener("pageshow", function() { -
+

&aboutI2p.browser_name;

-

- &aboutI2p.browser_name; ( &aboutI2p.browser_short_name; ) &aboutI2p.browser_description;
- &aboutI2p.startup; &aboutI2p.rc; &aboutI2p.startup_b; - -

&aboutI2p.links;

-

+

+

&aboutI2p.browser_name; ( &aboutI2p.browser_short_name; ) &aboutI2p.browser_description;

+

&aboutI2p.warn_experimental;

+
+
+
&aboutI2p.all_checks_ok;
+
&aboutI2p.startup; &aboutI2p.routerconsole; &aboutI2p.startup_b;
+
&aboutI2p.proxyready;
+
+ + +
+

+

&aboutI2p.applications;

+

&aboutI2p.appExplain;

- - &aboutI2p.warn_experimental; -

- -

&aboutI2p.all_checks_ok;

-

-

-

+
+
+

&aboutI2p.links;

+

&aboutI2p.linkExplain;

+

+

+

+
-
+ diff --git a/src/chrome/content/i2pbutton.js b/src/chrome/content/i2pbutton.js index 22a32f2..839f08f 100644 --- a/src/chrome/content/i2pbutton.js +++ b/src/chrome/content/i2pbutton.js @@ -60,7 +60,15 @@ function i2pbutton_i2p_console_check_ok() { } return false } - +function i2pbutton_i2p_proxy_check_ok() { + // This check will now test if the router subprocess is running + if (routerCtrl.mI2PProcess != null) { + if (routerCtrl.mI2PProcess.isRunning) { + return true + } + } + return false +} var i2pbutton_window_pref_observer = { register: function() @@ -197,7 +205,8 @@ var i2pbutton_abouti2p_message_handler = { let dataObj = { updateChannel: AppConstants.MOZ_UPDATE_CHANNEL, i2pOn: i2pbutton_i2p_check_ok(), - i2pConsoleOn: i2pbutton_i2p_console_check_ok() + i2pConsoleOn: i2pbutton_i2p_console_check_ok(), + i2pProxyOn: i2pbutton_i2p_proxy_check_ok() }; if (aIsRespondingToPageLoad) { diff --git a/src/chrome/locale/en-US/aboutI2p.dtd b/src/chrome/locale/en-US/aboutI2p.dtd index bc343e8..aafbb53 100644 --- a/src/chrome/locale/en-US/aboutI2p.dtd +++ b/src/chrome/locale/en-US/aboutI2p.dtd @@ -11,30 +11,42 @@ - + - + + + + + + - - - - - - - - - - + + + + - + + + + + + + + + + + + + + diff --git a/src/chrome/skin/aboutI2p.css b/src/chrome/skin/aboutI2p.css index ff57258..0083f55 100644 --- a/src/chrome/skin/aboutI2p.css +++ b/src/chrome/skin/aboutI2p.css @@ -7,18 +7,55 @@ html { height: 100%; } +a { + color: #3B6BBF; + text-decoration: none; + font-weight: bold; + word-wrap: break-word; + outline: none; +} + +.applicationDesc { + color: #81888f; + text-decoration: none; + font-weight: bold; + word-wrap: break-word; + outline: none; +} + +a:hover { + color: #495057;; + text-decoration: none; + font-weight: bold; + word-wrap: break-word; + outline: none; +} + +.applicationDesc:hover { + color: #495057;; + text-decoration: none; + font-weight: bold; + word-wrap: break-word; + outline: none; +} + body { display: flex; flex-direction: column; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif; width: 100%; height: 100%; margin: 0px auto; padding: 0px 0px; - font-family: Helvetica, Arial, sans-serif; - color: var(--abouttor-text-color); - background-color: var(--abouttor-bg-toroff-color); + /*color: var(--abouttor-text-color);*/ + /*background-color: var(--abouttor-bg-toroff-color);*/ + color: #495057; background-attachment: fixed; background-size: 100% 100%; + text-decoration: none; + font-weight: bold; + word-wrap: break-word; + outline: none; } /* Hide the entire document by default to avoid showing the incorrect @@ -31,32 +68,94 @@ body { } .background { - background-color: #3960b5; - padding: 120px; + background-color: #F8F8FF; + /*padding: 120px;*/ height: 100%; } p { - margin-top: 40px; - font-family: Open Sans, sans-serif; font-weight: 300; line-height: 32px; font-size: 17px; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif; + text-decoration: none; + color: #495057; + font-weight: bold; + word-wrap: break-word; + outline: none; } .content { - padding: 110px; - background-color: #FFFFFF; - border-radius: 15px; - box-shadow: 0px 30px 200px rgba(61,0,84,0.7); + min-height: 3rem; + padding: 1rem; + margin: 1.5rem; + display: inline-block; + border: 1px solid #D9D9D6; + border-radius: 2px; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; + background: #F8F8FF; + /*box-shadow: 0px 30px 200px rgba(61,0,84,0.7);*/ +} + +.extended-info { + min-height: 3rem; + padding: 1rem; + margin-top: 1.5rem; + display: inline-block; + border: 1px solid #D9D9D6; + border-radius: 2px; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; + background: #F8F8FF; +} + +.application-info { + min-height: 3rem; + padding: 1rem; + margin-top: 1.5rem; + display: inline-block; + border: 1px solid #D9D9D6; + border-radius: 2px; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; + background: #F8F8FF; } h1 { margin-right: auto; - font-family: Montserrat, sans-serif; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif; + font-weight: 600; + font-size: 32px; + text-transform: uppercase; + color: #41465f; + border: 1px solid #dee2e6; + border-radius: 2px 2px 0 0; + width: 90%; + padding-left: 5%; +} + +h2 { + margin-right: auto; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif; font-weight: 600; font-size: 25px; text-transform: uppercase; + color: #41465f; + border: 1px solid #dee2e6; + border-radius: 2px 2px 0 0; + width: 90%; + padding-left: 5%; +} + +h3 { + margin-right: auto; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif; + font-weight: 600; + font-size: 25px; + text-transform: uppercase; + color: #41465f; + border: 1px solid #dee2e6; + border-radius: 2px 2px 0 0; + width: 90%; + padding-left: 5%; } .section-header { @@ -67,11 +166,150 @@ h1 { body[i2pon] .hideIfI2POn, body:not([i2pon]) .hideIfI2POff, +body[i2pproxyon] .hideIfI2PProxyOn, +body:not([i2pproxyon]) .hideIfI2PProxyOff, body[i2pconsoleon] .hideIfI2PConsoleOn, body:not([i2pconsoleon]) .hideIfI2PConsoleOff { - display: none; + display: none !important; } ul { margin-left: 2rem; + list-style: none; } + +li { + min-height: 3rem; + padding: .5rem; + margin-left: 32%; + margin-top: .5rem; + margin-bottom: .5rem; + margin-right: .5rem; + background: #DEE2E6; + border: 1px solid #DEE2E6; + width: 64%; + min-width: 64%; + border-radius: 2px; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; +} + +#readyness { + min-height: 5rem; + padding: .5rem; + margin: .5rem; + width: 42%; + min-width: 42%; + /*display: inline;*/ + background: #DEE2E6; + /*float: right;*/ + text-align: center !important; + border: 1px solid #DEE2E6; + border-radius: 2px; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; +} + +#onboarding { + min-height: 5rem; + padding: .5rem; + margin: .5rem; + width: 42%; + min-width: 42%; + font-size: 2rem; + /*display: inline;*/ + background: #DEE2E6; + /*float: right;*/ + text-align: center !important; + border: 1px solid #DEE2E6; + border-radius: 2px; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; +} + +#i2pbrowser-description { + width: 50%; + min-width: 50%; + min-height: 5rem; + padding: .5rem; + display: inline; + background: #DEE2E6; + float: right; + border: 1px solid #DEE2E6; + border-radius: 2px; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; +} + +#applicationExplain { + min-height: 5rem; + padding: .5rem; + margin: .5rem; + width: 30%; + min-width: 30%; + /*display: inline;*/ + background: #DEE2E6; + float: left; + text-align: center !important; + border: 1px solid #DEE2E6; + border-radius: 2px; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; +} + +#linksExplain { + min-height: 5rem; + padding: .5rem; + margin: .5rem; + width: 30%; + min-width: 30%; + /*display: inline;*/ + background: #DEE2E6; + float: left; + text-align: center !important; + border: 1px solid #DEE2E6; + border-radius: 2px; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; +} + +#proxyReady { + min-height: 3rem; + padding: .5rem; + margin: .2rem; + width: 38%; + min-width: 38%; + display: inline; + background: #D9D9D6; + float: right; + text-align: center !important; + border: 1px solid #D9D9D6; + border-radius: 2px; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; +} + +#proxyUnready { + min-height: 3rem; + padding: .5rem; + margin: .2rem; + width: 38%; + min-width: 38%; + display: inline; + float: right; + text-align: center !important; + border: 1px solid #FFC56D; + border-radius: 2px; + background: #FFC56D; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; +} + + +#consoleOn { + min-height: 3rem; + padding: .5rem; + margin: .2rem; + width: 38%; + min-width: 38%; + display: inline; + float: left; + text-align: center !important; + border: 1px solid #F7E59A; + border-radius: 2px; + background: #F7E59A; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; +} +