Infobar tweaks

Improved the CSS styling of infobars, as per skinny's mockup. Added gombot head to browser action and infobars.
mozilla · Dec 9, 2012 · bd8b7aa · bd8b7aa
1 parent 6fdef39
commit bd8b7aa
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 24 deletions.
diff --git a/background/main.js b/background/main.js
@@ -85,7 +85,7 @@ var messageHandlers = {
         // Search for logins for this particular site
         getLoginsForSite(message.hostname, function(logins) {
             if (logins.length == 0) return;
-                        
+
             if (logins.length == 1) {
                 // Is the login for this site PIN locked?
                 if (logins[0].pin_locked) {
@@ -156,7 +156,8 @@ function displayInfobar(notificationObj) {
     if (!infobarPaths[notificationObj.notification.type]) return;
     InfobarManager.run({
         path: infobarPaths[notificationObj.notification.type],
-        tabId: notificationObj.tabID
+        tabId: notificationObj.tabID,
+        height: '32px'
     }, genHandlerForNotification(notificationObj));
 
     function genHandlerForNotification(notificationObj) {

diff --git a/images/gombot_logo-19x19.png b/images/gombot_logo-19x19.png
diff --git a/infobars/gombot_infobar.css b/infobars/gombot_infobar.css
@@ -1,8 +1,11 @@
 body {
     background: -webkit-linear-gradient(top, #707070 0%,#3A3A3C 100%);
-    font-size:10pt;
+    font-size:9pt;
     color:white;
     font-family:sans-serif;
+
+    margin:0;
+    padding:0;
 }
 
 a {
@@ -13,30 +16,36 @@ a {
 button {
     background: -webkit-linear-gradient(top, #4b4b4b 0%,#191919 100%);
 
-    display: inline-block;
-    *display: inline;
-    padding: 2px 7px;
-    margin-bottom: 0;
+    border: 0;
+    vertical-align :middle;
+
+
+    padding: 4px 6px;
+    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3);
+
+    margin-bottom: 4px;
     *margin-left: .3em;
-    font-size: 10pt;
-    line-height: 20px;
-    *line-height: 20px;
+    font-size: 9pt;
     color: white;
     text-align: center;
     vertical-align: middle;
     cursor: pointer;
     background-repeat: repeat-x;
     *border: 0;
     border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-    -webkit-border-radius: 4px;
+    -webkit-border-radius: 8px;
     *zoom: 1;
-    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 button:hover {
     background: -webkit-linear-gradient(top, #191919 0%,#4b4b4b 100%);
 }
 
+.gombot-head {
+    margin-right:20px;
+}
+
 #never-for-this-site-button {
     background:#616161;
     color:#bbb;
@@ -53,13 +62,20 @@ input.pin-digit {
     height:25px;
     border-radius:5px;
     color:white;
+    box-shadow:inset 0 0 4px #2A2A2A;
+    margin-top:3px;
 }
 
 input.pin-digit.wrong-pin {
     background: -webkit-linear-gradient(top, #a00000 0%,#2A2A2A 100%);
     border:1px #720000;
 }
 
+#infobar-container {
+    width:50em;
+    height:100%;
+}
+
 #pin-entry {
     margin-left:20px;
-}
+}
diff --git a/infobars/pin_entry_infobar.html b/infobars/pin_entry_infobar.html
@@ -3,16 +3,19 @@
     <link href="gombot_infobar.css" rel="stylesheet">
 </head>
 <body>
-    <span id="pin-entry-prompt">
-      Enter PIN.
-    </span>
+    <div id="infobar-container">
+        <img class="gombot-head" src="/images/gombot_logo-19x19.png"/>
+        <span id="pin-entry-prompt">
+          Enter PIN.
+        </span>
 
-  <span id="pin-entry">
-      <input id="digit1" class="pin-digit"  maxlength="1" type="password" tabindex="1"/>
-      <input id="digit2" class="pin-digit"  maxlength="1" type="password" tabindex="2"/>
-      <input id="digit3" class="pin-digit"  maxlength="1" type="password" tabindex="3"/>
-      <input id="digit4" class="pin-digit"  maxlength="1" type="password" tabindex="4"/>
-  </span>
+      <span id="pin-entry">
+          <input id="digit1" class="pin-digit"  maxlength="1" type="password" tabindex="1"/>
+          <input id="digit2" class="pin-digit"  maxlength="1" type="password" tabindex="2"/>
+          <input id="digit3" class="pin-digit"  maxlength="1" type="password" tabindex="3"/>
+          <input id="digit4" class="pin-digit"  maxlength="1" type="password" tabindex="4"/>
+      </span>
+  </div>
   <!-- gives you window.CompleteInfobar() which you call with
        a javascript object to end your infobar -->
   <script src="/infobar/api.js"></script>

diff --git a/infobars/remember_password_infobar.html b/infobars/remember_password_infobar.html
@@ -3,7 +3,10 @@
     <link href="gombot_infobar.css" rel="stylesheet">
 </head>
 <body>
-  Store this password? <button id="save-button" class="btn">Save</button> <button id="pin-lock-button" class="btn">PIN lock</button> <button id="never-for-this-site-button" class="btn">Never for this site</button>
+    <div id="infobar-container">
+      <img class="gombot-head" src="/images/gombot_logo-19x19.png"/>
+      Store this password? <button id="save-button" class="btn">Save</button> <button id="pin-lock-button" class="btn">PIN lock</button> <button id="never-for-this-site-button" class="btn">Never for this site</button>
+    </div>
   <!-- gives you window.CompleteInfobar() which you call with
        a javascript object to end your infobar -->
   <script src="/infobar/api.js"></script>

diff --git a/infobars/signup_nag_infobar.html b/infobars/signup_nag_infobar.html
@@ -3,6 +3,7 @@
     <link href="gombot_infobar.css" rel="stylesheet">
 </head>
 <body>
+    <img class="gombot-head" src="/images/gombot_logo-19x19.png"/>
     Gombot can securely store this login for you. <a id="signup-link" href="#">Sign up</a> now!
   <!-- gives you window.CompleteInfobar() which you call with
        a javascript object to end your infobar -->

diff --git a/infobars/update_password_infobar.html b/infobars/update_password_infobar.html
@@ -3,6 +3,7 @@
     <link href="gombot_infobar.css" rel="stylesheet">
 </head>
 <body>
+    <img class="gombot-head" src="/images/gombot_logo-19x19.png"/>
     Would you like to update your saved password on this site? <button id="update-button" class="btn">Update password</button>
   <!-- gives you window.CompleteInfobar() which you call with
        a javascript object to end your infobar -->

diff --git a/manifest.json b/manifest.json
@@ -25,7 +25,7 @@
         }
       ],
   "browser_action": {
-    "default_icon": "images/cropped_persona_icon.png",
+    "default_icon": "images/gombot_logo-19x19.png",
     "default_popup": "browser_action/browser_action.html"
   },
   "update_url": "http://dev.tobmog.org/downloads/updates.xml",