Clean up visual presentation of identity popup & button (Larry). b=406612 r=gavin a=beltzner late-l10n

browser/app/profile/firefox.js

@@ -657,6 +657,12 @@ pref("places.frecency.unvisitedTypedBonus", 200);
 // 2 - pre-populate site URL and pre-fetch certificate
 pref("browser.ssl_override_behavior", 1);
 
+// Controls the display of domain in the identity box for SSL connections.
+// 0 - do not show domain
+// 1 - show effectiveTLD + 1 (e.g. mozilla.org)
+// 2 - show full domain (e.g. bugzilla.mozilla.org)
+pref("browser.identity.ssl_domain_display", 0);
+
 // replace newlines with spaces when pasting into <input type="text"> fields
 pref("editor.singleLine.pasteNewlines", 2);
 

browser/base/content/browser.css

@@ -31,10 +31,6 @@ menuitem.spell-suggestion {
   -moz-user-focus: normal;
 }
 
-.verifiedDomain > hbox > #identity-icon-label {
-  display: none;
-}
-
 /* apply Fitts' law to the notification bar's close button */
 window[sizemode="maximized"] #content .notification-inner {
   border-right: 0px !important;

browser/base/content/browser.js

@@ -5757,15 +5757,12 @@ function IdentityHandler() {
   this._stringBundle = document.getElementById("bundle_browser");
   this._staticStrings = {};
   this._staticStrings[this.IDENTITY_MODE_DOMAIN_VERIFIED] = {
-    title: this._stringBundle.getString("identity.domainverified.title"),
     encryption_label: this._stringBundle.getString("identity.encrypted")  
   };
   this._staticStrings[this.IDENTITY_MODE_IDENTIFIED] = {
-    title: this._stringBundle.getString("identity.identified.title"),
     encryption_label: this._stringBundle.getString("identity.encrypted")
   };
   this._staticStrings[this.IDENTITY_MODE_UNKNOWN] = {
-    title: this._stringBundle.getString("identity.unknown.title"),
     encryption_label: this._stringBundle.getString("identity.unencrypted")  
   };
 
@@ -5790,8 +5787,8 @@ IdentityHandler.prototype = {
     this._identityPopup = document.getElementById("identity-popup");
     this._identityBox = document.getElementById("identity-box");
     this._identityPopupContentBox = document.getElementById("identity-popup-content-box");
-    this._identityPopupTitle = document.getElementById("identity-popup-title");
-    this._identityPopupContent = document.getElementById("identity-popup-content");
+    this._identityPopupContentHost = document.getElementById("identity-popup-content-host");
+    this._identityPopupContentOwner = document.getElementById("identity-popup-content-owner");
     this._identityPopupContentSupp = document.getElementById("identity-popup-content-supplemental");
     this._identityPopupContentVerif = document.getElementById("identity-popup-content-verifier");
     this._identityPopupEncLabel = document.getElementById("identity-popup-encryption-label");
@@ -5837,6 +5834,7 @@ IdentityHandler.prototype = {
     
     // Human readable name of Certificate Authority
     result.caOrg =  cert.issuerOrganization || cert.issuerCommonName;
+    result.cert = cert;
     
     return result;
   },
@@ -5897,10 +5895,43 @@ IdentityHandler.prototype = {
       // typically what we want here, but thanks to x509 certs being extensible,
       // it's not the only place you have to check, there can be more than one domain,
       // et cetera, ad nauseum.  We know the cert is valid for location.host, so
-      // let's just use that, it's what the status bar does too.
-      var icon_label = this._lastHost; 
+      // let's just use that. Check the pref to determine how much of the verified
+      // hostname to show
+      var icon_label = "";
+      switch (gPrefService.getIntPref("browser.identity.ssl_domain_display")) {
+        case 2 : // Show full domain
+          icon_label = this._lastHost;
+          break;
+        case 1 : // Show eTLD.  Cache eTLD service the first time we need it.
+          if (!this._eTLDService)
+            this._eTLDService = Cc["@mozilla.org/network/effective-tld-service;1"]
+                                .getService(Ci.nsIEffectiveTLDService);
+          try {
+            icon_label = this._eTLDService.getBaseDomainFromHost(this._lastHost);
+          } catch (e) {
+            // If something goes wrong (e.g. _lastHost is an IP address) just fail back
+            // to the full domain.
+            icon_label = this._lastHost;
+          }
+      }
+      
+      // We need a port number for all lookups.  If one hasn't been specified, use
+      // the https default
+      var lookupHost = this._lastHost;
+      if (lookupHost.indexOf(':') < 0)
+        lookupHost += ":443";
+
+      // Cache the override service the first time we need to check it
+      if (!this._overrideService)
+        this._overrideService = Components.classes["@mozilla.org/security/certoverride;1"]
+                                          .getService(Components.interfaces.nsICertOverrideService);
+
+      // Verifier is either the CA Org, for a normal cert, or a special string
+      // for certs that are trusted because of a security exception.
       var tooltip = this._stringBundle.getFormattedString("identity.identified.verifier",
                                                           [iData.caOrg]);
+      if (this._overrideService.hasMatchingOverride(lookupHost, iData.cert, {}, {}))
+        tooltip = this._stringBundle.getString("identity.identified.verified_by_you");
     }
     else if (newMode == this.IDENTITY_MODE_IDENTIFIED) {
       // If it's identified, then we can populate the dialog with credentials
@@ -5914,7 +5945,7 @@ IdentityHandler.prototype = {
         icon_label = iData.subjectOrg;
     }
     else {
-      tooltip = this._stringBundle.getString("identity.unknown.body");
+      tooltip = this._stringBundle.getString("identity.unknown.tooltip");
       icon_label = "";
     }
     
@@ -5936,30 +5967,42 @@ IdentityHandler.prototype = {
     this._identityPopupContentBox.className = newMode;
     
     // Set the static strings up front
-    this._identityPopupTitle.value = this._staticStrings[newMode].title;
     this._identityPopupEncLabel.textContent = this._staticStrings[newMode].encryption_label;
     
     // Initialize the optional strings to empty values
     var supplemental = "";
     var verifier = "";
       
+    // Cache eTLD service if we haven't yet
+    if (!this._eTLDService)
+      this._eTLDService = Cc["@mozilla.org/network/effective-tld-service;1"]
+                          .getService(Ci.nsIEffectiveTLDService);
+                                
     if (newMode == this.IDENTITY_MODE_DOMAIN_VERIFIED) {
       var iData = this.getIdentityData();
 
-      var body = this._lastHost;     
-      verifier = this._stringBundle.getFormattedString("identity.identified.verifier",
-                                                       [iData.caOrg]);
-      supplemental = this._stringBundle.getString("identity.domainverified.supplemental");
+      try {
+        var host = this._eTLDService.getBaseDomainFromHost(this._lastHost);
+      } catch (e) {
+        // Fail back to the full domain.
+        host = this._lastHost;
+      }
+      var owner = this._stringBundle.getString("identity.ownerUnknown");
+      verifier = this._identityBox.tooltipText;
+      supplemental = "";
     }
     else if (newMode == this.IDENTITY_MODE_IDENTIFIED) {
       // If it's identified, then we can populate the dialog with credentials
       iData = this.getIdentityData();
 
-      // Pull the basics out with fallback options in case common
-      // (optional) fields are left blank
-      body = iData.subjectOrg; 
-      verifier = this._stringBundle.getFormattedString("identity.identified.verifier",
-                                                       [iData.caOrg]);
+      try {
+        host = this._eTLDService.getBaseDomainFromHost(this._lastHost);
+      } catch (e) {
+        // Fail back to the full domain.
+        host = this._lastHost;
+      }
+      owner = iData.subjectOrg; 
+      verifier = this._identityBox.tooltipText;
 
       // Build an appropriate supplemental block out of whatever location data we have
       if (iData.city)
@@ -5973,11 +6016,14 @@ IdentityHandler.prototype = {
         supplemental += iData.country;
     }
     else {
-      body = this._stringBundle.getString("identity.unknown.body");
+      // These strings will be hidden in CSS anyhow
+      host = "";
+      owner = "";
     }
     
     // Push the appropriate strings out to the UI
-    this._identityPopupContent.textContent = body;
+    this._identityPopupContentHost.textContent = host;
+    this._identityPopupContentOwner.textContent = owner;
     this._identityPopupContentSupp.textContent = supplemental;
     this._identityPopupContentVerif.textContent = verifier;
   },

browser/base/content/browser.xul

@@ -152,10 +152,12 @@
       <hbox id="identity-popup-container" align="top">
         <image id="identity-popup-icon"/>
         <vbox id="identity-popup-content-box">
-          <!-- Title Bar -->
-          <label id="identity-popup-title" control="identity-popup"/>
-          <!-- Content area -->
-          <description id="identity-popup-content"/>
+          <label id="identity-popup-connectedToLabel" value="&identity.connectedTo;"/>
+          <label id="identity-popup-connectedToLabel2"
+                 value="&identity.unverifiedsite;"/>
+          <description id="identity-popup-content-host"/>
+          <label id="identity-popup-runByLabel" value="&identity.runBy;"/>
+          <description id="identity-popup-content-owner"/>
           <description id="identity-popup-content-supplemental"/>
           <description id="identity-popup-content-verifier"/>
           <hbox id="identity-popup-encryption" flex="1">

browser/locales/en-US/chrome/browser/browser.dtd

@@ -355,6 +355,21 @@
 <!ENTITY editBookmark.done.label                      "Done">
 <!ENTITY editBookmark.delete.label                    "Delete">
 
-<!ENTITY identity.moreInfoLinkText "Tell me more about this web site…">
+<!ENTITY identity.unverifiedsite "You are connected to an unverified site.">
+<!ENTITY identity.connectedTo "You are connected to">
+<!-- Localization note (identity.runBy) : This string appears between a
+domain name (above) and an organization name (below). E.g.
+
+example.com
+which is run by
+Example Enterprises, Inc.
+
+The layout of the identity dialog prevents combining this into a single string with
+substitution variables.  If it is difficult to translate the sense of the string
+with that structure, consider a translation which ignores the preceding domain and
+just addresses the organization to follow, e.g. "This site is run by " -->
+<!ENTITY identity.runBy "which is run by">
+
+<!ENTITY identity.moreInfoLinkText "More Information…">
 
 <!ENTITY downloadMonitor2.tooltip "Click to open downloads window">

browser/locales/en-US/chrome/browser/browser.properties

@@ -101,23 +101,18 @@ offlineApps.available=This website (%S) is offering to store data on your comput
 offlineApps.allow=Allow
 offlineApps.allowAccessKey=A
 
-# Identity information
-identity.domainverified.title=Location Verified
-identity.domainverified.body=You are currently visiting:
-identity.domainverified.supplemental=Information identifying the owner of this web site may not have been validated.
-
-identity.identified.title=Identity Verified
-identity.identified.body=This web site is owned by:
 identity.identified.verifier=Verified by: %S
+identity.identified.verified_by_you=You have added a security exception for this site
 identity.identified.state_and_country=%S, %S
 identity.identified.title_with_country=%S (%S)
 
-identity.unknown.title=Identity Unknown
-identity.unknown.body=This web site does not supply identity information.
-
 identity.encrypted=Your connection to this web site is encrypted to prevent eavesdropping.
 identity.unencrypted=Your connection to this web site is not encrypted.
 
+identity.unknown.tooltip=This web site does not supply identity information.
+
+identity.ownerUnknown=(no information provided)
+
 # Downloads Monitor Panel
 # LOCALIZATION NOTE (activeDownloads, pausedDownloads): Semi-colon list of plural
 # forms. See: http://developer.mozilla.org/en/docs/Localization_and_Plurals

browser/themes/gnomestripe/browser/browser.css

@@ -835,22 +835,22 @@ toolbar[iconsize="small"] #paste-button[disabled="true"] {
 #identity-icon-label {
   padding: 0 2px;
   margin: 0;
+  font-size: 90%;
+}
+
+#identity-icon-label[value=""] {
+    display: none;
 }
 
 #identity-box.verifiedIdentity > hbox {
   background-color: rgba(0, 255, 0, 0.25);
 }
 
-#identity-box.unknownIdentity > hbox > #identity-icon-label {
-  display: none;
-}
-
 /* Identity popup icons */
 #identity-popup-icon {
   height: 64px;
   width: 64px;
   padding: 0;
