# HG changeset patch
# User Matt A. Tobin <email@mattatobin.com>
# Date 1723983554 18000
# Node ID b25cde2bc58db09655126f47acc2c664a8881a24
# Parent  1bc1ec596fff635582e3179c4f8bfcc5bdc0855d
Bug 9999999 - Enhance the urlbar and statusbar security ux style

diff --git a/suite/browser/navigator.xul b/suite/browser/navigator.xul
--- a/suite/browser/navigator.xul
+++ b/suite/browser/navigator.xul
@@ -586,13 +586,13 @@
                     oncommand="zoomIn();"
                     tooltiptext="&zoomIn.tooltiptext;"/>
     <statusbarpanel id="popupIcon" class="statusbarpanel-iconic" hidden="true"
                     oncommand="StatusbarViewPopupManager()"
                     tooltiptext="&popupIcon.tooltiptext;"
                     context="popupBlockerMenu"/>
     <statusbarpanel class="statusbarpanel-iconic" id="offline-status"/>
     <statusbarpanel class="statusbarpanel-backgroundbox"
-                    id="security-button" dir="reverse"
+                    id="security-button"
                     context="security-context-menu"
                     oncommand="BrowserPageInfo(null, 'securityTab')"/>
   </statusbar>
 </window>
diff --git a/suite/browser/nsBrowserStatusHandler.js b/suite/browser/nsBrowserStatusHandler.js
--- a/suite/browser/nsBrowserStatusHandler.js
+++ b/suite/browser/nsBrowserStatusHandler.js
@@ -358,75 +358,97 @@ nsBrowserStatusHandler.prototype =
   onStatusChange : function(aWebProgress, aRequest, aStatus, aMessage)
   {
     this.status = aMessage;
     this.updateStatusField();
   },
 
   onSecurityChange : function(aWebProgress, aRequest, aState)
   {
-    const wpl = Ci.nsIWebProgressListener;
-    const wpl_security_bits = wpl.STATE_IS_SECURE |
-                              wpl.STATE_IS_BROKEN |
-                              wpl.STATE_IS_INSECURE;
+    const wpl = Components.interfaces.nsIWebProgressListener;
+    const wpl_security_bits = wpl.STATE_IS_SECURE | wpl.STATE_IS_BROKEN | wpl.STATE_IS_INSECURE;
+    const nsISSLStatusProvider = Components.interfaces.nsISSLStatusProvider;
+    const browser = getBrowser();
+
+    const sslStatus = browser.securityUI
+                             .QueryInterface(nsISSLStatusProvider)
+                             .SSLStatus;
+
+    const idn = Components.classes["@mozilla.org/network/idn-service;1"]
+                          .getService(Components.interfaces.nsIIDNService);
+   
+    var highlightSecure = Services.prefs.getBoolPref("browser.urlbar.highlight.secure", true);
 
-    var highlightSecure =
-      Services.prefs.getBoolPref("browser.urlbar.highlight.secure");
+    var securityButtonTooltip = gNavigatorBundle.getString("securityButtonTooltipInsecure");
+    var securityButtonLabel = null;
+    var securityLevel = null;
+
+    var host = null;
+
+    if (['http', 'https'].includes(browser.currentURI.scheme)) { 
+      host = getBrowser().currentURI.host;
+
+      try {
+        host = idn.convertToDisplayIDN(Services.eTLD.getBaseDomainFromHost(host), {});
+      } catch (ex) {}
+    }
+    
 
     /* aState is defined as a bitmask that may be extended in the future.
      * We filter out any unknown bits before testing for known values.
      */
     switch (aState & wpl_security_bits) {
       case wpl.STATE_IS_SECURE:
-        const nsISSLStatusProvider = Ci.nsISSLStatusProvider;
-        var cert = getBrowser().securityUI.QueryInterface(nsISSLStatusProvider)
-                               .SSLStatus.serverCert;
-        var issuerName = cert.issuerOrganization ||
-                         cert.issuerCommonName || cert.issuerName;
-        this.securityButton.setAttribute("tooltiptext",
-          gNavigatorBundle.getFormattedString("securityButtonTooltipSecure",
-                                              [issuerName]));
-        this.securityButton.setAttribute("level", "high");
-        if (highlightSecure)
-          this.urlBar.setAttribute("level", "high");
-        else
-          this.urlBar.removeAttribute("level");
+        securityLevel = "high";
+        var issuerName = sslStatus.serverCert.issuerOrganization ||
+                         sslStatus.serverCert.issuerCommonName ||
+                         sslStatus.serverCert.issuerName;
+        securityButtonTooltip = gNavigatorBundle.getFormattedString("securityButtonTooltipSecure",
+                                                                    [issuerName]);
         break;
       case wpl.STATE_IS_BROKEN:
-        this.securityButton.setAttribute("tooltiptext",
-          gNavigatorBundle.getString("securityButtonTooltipMixedContent"));
-        this.securityButton.setAttribute("level", "broken");
-        if (highlightSecure)
-          this.urlBar.setAttribute("level", "broken");
-        else
-          this.urlBar.removeAttribute("level");
+        securityLevel = "broken";
+        securityButtonTooltip = gNavigatorBundle.getString("securityButtonTooltipMixedContent");
         break;
       case wpl.STATE_IS_INSECURE:
       default:
-        this.securityButton.setAttribute("tooltiptext",
-          gNavigatorBundle.getString("securityButtonTooltipInsecure"));
-        this.securityButton.removeAttribute("level");
-        this.urlBar.removeAttribute("level");
+        securityLevel = null;
         break;
     }
 
     if (aState & wpl.STATE_IDENTITY_EV_TOPLEVEL) {
-      var organization =
-        getBrowser().securityUI
-                    .QueryInterface(Ci.nsISSLStatusProvider)
-                    .SSLStatus
-                    .QueryInterface(Ci.nsISSLStatus)
-                    .serverCert.organization;
-      this.securityButton.setAttribute("label", organization);
-      this.evButton.setAttribute("tooltiptext", organization);
-      this.evButton.hidden = false;
-    } else {
-      this.securityButton.removeAttribute("label");
-      this.evButton.hidden = true;
+      if (securityLevel != "broken") {
+        securityLevel = "ultra";
+      }
+
+      securityButtonLabel = sslStatus.serverCert.organization;
+    }
+    else {
+      if (securityLevel && host) {
+        securityButtonLabel = idn.convertUTF8toACE(host);
+      }
     }
+
+    // Set the level on the urlbar and security button
+    if (securityLevel) {
+      this.securityButton.setAttribute("level", securityLevel);
+      highlightSecure ? this.urlBar.setAttribute("level", securityLevel)
+                      : this.urlBar.removeAttribute("level");
+    }
+    else {
+        this.securityButton.removeAttribute("level");
+        this.urlBar.removeAttribute("level");
+    }
+
+    // Set the tooltip of the security button
+    this.securityButton.setAttribute("tooltiptext", securityButtonTooltip);
+
+    // Set the label of the security button
+    securityButtonLabel ? this.securityButton.setAttribute("label", securityButtonLabel)
+                        : this.securityButton.removeAttribute("label");
   },
 
   startDocumentLoad : function(aRequest)
   {
     var uri = aRequest.QueryInterface(Ci.nsIChannel).originalURI;
 
     // clear out search-engine data
     getBrowser().selectedBrowser.engines = null;
diff --git a/suite/themes/classic/navigator/navigator.css b/suite/themes/classic/navigator/navigator.css
--- a/suite/themes/classic/navigator/navigator.css
+++ b/suite/themes/classic/navigator/navigator.css
@@ -248,19 +248,33 @@ toolbar[mode="text"] > #window-controls 
   
 /* ::::: nav-bar-inner ::::: */
   
 .nav-bar-class {
   -moz-box-align: center;
   min-width: 0px;
 }
 
+.urlbar-security-level[level="high"],
+.urlbar-security-level[level="ultra"],
+.urlbar-security-level[level="broken"] {
+  box-shadow: none;
+    color: #000000;
+}
+
 .urlbar-security-level[level="high"] {
   background-color: #FFFFC7;
-  color: #000000;
+}
+
+.urlbar-security-level[level="ultra"] {
+  background-color: #d2ffc7;
+}
+
+.urlbar-security-level[level="broken"] {
+  background-color: #ffc7c7;
 }
 
 @media (-moz-os-version: windows-win7) and (-moz-windows-theme: aero),
        (-moz-os-version: windows-win8),
        (-moz-os-version: windows-win10) {
   #urlbar {
     padding: 1px;
   }
@@ -564,32 +578,47 @@ toolbar[mode="icons"] #search-button > .
 
 /* ::::: content area ::::: */
 
 #status-bar {
   border-top: none;
   min-width: 1px;
 }
 
