bug 579731 - Improve security button look in default theme, r=Neil

suite/browser/navigator.xul

@@ -488,7 +488,7 @@
                     tooltiptext="&popupIcon.tooltiptext;"
                     context="popupBlockerMenu"/>
     <statusbarpanel class="statusbarpanel-iconic" id="offline-status"/>
-    <statusbarpanel class="statusbarpanel-iconic-text"
+    <statusbarpanel class="statusbarpanel-backgroundbox"
                     id="security-button" dir="reverse"
                     oncommand="BrowserPageInfo(null, 'securityTab')"/>
   </statusbar> 

suite/common/bindings/general.xml

@@ -0,0 +1,55 @@
+<?xml version="1.0"?>
+
+<!-- ***** BEGIN LICENSE BLOCK *****
+ Version: MPL 1.1/GPL 2.0/LGPL 2.1
+
+ The contents of this file are subject to the Mozilla Public License Version
+ 1.1 (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+ http://www.mozilla.org/MPL/
+
+ Software distributed under the License is distributed on an "AS IS" basis,
+ WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ for the specific language governing rights and limitations under the
+ License.
+
+ The Original Code is SeaMonkey internet suite code.
+
+ The Initial Developer of the Original Code is
+ Mozilla Foundation.
+ Portions created by the Initial Developer are Copyright (C) 2010
+ the Initial Developer. All Rights Reserved.
+
+ Contributor(s):
+   Robert Kaiser <kairo@kairo.at>
+
+ Alternatively, the contents of this file may be used under the terms of
+ either of the GNU General Public License Version 2 or later (the "GPL"),
+ or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ in which case the provisions of the GPL or the LGPL are applicable instead
+ of those above. If you wish to allow use of your version of this file only
+ under the terms of either the GPL or the LGPL, and not to allow others to
+ use your version of this file under the terms of the MPL, indicate your
+ decision by deleting the provisions above and replace them with the notice
+ and other provisions required by the GPL or the LGPL. If you do not delete
+ the provisions above, a recipient may use your version of this file under
+ the terms of any one of the MPL, the GPL or the LGPL.
+
+ ***** END LICENSE BLOCK ***** -->
+
+<bindings id="generalBindings"
+          xmlns="http://www.mozilla.org/xbl"
+          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+          xmlns:xbl="http://www.mozilla.org/xbl">
+
+  <binding id="statusbarpanel-backgroundbox" display="xul:button"
+           extends="chrome://global/content/bindings/general.xml#statusbarpanel-iconic-text">
+    <content>
+      <xul:hbox class="statusbarpanel-contentbox" xbl:inherits="dir">
+        <xul:image class="statusbarpanel-icon" xbl:inherits="src,src=image"/>
+        <xul:label class="statusbarpanel-text" xbl:inherits="value=label,crop"/>
+      </xul:hbox>
+    </content>
+  </binding>
+
+</bindings>

suite/common/communicator.css

@@ -127,6 +127,10 @@ prefpane {
   -moz-binding: url("chrome://communicator/content/bindings/prefwindow.xml#prefpane");
 }
 
+.statusbarpanel-backgroundbox {
+  -moz-binding: url("chrome://communicator/content/bindings/general.xml#statusbarpanel-backgroundbox");
+}
+
 /******* lightweight themes *******/
 window[lwtheme="true"] {
   background-repeat: no-repeat;

suite/common/jar.mn

@@ -105,6 +105,7 @@ comm.jar:
 #endif
 #endif
 #endif
+   content/communicator/bindings/general.xml                        (bindings/general.xml)
    content/communicator/bindings/notification.xml                   (bindings/notification.xml)
    content/communicator/bindings/toolbar.xml                        (bindings/toolbar.xml)
 *  content/communicator/bindings/prefwindow.xml                     (bindings/prefwindow.xml)

suite/themes/classic/communicator/toolbar.css

@@ -98,3 +98,15 @@ toolbargrippy[tbgrippy-collapsed="true"] > .toolbargrippy-texture {
 .collapsed-tray-spacer {
   border-bottom: 1px solid ThreeDShadow;
 }
+
+/* ::::: solid background status bar panel ::::: */
+
+.statusbarpanel-backgroundbox {
+  -moz-box-align: stretch;
+  padding: 0px;
+}
+
+.statusbarpanel-backgroundbox > .statusbarpanel-contentbox {
+  padding: 0px 1px;
+  -moz-box-align: center;
+}

suite/themes/classic/mac/communicator/toolbar.css

@@ -94,3 +94,15 @@ toolbargrippy[tbgrippy-collapsed="true"] > .toolbargrippy-texture {
 .collapsed-tray-spacer {
   border-bottom: 1px solid ThreeDShadow;
 }
+
+/* ::::: solid background status bar panel ::::: */
+
+.statusbarpanel-backgroundbox {
+  -moz-box-align: stretch;
+  padding: 0px;
+}
+
+.statusbarpanel-backgroundbox > .statusbarpanel-contentbox {
+  padding: 0px 1px;
+  -moz-box-align: center;
+}

suite/themes/classic/mac/navigator/navigator.css

@@ -400,22 +400,39 @@ toolbar[mode="icons"] #search-button > .button-box > .button-text {
 }
 
 /* |high| and |low| styles could be different, to better reflect the secure level... */
-#security-button[level="high"] > .statusbarpanel-icon,
-#security-button[level="low"] > .statusbarpanel-icon {
+#security-button[level="high"] > .statusbarpanel-contentbox,
+#security-button[level="low"] > .statusbarpanel-contentbox {
   list-style-image: url("chrome://communicator/skin/icons/lock-secure.png");
   background-color: #E8DB99;
 }
 
-#security-button[level="broken"] > .statusbarpanel-icon {
+#security-button[level="broken"] > .statusbarpanel-contentbox {
   list-style-image: url("chrome://communicator/skin/icons/lock-broken.png");
   background-color: #E83404;
 }
 
-#security-button[label] > .statusbarpanel-icon,
-#security-button > .statusbarpanel-text {
-  margin: 0px;
+#security-button[label] > .statusbarpanel-contentbox {
   background-color: #62C441;
+}
+
+#security-button > .statusbarpanel-contentbox > .statusbarpanel-text {
+  margin: 0px;
   color: #FFFFFF;