-  margin: 10px 0 0;
   list-style-image: url("chrome://browser/skin/identity.png");
   -moz-image-region: rect(0px, 64px, 64px, 0px);
 }
@@ -863,58 +863,57 @@ toolbar[iconsize="small"] #paste-button[disabled="true"] {
   -moz-image-region: rect(128px, 64px, 192px, 0px);
 }
 
-/* Identity popup title */
-#identity-popup-title {
-  font-size: 120%;
-  font-weight: bold;
-}
-
-.verifiedIdentity > #identity-popup-title {
-  color: #6A6;
-}
-
-.unknownIdentity > #identity-popup-title {
-  color: #999;
-}
-
-.verifiedDomain > #identity-popup-title {
-  color: black;
-}
-
 /* Identity popup body text */
+.unknownIdentity > #identity-popup-connectedToLabel,
+.unknownIdentity > #identity-popup-runByLabel,
+.unknownIdentity > #identity-popup-content-host,
+.unknownIdentity > #identity-popup-content-owner {
+    display: none;
+}
+
+.verifiedIdentity > #identity-popup-connectedToLabel2,
+.verifiedDomain > #identity-popup-connectedToLabel2 {
+    display: none;
+}
+
 #identity-popup-content-box > description,
 #identity-popup-encryption-label {
   white-space: -moz-pre-wrap;
   color: black;