+#security-button {
+  list-style-image: url("chrome://communicator/skin/icons/lock-insecure.png");
+  margin-top: 2px;
+}
+
+#security-button[level="high"] > .statusbarpanel-contentbox,
+#security-button[level="ultra"] > .statusbarpanel-contentbox {
+  list-style-image: url("chrome://communicator/skin/icons/lock-secure.png");
+}
+
 #security-button[level="high"] > .statusbarpanel-contentbox {
-  background-color: #B4CD32;
+  background-color: #FFFFC7;
+}
+
+#security-button[level="ultra"] > .statusbarpanel-contentbox {
+  background-color: #d2ffc7;
 }
 
 #security-button[level="broken"] > .statusbarpanel-contentbox {
-  background-color: #E83404;
-}
-
-#security-button[label] > .statusbarpanel-contentbox {
-  background-color: #62C441;
+  list-style-image: url("chrome://communicator/skin/icons/lock-broken.png");
+  background-color: #ffc7c7;
 }
 
 #security-button > .statusbarpanel-contentbox > .statusbarpanel-text {
   margin: 0px;
-  color: #FFFFFF;
-  text-shadow: none;
+}
+
+#security-button > .statusbarpanel-contentbox > .statusbarpanel-text[value] {
+  padding-left: 2px;
+  padding-right: 4px;
+  font-weight: bold;
 }
 
 /* make same background-color translucent on lwthemes */
 #security-button[level="high"] > .statusbarpanel-contentbox:-moz-lwtheme {
   background-color: rgba(232, 219, 153, .8);
 }
 
 #security-button[level="broken"] > .statusbarpanel-contentbox:-moz-lwtheme {
