fix(wx): browser-agnostic CSS for browserAction

Part of #218 effort
ipfs · May 24, 2017 · 55490d2 · 55490d2
1 parent 6fa4be1
commit 55490d2
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 7 deletions.
diff --git a/add-on/manifest.json b/add-on/manifest.json
@@ -38,7 +38,7 @@
     },
 
     "browser_action": {
-        "browser_style": true,
+        "browser_style": false,
         "default_icon": {
             "19": "icons/png/ipfs-logo-off_19.png",
             "38": "icons/png/ipfs-logo-off_38.png",

diff --git a/add-on/src/popup/browser-action.html b/add-on/src/popup/browser-action.html
@@ -3,6 +3,107 @@
 <head>
   <meta charset="utf-8">
   <style type="text/css">
+	/*
+      .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;
+	}
+
+	body * {
+	  box-sizing: border-box;
+	  text-align: start;
+	}
+
+	.panel-section {
+	  display: flex;
+	  flex-direction: row;
+	}
+
+	.panel-section-separator {
+	  background-color: rgba(0, 0, 0, 0.15);
+	  min-height: 1px;
+	}
+
+	/* Panel Section - Header */
+	.panel-section-header {
+	  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+	  padding: 16px;
+	}
+
+	.panel-section-header > .icon-section-header {
+	  background-position: center center;
+	  background-repeat: no-repeat;
+	  height: 32px;
+	  margin-right: 16px;
+	  position: relative;
+	  width: 32px;
+	}
+
+	.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;
+	}
+
+	.panel-list-item {
+	  align-items: center;
+	  display: flex;
+	  flex-direction: row;
+	  height: 24px;
+	  padding: 0 16px;
+	}
+
+	.panel-list-item:not(.disabled):hover {
+	  background-color: rgba(0, 0, 0, 0.06);
+	  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	  border-top: 1px solid rgba(0, 0, 0, 0.1);
+	}
+
+	.panel-list-item:not(.disabled):hover:active {
+	  background-color: rgba(0, 0, 0, 0.1);
+	}
+
+	.panel-list-item.disabled {
+	  color: #999;
+	}
+
+	.panel-list-item > .icon {
+	  flex-grow: 0;
+	  flex-shrink: 0;
+	}
+
+	.panel-list-item > .text {
+	  flex-grow: 10;
+	}
+
+	.panel-list-item > .text-shortcut {
+	  color: #808080;
+	  font-family: "Lucida Grande", caption;
+	  font-size: .847rem;
+	  justify-content: flex-end;
+	}
+
+	.panel-section-list .panel-section-separator {
+	  margin: 4px 0;
+	}
+
     #quick-upload {
         font-weight: bold;
     }
@@ -20,20 +121,24 @@
         list-style-type: none;
         margin: 0;
         padding: 0.5rem;
-        min-height: 3em;
+        min-height: 3rem;
+        min-width: 14rem;
     }
     #gateway-status li {
-        font-variant: small-caps;
+        text-transform: uppercase;
+		font-size: small;
         padding: 0;
         cursor: default;
-        display:block;
+        display: block;
         max-height:2rem;
         text-overflow: ellipsis;
-        overflow: auto;
+        overflow: hidden;
     }
     #gateway-status  li > span:nth-of-type(2) {
-        display: inline-block;
-        float: right;
+        font-family: monospace;
+        display: block;
+        float:right;
+        text-align: right;
         padding-left: 1rem;
     }
     .hidden { display: none !important; }