-  padding-left: 10px;
-  margin-left: 0;
+  padding-left: 15px;
+  margin: 2px 0 4px;
 }
 
 #identity-popup-content-box > label {
   white-space: -moz-pre-wrap;
-  margin-left: 0;
-  padding-left: 10px;
+  padding-left: 15px;
+  margin: 0;
 }
 
-#identity-popup-content {
-  padding-top: 5px;
-  margin-bottom: 0;
-  max-width: 200px;
+#identity-popup-content-host {
+   font-weight: bold;
+   max-width: 300px;
 }
 
-.verifiedIdentity > #identity-popup-content,
-.verifiedDomain > #identity-popup-content {
-  font-size: 140%;
-  font-weight: bold;
-  max-width: 300px;
+#identity-popup-content-owner {
+   font-weight: bold;
+   max-width: 300px;
+   margin-bottom: 0 !important;
 }
 
-#identity-popup-encryption {
-  padding: 10px 0;
+.verifiedIdentity > #identity-popup-content-owner,
+.verifiedIdentity > #identity-popup-content-host,
+.verifiedDomain > #identity-popup-content-host {
+   font-size: 140%;
+}
+
+#identity-popup-content-verifier {
+  margin: 4px 0 2px;
 }
 
 .verifiedIdentity > #identity-popup-encryption,
 .verifiedDomain > #identity-popup-encryption {