diff --git a/suite/themes/modern/navigator/navigator.css b/suite/themes/modern/navigator/navigator.css
--- a/suite/themes/modern/navigator/navigator.css
+++ b/suite/themes/modern/navigator/navigator.css
@@ -466,19 +466,32 @@ toolbar[mode="icons"] #search-button > .
   -moz-border-top-colors: #A2AFBD #000000 #A7BACA;
   -moz-border-right-colors: #D2DAE1 #000000 #768C9F;
   -moz-border-bottom-colors: #D2DAE1 #000000 #768C9F;
   -moz-border-left-colors: #A5ACB5 #000000 #A7BACA;
   background-color: #EDF5F7;
   box-shadow: inset 0px -2px #E9F3F6;
 }
 
+#urlbar[level="high"],
+#urlbar[level="ultra"],
+#urlbar[level="broken"] {
+  box-shadow: none;
+}
+
 #urlbar[level="high"] {
   background-color: #E8DB99;
-  box-shadow: none;
+}
+
+#urlbar[level="ultra"] {
+  background-color: #a4e89a;
+}
+
+#urlbar[level="broken"] {
+  background-color: #e89a9a;
 }
 
 #urlbar-search-splitter {
   min-width: 6px;
   margin: 0 -3px;
   border: none;
   background-color: transparent;
 }
@@ -840,31 +853,46 @@ toolbar[mode="text"] toolbarbutton.chevr
   border-bottom: 1px solid #494F5D;
 }
 
 #status-bar {
   border-top: none;
   min-width: 1px;
 }
 
+#security-button {
+  list-style-image: url("chrome://communicator/skin/icons/lock-insecure.png");
+}
+
+#security-button[level="high"] > .statusbarpanel-contentbox,
+#security-button[level="ultra"] > .statusbarpanel-contentbox {
+  list-style-image: url("chrome://communicator/skin/icons/lock-secure.png");
+}
+
 #security-button[level="high"] > .statusbarpanel-contentbox {
-  background-color: #B4CD32;
+  background-color: #E8DB99;
+}
+
+#security-button[level="ultra"] > .statusbarpanel-contentbox {
+  background-color: #a4e89a;
 }
 
 #security-button[level="broken"] > .statusbarpanel-contentbox {
-  background-color: #E83404;
-}
-
-#security-button[label] > .statusbarpanel-contentbox {
-  background-color: #62C441;
+  list-style-image: url("chrome://communicator/skin/icons/lock-broken.png");
+  background-color: #e89a9a;
 }
 
 #security-button > .statusbarpanel-contentbox > .statusbarpanel-text {
   margin: 0px;
-  color: #FFFFFF;
+}
+
+#security-button > .statusbarpanel-contentbox > .statusbarpanel-text[value] {
+  padding-left: 2px;
+  padding-right: 4px;
+  font-weight: bold;
 }
 
 #ev-button {
   list-style-image: url("chrome://communicator/skin/icons/identity.png");
 }
 
 #popupIcon {
   list-style-image: url("chrome://navigator/skin/icons/popup-blocked.png");
