Prepare for refactoring of locales

- #20
ipfs · Sep 8, 2016 · 0d6c120 · 0d6c120
1 parent 7917891
commit 0d6c120
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 79 deletions.
diff --git a/manifest.json b/manifest.json
@@ -17,13 +17,16 @@
     ],
 
     "browser_action": {
+        "browser_style": true,
         "default_icon": "icons/ipfs-logo-off.svg",
         "default_title": "IPFS Gateway Redirect",
         "default_popup": "popup/button-menu.html"
     },
 
     "web_accessible_resources": [
-        "data/linkify-demo.html"
+        "data/linkify-demo.html",
+        "icons/ipfs-logo-on.svg",
+        "icons/ipfs-logo-off.svg"
     ]
 
 }
diff --git a/popup/button-menu.css b/popup/button-menu.css
@@ -0,0 +1,55 @@
+p > img {
+    vertical-align: middle;
+}
+
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0.25rem;
+}
+
+li {
+    padding: 0.5rem;
+    cursor: default;
+    display:block;
+    max-height:2rem;
+    text-overflow: ellipsis;
+    overflow: auto;
+}
+li.header {
+    font-weight: bold;
+}
+li.action {
+    color: #222;
+    background: rgba(238, 238, 238, 0.5);
+    cursor: pointer;
+}
+
+li.action:hover {
+    background: rgba(133, 222, 222, 0.75);
+    color: #000;
+}
+
+li.action:active {
+    background: rgba(74, 158, 161, 0.8);
+    color: #fff;
+}
+
+#gateway-status {
+    padding: 0.5rem;
+    min-height: 3em;
+}
+#gateway-status > li {
+    font-variant: small-caps;
+    padding: 0;
+}
+#gateway-status > li > span:nth-of-type(2) {
+    display: inline-block;
+    float: right;
+}
+
+
+#icon {
+    width: 5rem;
+    height: 5rem;
+}
diff --git a/popup/button-menu.html b/popup/button-menu.html
@@ -2,98 +2,38 @@
 
 <head>
   <meta charset="utf-8">
-  <style type="text/css" media="all">
-
-  p > img {
-    vertical-align: middle;
-  }
-
-  ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0.25rem;
-  }
-
-  li {
-    padding: 0.5rem;
-    cursor: default;
-    display:block;
-    max-height:2rem;
-    text-overflow: ellipsis;
-    overflow: auto;
-  }
-  li.header {
-    font-weight: bold;
-  }
-  li.action {
-    color: #222;
-    background: rgba(238, 238, 238, 0.5);
-    cursor: pointer;
-  }
-
-  li.action:hover {
-    background: rgba(133, 222, 222, 0.75);
-    color: #000;
-  }
-
-  li.action:active {
-    background: rgba(74, 158, 161, 0.8);
-    color: #fff;
-  }
-
-  #gateway-status {
-    padding: 0.5rem;
-    min-height: 3em;
-  }
-  #gateway-status > li {
-    font-variant: small-caps;
-    padding: 0;
-  }
-  #gateway-status > li > span:nth-of-type(2) {
-    display: inline-block;
-    float: right;
-  }
-  #icon {
-    float: right;
-    margin-left: 1rem;
-    height: 64px;
-    width: 64px;
-  }
-  #enable-gateway-redirect {
-    font-weight: bold;
-  }
-  </style>
+  <link rel="stylesheet" href="button-menu.css"/>
 </head>
 
 <body>
-  <img src="ipfs-logo-off.svg" id="icon"/>
+  <img src="../icons/ipfs-logo-off.svg" id="icon"/>
   <ul id="gateway-status">
-    <li id="gateway-redirect"><span data-l10n-id="panel_status-gateway-redirect"></span>
+    <li id="gateway-redirect">panel_status-gateway-redirect</span>
       <span>
-        <span id="redirect-enabled" data-l10n-id="panel_status-gateway-redirect-enabled"></span>
-        <span id="redirect-disabled" data-l10n-id="panel_status-gateway-redirect-disabled"></span>
+        <span id="redirect-enabled">panel_status-gateway-redirect-enabled</span>
+        <span id="redirect-disabled">panel_status-gateway-redirect-disabled</span>
       </span>
     </li>
-    <li id="gateway-address"><span data-l10n-id="panel_status-gateway-address"></span><span id="gateway-address-val">⋯</span></li>
-    <li id="gateway-version"><span data-l10n-id="panel_status-gateway-version"></span><span id="gateway-version-val">⋯</span></li>
-    <li id="swarm-peers"><span data-l10n-id="panel_status-swarm-peers"></span><span id="swarm-peers-val">⋯</span></li>
+    <li id="gateway-address">panel_status-gateway-address<span id="gateway-address-val">⋯</span></li>
+    <li id="gateway-version">panel_status-gateway-version<span id="gateway-version-val">⋯</span></li>
+    <li id="swarm-peers">panel_status-swarm-peers<span id="swarm-peers-val">⋯</span></li>
   </ul>
 
   <ul id="operations">
-    <li class="header" data-l10n-id="panel_operations-header"></li>
+    <li class="header">panel_operations-header</li>
     <li class="action" id="toggle-gateway-redirect">
-      <span id="enable-gateway-redirect" data-l10n-id="panel_toggle-gateway-redirect-enable"></span>
-      <span id="disable-gateway-redirect" data-l10n-id="panel_toggle-gateway-redirect-disable"></span>
+      <span id="enable-gateway-redirect">panel_toggle-gateway-redirect-enable</span>
+      <span id="disable-gateway-redirect">panel_toggle-gateway-redirect-disable</span>
     </li>
-    <li class="action" id="open-webui" data-l10n-id="panel_open-webui"></li>
-    <li class="action" id="open-preferences" data-l10n-id="panel_open-preferences"></li>
+    <li class="action" id="open-webui">panel_open-webui</li>
+    <li class="action" id="open-preferences">panel_open-preferences</li>
   </ul>
 
   <ul id="ipfs-resource-actions">
-    <li class="header" data-l10n-id="panel_ipfs-only-header"></li>
-    <li class="action" id="pin-current-ipfs-address" data-l10n-id="panel_pin-current-ipfs-address"></li>
-    <li class="action" id="copy-current-ipfs-address" data-l10n-id="panel_copy-current-ipfs-address"></li>
-    <li class="action" id="copy-current-public-gw-url" data-l10n-id="panel_copy-current-public-gw-url"></li>
+    <li class="header">panel_ipfs-only-header</li>
+    <li class="action" id="pin-current-ipfs-address">panel_pin-current-ipfs-address</li>
+    <li class="action" id="copy-current-ipfs-address">panel_copy-current-ipfs-address</li>
+    <li class="action" id="copy-current-public-gw-url">panel_copy-current-public-gw-url</li>
   </ul>
 
   <script src="button-menu.js"></script>

diff --git a/popup/button-menu.js b/popup/button-menu.js
@@ -15,7 +15,7 @@ function showIf (id, condition) {
 }
 
 function setIconState (enable) {
-  getById('icon').src = enable ? 'ipfs-logo-on.svg' : 'ipfs-logo-off.svg'
+  getById('icon').src = '../icons/' + (enable ? 'ipfs-logo-on.svg' : 'ipfs-logo-off.svg')
 }
 
 // incoming