+  margin-top: 10px;
   margin-left: -18px;
 }
 

browser/themes/pinstripe/browser/browser.css

@@ -1333,21 +1333,42 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
     color: black;
     padding: 4px 6px;
     -moz-padding-end: 16px;
+    background: url("chrome://browser/skin/urlbar/startcap-secure-end.png") no-repeat top right;
+}
+
+#identity-box.verifiedIdentity > hbox > #identity-icon-label {
     background: url("chrome://browser/skin/urlbar/startcap-verified-end.png") no-repeat top right;
 }
 
+#identity-icon-label[value=""] {
+    padding: 4px 0;
+    -moz-padding-end: 16px;
+}
+
+#identity-box.verifiedDomain {
+  background-image: url("chrome://browser/skin/urlbar/startcap-secure-start.png") !important;
+  -moz-padding-start: 10px;
+}
+
 #identity-box.verifiedIdentity {
   background-image: url("chrome://browser/skin/urlbar/startcap-verified-start.png") !important;
   -moz-padding-start: 10px;
 }
 
+#identity-box.verifiedDomain > hbox {
+  padding: 0;
+  background: url("chrome://browser/skin/urlbar/startcap-secure-mid.png") repeat-x !important;
+  -moz-box-pack: center;
+}
+
 #identity-box.verifiedIdentity > hbox {
   padding: 0;
   background: url("chrome://browser/skin/urlbar/startcap-verified-mid.png") repeat-x !important;
   -moz-box-pack: center;
 }
 
