I2P_Developers/i2pbutton
3
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Make a smarter, prettier homepage

Browse Source
This commit is contained in:
idk
2019-11-19 22:13:02 -05:00
parent f2bd48ada9
commit 2b57d75c08
6 changed files with 367 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Readme.md
View File

@ -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\
```

6
src/chrome/content/aboutI2p/aboutI2p-content.js
View File

@ -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

100
src/chrome/content/aboutI2p/aboutI2p.xhtml
View File

@ -28,44 +28,90 @@ window.addEventListener("pageshow", function() {
</script>
</head>
<body dir="&locale.dir;">
<div>
<!--<div>-->
<div class='background'>
<div class='content'>
<div class='section-header'>
<h1>&aboutI2p.browser_name;</h1>
</div>
<div id="i2pbrowser-version"></div>
<p>
&aboutI2p.browser_name; ( &aboutI2p.browser_short_name; ) &aboutI2p.browser_description; <br />
&aboutI2p.startup; <a href="&aboutI2p.routerconsole;">&aboutI2p.rc;</a> &aboutI2p.startup_b;
<h3>&aboutI2p.links;</h3>
<p>
<div id="i2pbrowser-description">
<p id="description">&aboutI2p.browser_name; ( &aboutI2p.browser_short_name; ) &aboutI2p.browser_description;</p>
<p class="beta">&aboutI2p.warn_experimental;</p>
</div>
<div id="readyness">
<div id="consoleOn" class="hideIfI2PConsoleOff">&aboutI2p.all_checks_ok;</div>
<div id="proxyUnready" class="hideIfI2PProxyOn">&aboutI2p.startup; &aboutI2p.routerconsole; &aboutI2p.startup_b;</div>
<div id="proxyReady" class="hideIfI2PProxyOff">&aboutI2p.proxyready;</div>
</div>
<!--<div id="onboarding" class="hideIfI2PConsoleOff">
<a href="#">New to I2P? Click Here.</a>
</div>-->
<!--<p class="hideIfI2POn">&aboutI2p.warn_not_running; <a href="about:i2p">&aboutI2p.refresh_text;</a> &aboutI2p.reccommend_not_running;</p>-->
<div class="application-info">
<p class="hideIfI2PConsoleOff">
<h3>&aboutI2p.applications;</h3>
<p id="applicationExplain">&aboutI2p.appExplain;</p>
<ul>
<li>&aboutI2p.source;: <a href="&aboutI2p.github;/test-i2p-browser/tree/i2p-browser-60.7.0esr-9.0-1-build3">&aboutI2p.github;/test-i2p-browser/tree/i2p-browser-60.7.0esr-9.0-1-build3</a></li>
<li>&aboutI2p.design;: <a href="&aboutI2p.github;/i2p-browser-design-docs">&aboutI2p.github;/i2p-browser-design-docs</a></li>
<li>&aboutI2p.bug_tracker;: <a href="&aboutI2p.trac;/">&aboutI2p.trac;/</a></li>
<li>&aboutI2p.build_scripts;: <a href="&aboutI2p.github;/i2p-browser-build-scripts">&aboutI2p.github;/i2p-browser-build-scripts</a></li>
<li>&aboutI2p.i2pbutton_source;: <a href="&aboutI2p.github;/i2pbutton">&aboutI2p.github;/i2pbutton</a></li>
<li><em>&aboutI2p.donate;: <a href="&aboutI2p.site;/get-involved/donate">&aboutI2p.supportus;</a></em></li>
<a class="applicationName" href="&aboutI2p.routerconsole;/i2ptunnelmgr">
<li class="application">
&aboutI2p.i2ptunnel; <span class="applicationDesc">&aboutI2p.i2ptunnel_visit_msg;</span>
</li>
</a>
<a class="applicationName" href="&aboutI2p.routerconsole;/webmail">
<li class="application">
&aboutI2p.email; <span class="applicationDesc">&aboutI2p.email_visit_msg;</span>
</li>
</a>
<a class="applicationName" href="&aboutI2p.routerconsole;/torrents">
<li class="application">
&aboutI2p.torrent; <span class="applicationDesc">&aboutI2p.torrent_visit_msg;</span>
</li>
</a>
</ul>
</p>
&aboutI2p.warn_experimental;
</p>
<!--<p class="hideIfI2POn">&aboutI2p.warn_not_running; <a href="about:i2p">&aboutI2p.refresh_text;</a> &aboutI2p.reccommend_not_running;</p>-->
<p class="hideIfI2PConsoleOff">&aboutI2p.all_checks_ok;</p>
<p class="hideIfI2PConsoleOff">
<ul>
<li>&aboutI2p.i2ptunnel_visit_msg; <a href="&aboutI2p.routerconsole;/i2ptunnelmgr">&aboutI2p.i2ptunnel;</a></li>
<li>&aboutI2p.email_visit_msg; <a href="&aboutI2p.routerconsole;/webmail">&aboutI2p.email;</a></li>
<li>&aboutI2p.torrent_visit_msg; <a href="&aboutI2p.routerconsole;/torrents">&aboutI2p.torrent;</a></li>
<li>&aboutI2p.console_visit_msg; <a href="&aboutI2p.routerconsole;">&aboutI2p.console;</a></li>
</ul>
</p>
</div>
<div class="extended-info">
<h3>&aboutI2p.links;</h3>
<p id="linksExplain">&aboutI2p.linkExplain;</p>
<p>
<ul>
<a href="&aboutI2p.github;/i2p-browser">
<li>
&aboutI2p.source; <span class="applicationDesc">&aboutI2p.browsersrc;</span>
</li>
</a>
<a href="&aboutI2p.github;/i2pbutton">
<li>
&aboutI2p.i2pbutton_source; <span class="applicationDesc">&aboutI2p.extsrc;</span>
</li>
</a>
<a href="&aboutI2p.githubdev;/i2p-browser-build-scripts">
<li>
&aboutI2p.build_scripts; <span class="applicationDesc">&aboutI2p.makesrc;</span>
</li>
</a>
<a href="&aboutI2p.githubdev;/i2p-browser-design-docs">
<li>
&aboutI2p.design; <span class="applicationDesc">&aboutI2p.designsrc;</span>
</li>
</a>
<a href="&aboutI2p.trac;/">
<li>
&aboutI2p.bug_tracker; <span class="applicationDesc">&aboutI2p.tracwiki;</span>
</li>
</a>
<a href="&aboutI2p.site;/get-involved/donate">
<li>
<em>&aboutI2p.supportus;</em> <span class="applicationDesc">&aboutI2p.donatecta;</span>
</li>
</a>
</ul>
</p>
</div>
</div>
</div>
</div>
<!--</div>-->
</body>
</html>

13
src/chrome/content/i2pbutton.js
View File

@ -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) {

38
src/chrome/locale/en-US/aboutI2p.dtd
View File

@ -11,30 +11,42 @@
<!ENTITY aboutI2p.warn_not_running "It currently seems like your router is NOT running :(">
<!ENTITY aboutI2p.reccommend_not_running "If you just started the router, it may take up to 2 minutes for the router to start the proxy.">
<!ENTITY aboutI2p.all_checks_ok "Super! The browser detected I2P running in background! :)">
<!ENTITY aboutI2p.all_checks_ok "The browser detected I2P running in background!">
<!ENTITY aboutI2p.warn_experimental "This is a experimental sub-project of I2P. It is currently Beta software.">
<!ENTITY aboutI2p.console_visit_msg "It seems like your console is up, click to visit:">
<!ENTITY aboutI2p.appExplain "These applications use I2P to provide them with security and privacy.">
<!ENTITY aboutI2p.applications "Applications">
<!ENTITY aboutI2p.console "Console:">
<!ENTITY aboutI2p.torrent "Torrents:">
<!ENTITY aboutI2p.i2ptunnel "Tunnels:">
<!ENTITY aboutI2p.email "E-Mail:">
<!ENTITY aboutI2p.i2ptunnel_visit_msg "I2P has a web-based interface for configuring .i2p services like web sites, to set up your own web sites, go here:">
<!ENTITY aboutI2p.email_visit_msg "I2P also bundles a webmail client which can be used to access in-I2P e-mail. To use it, go here:">
<!ENTITY aboutI2p.torrent_visit_msg "I2P is capable of anonymous Peer-to-Peer file sharing, to use the built-in bittorrent client go here:">
<!ENTITY aboutI2p.console "Console">
<!ENTITY aboutI2p.torrent "Torrents">
<!ENTITY aboutI2p.i2ptunnel "Tunnels">
<!ENTITY aboutI2p.email "E-Mail">
<!ENTITY aboutI2p.i2pbutton_source "I2P Button source">
<!ENTITY aboutI2p.build_scripts "Build scripts to compile from source">
<!ENTITY aboutI2p.source "Browse the source code">
<!ENTITY aboutI2p.bug_tracker "Submit a Bug Report">
<!ENTITY aboutI2p.links "Links">
<!ENTITY aboutI2p.design "Design Document">
<!ENTITY aboutI2p.console_visit_msg "It seems like your console is up, click to visit:">
<!ENTITY aboutI2p.refresh_text "Try refreshing the page.">
<!ENTITY aboutI2p.refresh_link "Refresh">
<!ENTITY aboutI2p.links "Links">
<!ENTITY aboutI2p.linkExplain "If you want to get more information about I2P, you can visit these links.">
<!ENTITY aboutI2p.site "http://i2p-projekt.i2p/en">
<!ENTITY aboutI2p.routerconsole "http://localhost:7647">
<!ENTITY aboutI2p.github "https://github.com/mikalv">
<!ENTITY aboutI2p.github "https://github.com/i2p">
<!ENTITY aboutI2p.githubdev "https://github.com/mikal">
<!ENTITY aboutI2p.trac "http://trac.i2p2.i2p">
<!ENTITY aboutI2p.i2pbutton_source "I2P Button Source Code:">
<!ENTITY aboutI2p.build_scripts "I2P Browser Build Scripts:">
<!ENTITY aboutI2p.source "I2P Browser Source Code:">
<!ENTITY aboutI2p.bug_tracker "Submit a Bug Report:">
<!ENTITY aboutI2p.design "I2P Browser Design Document:">
<!ENTITY aboutI2p.browsersrc "Go here to browse the source code of our Firefox fork.">
<!ENTITY aboutI2p.extsrc "Much of the functionality of the I2P Browser is implemented in the I2PButton plugin.">
<!ENTITY aboutI2p.makesrc "These scripts are used to build the browser.">
<!ENTITY aboutI2p.designsrc "This is the I2P Browser Design Document.">
<!ENTITY aboutI2p.tracwiki "To report a bug, visit the Trac Wiki.">
<!ENTITY aboutI2p.donatecta "I2P is funded by donations. In order to make a donation visit the project web site.">
<!ENTITY aboutI2p.startup "Sometimes it takes a minute or two for I2P to get started for the first time. While you wait, visit the">
<!ENTITY aboutI2p.startup_b "to get acquainted with all the capabilities of I2P.">
<!ENTITY aboutI2p.rc "Router Console">
<!ENTITY aboutI2p.proxyready "Your Proxy is ready, feel free to browse the eepWeb!">

264
src/chrome/skin/aboutI2p.css
View File

@ -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;
}