fix(browserAction): improved support for HiDPI

- Do not inject browser styles, as Chrome and Firefox have conflicting ones - Sizing is now based on `rem` units - Options screen UX tweaks Should close #125
ipfs · Oct 8, 2017 · 8a43015 · 8a43015
1 parent 3565061
commit 8a43015
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 37 deletions.
diff --git a/add-on/manifest.json b/add-on/manifest.json
@@ -49,6 +49,7 @@
     },
 
     "options_ui": {
+        "browser_style": false,
         "page": "src/options/options.html"
     },
 

diff --git a/add-on/src/options/options.html b/add-on/src/options/options.html
@@ -3,22 +3,32 @@
   <head>
     <meta charset="utf-8">
     <style type="text/css">
+      form * {
+        font: caption;
+        font-size: 1rem;
+      }
+      em {
+        font-style: italic;
+      }
+      code {
+        font-family: monospace;
+      }
       fieldset {
         border: none;
         border-top: 3px solid #3E9398;
         display: flex;
         flex-direction: column;
-        margin-bottom: .5em;
-        min-width: 40em;
+        margin-bottom: .5rem;
+        min-width: 40rem;
       }
       legend {
-        letter-spacing: .15em;
+        letter-spacing: .15rem;
         text-transform: uppercase;
-        padding: .5em;
+        padding: .5rem;
         font-weight: bold;
       }
       fieldset > div {
-        padding: 1em;
+        padding: 1rem;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
@@ -35,9 +45,8 @@
       }
       label > dl > dd {
         opacity: .5;
-        font-size: .9em;
-        margin-left: 2em;
-        margin-right: .2em;
+        margin-left: 2rem;
+        margin-right: .2rem;
       }
       div:hover {
         background-color: rgba(62, 148, 152, 0.05);
@@ -47,7 +56,7 @@
       }
       input, textarea {
         flex: 1;
-        padding: .5em;
+        padding: .5rem;
         font-family: monospace;
       }
       input[type=text],
@@ -100,7 +109,7 @@
           <label for="publicGatewayUrl">
             <dl>
               <dt>Default Public Gateway</dt>
-              <dd>Fallback URL used when Custom Gateway is not available and for copying shareable links</dd>
+              <dd>Fallback URL used when <em>Custom Gateway</em> is not available and for copying shareable links</dd>
             </dl>
           </label>
           <input type="url" id="publicGatewayUrl" inputmode="url" required

diff --git a/add-on/src/popup/browser-action.html b/add-on/src/popup/browser-action.html
@@ -1,25 +1,26 @@
 <!DOCTYPE html>
 <head>
   <meta charset="utf-8">
-  <style type="text/css">
+  <style>
 	/*
       .panel-* styles were injected by Firefox from chrome://browser/content/extension.css
       when manifest had "browser_style": true
 	  We duplicated them here for now to have the same look and feel under Chromium
      */
-	html,
-	body {
-	  background: transparent;
-	  box-sizing: border-box;
-	  cursor: default;
-	  display: flex;
-	  flex-direction: column;
-	  font: caption;
-	  margin: 0;
-	  padding: 0;
+    html,
+    body {
+      background: transparent;
+      box-sizing: border-box;
+      cursor: default;
+      display: flex;
+      flex-direction: column;
+      font: caption;
+      font-size: .95rem;
+      margin: 0;
+      padding: 0;
       -moz-user-select: none;
       user-select: none;
-	}
+    }
 
 	body * {
 	  box-sizing: border-box;
@@ -39,36 +40,35 @@
 	/* Panel Section - Header */
 	.panel-section-header {
 	  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-	  padding: 16px;
+	  padding: 1rem;
 	}
 
 	.panel-section-header > .icon-section-header {
 	  background-position: center center;
 	  background-repeat: no-repeat;
-	  height: 32px;
-	  margin-right: 16px;
+	  height: 2rem;
+	  margin-right: 1rem;
 	  position: relative;
-	  width: 32px;
+	  width: 2rem;
 	}
 
 	.panel-section-header > .text-section-header {
 	  align-self: center;
-	  font-size: 1.385rem;
 	  font-weight: lighter;
 	}
 
 	/* Panel Section - List */
 	.panel-section-list {
 	  flex-direction: column;
-	  padding: 4px 0;
+	  padding: 0.5rem 0;
 	}
 
 	.panel-list-item {
 	  align-items: center;
 	  display: flex;
 	  flex-direction: row;
-	  height: 24px;
-	  padding: 0 16px;
+	  height: 2rem;
+	  padding: 0 1rem;
 	}
 
 	.panel-list-item:not(.disabled):hover {
@@ -102,7 +102,7 @@
 	}
 
 	.panel-section-list .panel-section-separator {
-	  margin: 4px 0;
+	  margin: 0.25rem 0;
 	}
 
     #quick-upload {
@@ -111,7 +111,26 @@
     #icon {
         width: 6rem;
         height: 6rem;
-        padding: 0.25rem;
+        padding: 1rem;
+    }
+	@keyframes iconFadeInOut {
+	  from {
+		opacity:1;
+        transform: scale(1);
+        filter: drop-shadow(0 0 .2rem #ccc);
+	  }
+	  to {
+		opacity:.9;
+        transform: scale(.95);
+        filter: drop-shadow(0 0 .5rem #5FCBCF);
+	  }
+	}
+    #icon.online {
+		animation-name: iconFadeInOut;
+		animation-timing-function: ease-in-out;
+		animation-iteration-count: infinite;
+		animation-duration: 1s;
+		animation-direction: alternate-reverse;
     }
     #gateway-status {
         display: flex;
@@ -130,7 +149,7 @@
     }
     #gateway-status li {
         text-transform: uppercase;
-        font-size: small;
+        font-size: .857rem;
         padding: 0;
         cursor: default;
         max-height:2rem;
@@ -141,7 +160,6 @@
         justify-content: space-between;
     }
     #gateway-status  li > span:nth-of-type(2) {
-        font-family: monospace;
         text-overflow: ellipsis;
         padding-left: 1rem;
     }

diff --git a/add-on/src/popup/browser-action.js b/add-on/src/popup/browser-action.js
@@ -250,7 +250,13 @@ async function updateBrowserActionPopup () {
     // update swarm peer count
     const peerCount = state.peerCount
     set('swarm-peers-val', peerCount < 0 ? offline : peerCount)
-    ipfsIcon.src = peerCount > 0 ? ipfsIconOn : ipfsIconOff
+    if (peerCount > 0) {
+      ipfsIcon.src = ipfsIconOn
+      ipfsIcon.classList.add('online')
+    } else {
+      ipfsIcon.src = ipfsIconOff
+      ipfsIcon.classList.remove('online')
+    }
     if (peerCount > 0) { // API is online & there are peers
       show('quick-upload')
     } else {

diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "fakefile": "0.0.9",
     "fs-promise": "2.0.3",
     "fx-runner": "1.0.7",
-    "geckodriver": "1.8.1",
+    "geckodriver": "1.9.0",
     "husky": "0.14.3",
     "karma": "1.7.1",
     "karma-babel-preprocessor": "6.0.1",
@@ -54,7 +54,7 @@
     "karma-sinon": "1.0.5",
     "mocha": "3.5.3",
     "npm-run-all": "4.1.1",
-    "selenium-webdriver": "3.5.0",
+    "selenium-webdriver": "3.6.0",
     "shx": "0.2.2",
     "sinon": "4.0.0",
     "standard": "10.0.3",