-#identity-box.verifiedIdentity > hbox > #page-proxy-deck {
+#identity-box.verifiedIdentity > hbox > #page-proxy-deck,
+#identity-box.verifiedDomain > hbox > #page-proxy-deck {
   -moz-margin-start: 0;
 }
 
@@ -1361,7 +1382,6 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
     height: 64px;
     width: 64px;
     padding: 0;
-    margin: 10px 0 0;
     list-style-image: url("chrome://browser/skin/identity.png");
     -moz-image-region: rect(0px, 64px, 64px, 0px);
 }
@@ -1374,57 +1394,58 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
     -moz-image-region: rect(128px, 64px, 192px, 0px);
 }
 
-/* Popup Title */
-#identity-popup-title {
-    font-size: 120%;
-    font-weight: bold;
-}
-
-.verifiedIdentity > #identity-popup-title {
-    color: #6A6;
-}
-
-.unknownIdentity > #identity-popup-title {
-    color: #999;
-}
-
-.verifiedDomain > #identity-popup-title {
-    color: black;
-}
-
 /* Popup Body Text */
+.unknownIdentity > #identity-popup-connectedToLabel,
+.unknownIdentity > #identity-popup-runByLabel,
+.unknownIdentity > #identity-popup-content-host,
+.unknownIdentity > #identity-popup-content-owner {
+    display: none;
+}
+
+.verifiedIdentity > #identity-popup-connectedToLabel2,
+.verifiedDomain > #identity-popup-connectedToLabel2 {
+    display: none;
+}
+
 #identity-popup-content-box > description,
 #identity-popup-encryption-label {
     white-space: -moz-pre-wrap;
     color: black;
-    padding-left: 10px;
+    padding-left: 15px;
+    margin: 2px 0 4px;
 }
 
 #identity-popup-content-box > label {
     white-space: -moz-pre-wrap;
     margin-left: 0;
-    padding-left: 10px;
+    padding-left: 15px;
+    margin: 0;
 }
 
-#identity-popup-content {
-    padding-top: 5px;
-    margin-bottom: 0;
-    max-width: 200px;
-}
-
-.verifiedIdentity > #identity-popup-content,
-.verifiedDomain > #identity-popup-content {
-   font-size: 140%;
+#identity-popup-content-host {
    font-weight: bold;
    max-width: 300px;
 }
 
-#identity-popup-encryption {
-  padding: 10px 0;
+#identity-popup-content-owner {
+   font-weight: bold;
+   max-width: 300px;
+   margin-bottom: 0 !important;
+}
+
+.verifiedIdentity > #identity-popup-content-owner,
+.verifiedIdentity > #identity-popup-content-host,
+.verifiedDomain > #identity-popup-content-host {
+   font-size: 140%;
+}
+
+#identity-popup-content-verifier {
+  margin: 4px 0 2px;
 }
 
 .verifiedIdentity > #identity-popup-encryption,
 .verifiedDomain > #identity-popup-encryption {
+  margin-top: 10px;
   margin-left: -18px;
 }
 

browser/themes/pinstripe/browser/jar.mn

@@ -105,6 +105,9 @@ classic.jar:
   skin/classic/browser/urlbar/endcap.png                                 (urlbar/endcap.png)
   skin/classic/browser/urlbar/endcap-secure.png                          (urlbar/endcap-secure.png)
   skin/classic/browser/urlbar/startcap.png                               (urlbar/startcap.png)