+  text-shadow: none;
+}
+
+/* make same background-color translucent on lwthemes */
+#security-button[level="high"] > .statusbarpanel-contentbox:-moz-lwtheme,
+#security-button[level="low"] > .statusbarpanel-contentbox:-moz-lwtheme {
+  background-color: rgba(232, 219, 153, .8);
+}
+
+#security-button[level="broken"] > .statusbarpanel-contentbox:-moz-lwtheme {
+  background-color: rgba(232, 52, 4, .8);
+}
+
+#security-button[label] > .statusbarpanel-contentbox:-moz-lwtheme {
+  background-color: rgba(98, 196, 65, .8);
 }
 
 #ev-button {

suite/themes/classic/navigator/navigator.css

@@ -451,27 +451,44 @@ toolbar[mode="icons"] #search-button > .button-box > .button-text {
   min-width: 1px;
 }
 
-#security-button > .statusbarpanel-icon {
+#security-button {
   list-style-image: url("chrome://communicator/skin/icons/lock-insecure.png");
 }
 
 /* |high| and |low| styles could be different, to better reflect the secure level... */
-#security-button[level="high"] > .statusbarpanel-icon,
-#security-button[level="low"] > .statusbarpanel-icon {
+#security-button[level="high"] > .statusbarpanel-contentbox,
+#security-button[level="low"] > .statusbarpanel-contentbox {
   list-style-image: url("chrome://communicator/skin/icons/lock-secure.png");
   background-color: #E8DB99;
 }
 
-#security-button[level="broken"] > .statusbarpanel-icon {
+#security-button[level="broken"] > .statusbarpanel-contentbox {
   list-style-image: url("chrome://communicator/skin/icons/lock-broken.png");
   background-color: #E83404;
 }
 
-#security-button[label] > .statusbarpanel-icon,
-#security-button > .statusbarpanel-text {
-  margin: 0px;
+#security-button[label] > .statusbarpanel-contentbox {
   background-color: #62C441;
+}
+
+#security-button > .statusbarpanel-contentbox > .statusbarpanel-text {
+  margin: 0px;
   color: #FFFFFF;
+  text-shadow: none;
+}
+
+/* make same background-color translucent on lwthemes */
+#security-button[level="high"] > .statusbarpanel-contentbox:-moz-lwtheme,
+#security-button[level="low"] > .statusbarpanel-contentbox:-moz-lwtheme {
+  background-color: rgba(232, 219, 153, .8);
+}
+
+#security-button[level="broken"] > .statusbarpanel-contentbox:-moz-lwtheme {
+  background-color: rgba(232, 52, 4, .8);
+}
+
+#security-button[label] > .statusbarpanel-contentbox:-moz-lwtheme {
+  background-color: rgba(98, 196, 65, .8);
 }
 
 #ev-button {

suite/themes/modern/communicator/toolbar.css

@@ -132,3 +132,15 @@ toolbar[labelalign="end"] .toolbarbutton-1 .toolbarbutton-text {
 .toolbar-primary > toolbarpaletteitem > toolbarseparator {
   margin: 0px 8px;
 }
+
+/* ::::: solid background status bar panel ::::: */
+
+.statusbarpanel-backgroundbox {
+  -moz-box-align: stretch;
+  padding: 0px;
+}
+
+.statusbarpanel-backgroundbox > .statusbarpanel-contentbox {
+  padding: 0px 4px;
+  -moz-box-align: center;
+}

suite/themes/modern/navigator/navigator.css

@@ -701,26 +701,28 @@ toolbarpaletteitem[place="palette"] > #personal-bookmarks > .bookmarks-toolbar-i
   min-width: 1px;
 }
 
-#security-button > .statusbarpanel-icon {
+#security-button {
   list-style-image: url("chrome://communicator/skin/icons/lock-insecure.png");
 }
 
 /* |high| and |low| styles could be different, to better reflect the secure level... */
-#security-button[level="high"] > .statusbarpanel-icon,
-#security-button[level="low"] > .statusbarpanel-icon {
+#security-button[level="high"] > .statusbarpanel-contentbox,
+#security-button[level="low"] > .statusbarpanel-contentbox {
   list-style-image: url("chrome://communicator/skin/icons/lock-secure.png");
   background-color: #E8DB99;
 }
 
-#security-button[level="broken"] > .statusbarpanel-icon {
+#security-button[level="broken"] > .statusbarpanel-contentbox {
   list-style-image: url("chrome://communicator/skin/icons/lock-broken.png");
   background-color: #E83404;
 }
 
-#security-button[label] > .statusbarpanel-icon,
-#security-button > .statusbarpanel-text {
-  margin: 0px;
+#security-button[label] > .statusbarpanel-contentbox {
   background-color: #62C441;
+}
+
+#security-button > .statusbarpanel-contentbox > .statusbarpanel-text {
+  margin: 0px;
   color: #FFFFFF;
 }