+  skin/classic/browser/urlbar/startcap-secure-start.png                  (urlbar/startcap-secure-start.png)
+  skin/classic/browser/urlbar/startcap-secure-mid.png                    (urlbar/startcap-secure-mid.png)
+  skin/classic/browser/urlbar/startcap-secure-end.png                    (urlbar/startcap-secure-end.png)
   skin/classic/browser/urlbar/startcap-verified-start.png                (urlbar/startcap-verified-start.png)
   skin/classic/browser/urlbar/startcap-verified-mid.png                  (urlbar/startcap-verified-mid.png)
   skin/classic/browser/urlbar/startcap-verified-end.png                  (urlbar/startcap-verified-end.png)

browser/themes/winstripe/browser/browser.css

@@ -1724,22 +1724,22 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
 #identity-icon-label {
   padding: 0 2px;
   margin: 0;
+  font-size: 90%;
+}
+
+#identity-icon-label[value=""] {
+    display: none;
 }
 
 #identity-box.verifiedIdentity > hbox {
   background-color: rgba(0, 255, 0, 0.25);
 }
 
-#identity-box.unknownIdentity > hbox > #identity-icon-label {
-  display: none;
-}
-
 /* Popup Icons */
 #identity-popup-icon {
     height: 64px;
     width: 64px;
     padding: 0;
-    margin: 10px 0 0;
     list-style-image: url("chrome://browser/skin/identity.png");
     -moz-image-region: rect(0px, 64px, 64px, 0px);
 }
@@ -1752,58 +1752,57 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
     -moz-image-region: rect(128px, 64px, 192px, 0px);
 }
 
-/* Popup Title */
-#identity-popup-title {
-    font-size: 120%;
-    font-weight: bold;
-}
-
-.verifiedIdentity > #identity-popup-title {
-    color: #6A6;
-}
-
-.unknownIdentity > #identity-popup-title {
-    color: #999;
-}
-
-.verifiedDomain > #identity-popup-title {
-    color: black;
-}
-
 /* Popup Body Text */
+.unknownIdentity > #identity-popup-connectedToLabel,
+.unknownIdentity > #identity-popup-runByLabel,
+.unknownIdentity > #identity-popup-content-host,
+.unknownIdentity > #identity-popup-content-owner {
+    display: none;
+}
+
+.verifiedIdentity > #identity-popup-connectedToLabel2,
+.verifiedDomain > #identity-popup-connectedToLabel2 {
+    display: none;
+}
+
 #identity-popup-content-box > description,
 #identity-popup-encryption-label {
     white-space: -moz-pre-wrap;
     color: black;
-    padding-left: 10px;
-    margin-left: 0;
+    padding-left: 15px;
+    margin: 2px 0 4px;
 }
 
 #identity-popup-content-box > label {
     white-space: -moz-pre-wrap;
-    margin-left: 0;
-    padding-left: 10px;
+    padding-left: 15px;
+    margin: 0;
 }
 
-#identity-popup-content {
-    padding-top: 5px;
-    margin-bottom: 0;
-    max-width: 200px;
-}
-
-.verifiedIdentity > #identity-popup-content,
-.verifiedDomain > #identity-popup-content {
-   font-size: 140%;
+#identity-popup-content-host {
    font-weight: bold;
    max-width: 300px;
 }
 
-#identity-popup-encryption {
-  padding: 10px 0;
+#identity-popup-content-owner {
+   font-weight: bold;
+   max-width: 300px;
+   margin-bottom: 0 !important;
+}
+
+.verifiedIdentity > #identity-popup-content-owner,
+.verifiedIdentity > #identity-popup-content-host,
+.verifiedDomain > #identity-popup-content-host {
+   font-size: 140%;
+}
+
+#identity-popup-content-verifier {
+  margin: 4px 0 2px;
 }
 
 .verifiedIdentity > #identity-popup-encryption,
 .verifiedDomain > #identity-popup-encryption {
+  margin-top: 10px;
   margin-left: -18px;
 }