Bug 1146282 - New styling for the host section of the identity panel

From 7496384f93865519159db75588c6be377fd2eb0b Mon Sep 17 00:00:00 2001 r=Gijs
2024-10-08 19:04:45 +00:00 · 2015-06-02 21:15:08 +02:00 · 2015-06-02 21:15:08 +02:00 · e91584a66d
commit e91584a66d
parent 5b2fa1d806
16 changed files with 114 additions and 289 deletions
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@ -6561,23 +6561,6 @@ var gIdentityHandler = {
  _mode : "unknownIdentity",

  // smart getters
-  get _encryptionLabel () {
-    delete this._encryptionLabel;
-    this._encryptionLabel = {};
-    this._encryptionLabel[this.IDENTITY_MODE_DOMAIN_VERIFIED] =
-      gNavigatorBundle.getString("identity.encrypted2");
-    this._encryptionLabel[this.IDENTITY_MODE_IDENTIFIED] =
-      gNavigatorBundle.getString("identity.encrypted2");
-    this._encryptionLabel[this.IDENTITY_MODE_UNKNOWN] =
-      gNavigatorBundle.getString("identity.unencrypted");
-    this._encryptionLabel[this.IDENTITY_MODE_MIXED_DISPLAY_LOADED] =
-      gNavigatorBundle.getString("identity.broken_loaded");
-    this._encryptionLabel[this.IDENTITY_MODE_MIXED_ACTIVE_LOADED] =
-      gNavigatorBundle.getString("identity.mixed_active_loaded2");
-    this._encryptionLabel[this.IDENTITY_MODE_MIXED_DISPLAY_LOADED_ACTIVE_BLOCKED] =
-      gNavigatorBundle.getString("identity.broken_loaded");
-    return this._encryptionLabel;
-  },
  get _identityPopup () {
    delete this._identityPopup;
    return this._identityPopup = document.getElementById("identity-popup");
@ -6591,11 +6574,6 @@ var gIdentityHandler = {
    return this._identityPopupContentBox =
      document.getElementById("identity-popup-content-box");
  },
-  get _identityPopupChromeLabel () {
-    delete this._identityPopupChromeLabel;
-    return this._identityPopupChromeLabel =
-      document.getElementById("identity-popup-chromeLabel");
-  },
  get _identityPopupContentHost () {
    delete this._identityPopupContentHost;
    return this._identityPopupContentHost =
@ -6616,11 +6594,6 @@ var gIdentityHandler = {
    return this._identityPopupContentVerif =
      document.getElementById("identity-popup-content-verifier");
  },
-  get _identityPopupEncLabel () {
-    delete this._identityPopupEncLabel;
-    return this._identityPopupEncLabel =
-      document.getElementById("identity-popup-encryption-label");
-  },
  get _identityIconLabel () {
    delete this._identityIconLabel;
    return this._identityIconLabel = document.getElementById("identity-icon-label");
@ -6938,25 +6911,32 @@ var gIdentityHandler = {
    this._identityPopup.className = newMode;
    this._identityPopupContentBox.className = newMode;

-    // Set the static strings up front
-    this._identityPopupEncLabel.textContent = this._encryptionLabel[newMode];
-
    // Initialize the optional strings to empty values
    let supplemental = "";
    let verifier = "";
    let host = "";
    let owner = "";

+    if (newMode == this.IDENTITY_MODE_CHROMEUI) {
+      let brandBundle = document.getElementById("bundle_brand");
+      host = brandBundle.getString("brandFullName");
+    } else {
+      try {
+        host = this.getEffectiveHost();
+      } catch (e) {
+        // Some URIs might have no hosts.
+        host = this._lastUri.specIgnoringRef;
+      }
+    }
+
    switch (newMode) {
    case this.IDENTITY_MODE_DOMAIN_VERIFIED:
-      host = this.getEffectiveHost();
      verifier = this._identityBox.tooltipText;
      break;
    case this.IDENTITY_MODE_IDENTIFIED: {
      // If it's identified, then we can populate the dialog with credentials
      let iData = this.getIdentityData();
-      host = this.getEffectiveHost();
-      owner = iData.subjectOrg;
+      host = owner = iData.subjectOrg;
      verifier = this._identityBox.tooltipText;

      // Build an appropriate supplemental block out of whatever location data we have
@ -6969,17 +6949,21 @@ var gIdentityHandler = {
        supplemental += iData.state;
      else if (iData.country) // Country only
        supplemental += iData.country;
-      break; }
-    case this.IDENTITY_MODE_CHROMEUI: {
-      let brandBundle = document.getElementById("bundle_brand");
-      let brandShortName = brandBundle.getString("brandShortName");
-      this._identityPopupChromeLabel.textContent = gNavigatorBundle.getFormattedString("identity.chrome",
-                                                                                       [brandShortName]);
-      break; }
+      break;
+    }
+    case this.IDENTITY_MODE_MIXED_DISPLAY_LOADED:
+    case this.IDENTITY_MODE_MIXED_DISPLAY_LOADED_ACTIVE_BLOCKED:
+      supplemental = gNavigatorBundle.getString("identity.broken_loaded");
+      break;
+    case this.IDENTITY_MODE_MIXED_ACTIVE_LOADED:
+      supplemental = gNavigatorBundle.getString("identity.mixed_active_loaded2");
+      break;
    }

-    // Push the appropriate strings out to the UI
-    this._identityPopupContentHost.textContent = host;
+    // Push the appropriate strings out to the UI. Need to use |value| for the
+    // host as it's a <label> that will be cropped if too long. Using
+    // |textContent| would simply wrap the value.
+    this._identityPopupContentHost.value = host;
    this._identityPopupContentOwner.textContent = owner;
    this._identityPopupContentSupp.textContent = supplemental;
    this._identityPopupContentVerif.textContent = verifier;
--- a/browser/components/controlcenter/content/panel.inc.xul
+++ b/browser/components/controlcenter/content/panel.inc.xul
@ -13,37 +13,22 @@
  <hbox id="identity-popup-container" align="top">
    <image id="identity-popup-icon"/>
    <vbox id="identity-popup-content-box">
-      <label id="identity-popup-brandName"
+      <label id="identity-popup-content-host"
+             class="identity-popup-description"
+             crop="end"/>
+      <label id="identity-popup-connection-secure"
             class="identity-popup-label"
-             value="&brandFullName;"/>
-      <label id="identity-popup-chromeLabel"
-             class="identity-popup-label"/>
-      <label id="identity-popup-connectedToLabel"
+             value="&identity.connectionSecure;"/>
+      <label id="identity-popup-connection-not-secure"
             class="identity-popup-label"
-             value="&identity.connectedTo;"/>
-      <label id="identity-popup-connectedToLabel2"
-             class="identity-popup-label"
-             value="&identity.unverifiedsite2;"/>
-      <description id="identity-popup-content-host"
-                   class="identity-popup-description"/>
-      <label id="identity-popup-runByLabel"
-             class="identity-popup-label"
-             value="&identity.runBy;"/>
+             value="&identity.connectionNotSecure;"/>
      <description id="identity-popup-content-owner"
                   class="identity-popup-description"/>
      <description id="identity-popup-content-supplemental"
                   class="identity-popup-description"/>
      <description id="identity-popup-content-verifier"
                   class="identity-popup-description"/>
-      <hbox id="identity-popup-encryption" flex="1">
-        <vbox>
-          <image id="identity-popup-encryption-icon"/>
-        </vbox>
-        <description id="identity-popup-encryption-label" flex="1"
-                     class="identity-popup-description"/>
-      </hbox>
      <vbox id="identity-popup-permissions">
-        <separator class="thin"/>
        <label class="identity-popup-label header"
               value="&identity.permissions;"/>
        <vbox id="identity-popup-permission-list" class="indent"/>
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@ -672,20 +672,8 @@ you can use these alternative items. Otherwise, their values should be empty.  -
 <!ENTITY editBookmark.cancel.label                   "Cancel">
 <!ENTITY editBookmark.removeBookmark.accessKey       "R">

-<!ENTITY identity.unverifiedsite2 "This website does not supply identity information.">
-<!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.connectionSecure "Secure Connection">
+<!ENTITY identity.connectionNotSecure "Connection is Not Secure">

 <!ENTITY identity.moreInfoLinkText2 "More Information">

--- a/browser/locales/en-US/chrome/browser/browser.properties
+++ b/browser/locales/en-US/chrome/browser/browser.properties
@ -329,16 +329,11 @@ 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.encrypted2=The connection to this website is secure.
 identity.broken_loaded=The connection to this website is not fully secure because it contains unencrypted elements (such as images) or the encryption is not strong enough.
 identity.mixed_active_loaded2=This website contains interactive content that isn't encrypted (such as scripts). Other people can view your information or modify the website's behavior.
-identity.unencrypted=Your connection to this website is not encrypted.

 identity.unknown.tooltip=This website does not supply identity information.

-# LOCALIZATION NOTE (identity.chrome): %S is replaced with the brandShortName.
-identity.chrome=This is a secure %S page.
-
 # Edit Bookmark UI
 editBookmarkPanel.pageBookmarkedTitle=Page Bookmarked
 editBookmarkPanel.pageBookmarkedDescription=%S will always remember this page for you.
--- a/browser/themes/linux/Secure.png
+++ b/browser/themes/linux/Secure.png
--- a/browser/themes/linux/controlcenter/panel.css
+++ b/browser/themes/linux/controlcenter/panel.css
@ -20,55 +20,3 @@
 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
  -moz-image-region: rect(128px, 64px, 192px, 0px);
 }
-
-/* Identity popup body text */
-.identity-popup-description {
-  white-space: pre-wrap;
-  -moz-padding-start: 15px;
-  margin: 2px 0 4px;
-}
-
-.identity-popup-label {
-  white-space: pre-wrap;
-  -moz-padding-start: 15px;
-  margin: 0;
-}
-
-#identity-popup-content-host ,
-#identity-popup-content-owner {
-  font-weight: bold;
-  max-width: 300px;
-}
-
-#identity-popup-content-host ,
-#identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
-  font-size: 140%;
-}
-
-#identity-popup-content-owner {
-  margin-bottom: 0 !important;
-}
-
-#identity-popup-content-verifier {
-  margin: 4px 0 2px;
-}
-
-#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
-#identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
-  margin-top: 10px;
-  -moz-margin-start: -18px;
-}
-
-#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
-#identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
-  list-style-image: url("chrome://browser/skin/Secure.png");
-}
-
-#identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
-  padding: 0;
-}
-
-#identity-popup-container {
-  min-width: 280px;
-  padding: 10px;
-}
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@ -97,7 +97,6 @@ browser.jar:
  skin/classic/browser/badge-add-engine.png                 (../shared/search/badge-add-engine.png)
  skin/classic/browser/search-indicator-badge-add.png       (../shared/search/search-indicator-badge-add.png)
  skin/classic/browser/search-history-icon.svg              (../shared/search/history-icon.svg)
-  skin/classic/browser/Secure.png
  skin/classic/browser/Security-broken.png
  skin/classic/browser/setDesktopBackground.css
  skin/classic/browser/slowStartup-16.png
--- a/browser/themes/osx/Secure-Glyph.png
+++ b/browser/themes/osx/Secure-Glyph.png
--- a/browser/themes/osx/Secure-Glyph@2x.png
+++ b/browser/themes/osx/Secure-Glyph@2x.png
--- a/browser/themes/osx/controlcenter/panel.css
+++ b/browser/themes/osx/controlcenter/panel.css
@ -4,6 +4,10 @@

 %include ../../shared/controlcenter/panel.inc.css

+#identity-popup {
+  margin-top: 1px;
+}
+
 /* Popup Icons */
 #identity-popup-icon {
  height: 64px;
@ -35,67 +39,3 @@
    -moz-image-region: rect(256px, 128px, 384px, 0px);
  }
 }
-
-/* Popup Body Text */
-.identity-popup-description {
-  white-space: pre-wrap;
-  -moz-padding-start: 15px;
-  margin: 2px 0 4px;
-}
-
-.identity-popup-label {
-  white-space: pre-wrap;
-  -moz-padding-start: 15px;
-  margin: 0;
-}
-
-#identity-popup-content-host ,
-#identity-popup-content-owner {
-  font-weight: bold;
-  max-width: 300px;
-}
-
-#identity-popup-content-host ,
-#identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
-  font-size: 140%;
-}
-
-#identity-popup-content-owner {
-  margin-bottom: 0 !important;
-}
-
-#identity-popup-content-verifier {
-  margin: 4px 0 2px;
-}
-
-#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
-#identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
-  margin-top: 10px;
-  -moz-margin-start: -24px;
-}
-
-#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
-#identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
-  margin-top: 5px;
-  list-style-image: url("chrome://browser/skin/Secure-Glyph.png");
-}
-
-@media (min-resolution: 2dppx) {
-  #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
-  #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
-    list-style-image: url("chrome://browser/skin/Secure-Glyph@2x.png");
-    width: 24px;
-  }
-}
-
-#identity-popup {
-  margin-top: 1px;
-}
-
-#identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
-  padding: 0;
-}
-
-#identity-popup-container {
-  padding: 16px;
-}
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@ -129,8 +129,6 @@ browser.jar:
  skin/classic/browser/search-indicator-badge-add.png          (../shared/search/search-indicator-badge-add.png)
  skin/classic/browser/search-indicator-badge-add@2x.png       (../shared/search/search-indicator-badge-add@2x.png)
  skin/classic/browser/search-history-icon.svg                 (../shared/search/history-icon.svg)
-  skin/classic/browser/Secure-Glyph.png
-  skin/classic/browser/Secure-Glyph@2x.png
  skin/classic/browser/slowStartup-16.png
  skin/classic/browser/theme-switcher-icon.png                 (../shared/theme-switcher-icon.png)
  skin/classic/browser/theme-switcher-icon@2x.png              (../shared/theme-switcher-icon@2x.png)
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@ -1,32 +1,90 @@
-#identity-popup-content-box:not(.chromeUI) > #identity-popup-brandName,
-#identity-popup-content-box:not(.chromeUI) > #identity-popup-chromeLabel,
-#identity-popup-content-box.chromeUI > .identity-popup-label:not(#identity-popup-brandName):not(#identity-popup-chromeLabel),
-#identity-popup-content-box.chromeUI > .identity-popup-description,
-#identity-popup-content-box.unknownIdentity > #identity-popup-connectedToLabel ,
-#identity-popup-content-box.unknownIdentity > #identity-popup-runByLabel ,
-#identity-popup-content-box.unknownIdentity > #identity-popup-content-host ,
-#identity-popup-content-box.unknownIdentity > #identity-popup-content-owner ,
-#identity-popup-content-box.verifiedIdentity > #identity-popup-connectedToLabel2 ,
-#identity-popup-content-box.verifiedDomain > #identity-popup-connectedToLabel2 ,
-#identity-popup-content-box.verifiedDomain > #identity-popup-runByLabel {
+#identity-popup-content-box:not(.verifiedIdentity) > #identity-popup-content-owner,
+#identity-popup-content-box:not(.verifiedIdentity):not(.verifiedDomain) > #identity-popup-content-verifier,
+#identity-popup-content-box:not(.verifiedIdentity):not(.mixedContent) > #identity-popup-content-supplemental,
+#identity-popup-content-box:not(.verifiedIdentity):not(.verifiedDomain):not(.chromeUI) > #identity-popup-connection-secure,
+#identity-popup-content-box:not(.unknownIdentity) > #identity-popup-connection-not-secure {
  display: none;
 }

+/* PANEL */
+
+#identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
+  padding: 0;
+}
+
+#identity-popup-container {
+  min-width: 25em;
+  padding: 10px;
+}
+
+/* ICON */
+
 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
  list-style-image: url("chrome://branding/content/icon64.png");
 }

-#identity-popup-brandName {
-  font-weight: bold;
-  font-size: 1.25em;
-  margin-top: .5em;
-  margin-bottom: .5em;
+@media (min-resolution: 1.1dppx) {
+  #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
+    list-style-image: url("chrome://branding/content/icon128.png");
+  }
+}
+
+/* CONTENT */
+
+.identity-popup-label {
+  font-size: 120%;
+  white-space: pre-wrap;
+  -moz-padding-start: 15px;
+  margin: 0;
+}
+
+.identity-popup-description {
+  white-space: pre-wrap;
+  -moz-padding-start: 15px;
+  margin: 2px 0 4px;
+  font-size: 110%;
 }

 #identity-popup-content-box {
-  max-width: 50ch;
+  width: 40ch;
 }

+#identity-popup-content-host {
+  font-size: 140%;
+}
+
+#identity-popup-content-owner {
+  margin-bottom: 0;
+  font-weight: 700;
+}
+
+#identity-popup-content-host,
+#identity-popup-content-owner {
+  max-width: 300px;
+}
+
+#identity-popup-connection-secure,
+#identity-popup-connection-not-secure,
+#identity-popup-content-supplemental {
+  margin-bottom: 1em;
+}
+
+#identity-popup-connection-secure {
+  color: #418220;
+}
+
+#identity-popup-connection-not-secure {
+  color: #d74345;
+}
+
+/* PERMISSIONS */
+
+#identity-popup-permissions {
+  margin-top: 1em;
+}
+
+/* FOOTER BUTTONS */
+
 #identity-popup-button-container {
  background-color: hsla(210,4%,10%,.07);
 }
@ -50,10 +108,3 @@
  background-color: hsla(210,4%,10%,.12);
  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
 }
-
-@media (min-resolution: 1.1dppx) {
-  #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
-    list-style-image: url("chrome://branding/content/icon128.png");
-    -moz-image-region: rect(0, 128px, 128px, 0);
-  }
-}
--- a/browser/themes/windows/Secure24-XP.png
+++ b/browser/themes/windows/Secure24-XP.png
--- a/browser/themes/windows/Secure24.png
+++ b/browser/themes/windows/Secure24.png
--- a/browser/themes/windows/controlcenter/panel.css
+++ b/browser/themes/windows/controlcenter/panel.css
@ -20,63 +20,3 @@
 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
  -moz-image-region: rect(128px, 64px, 192px, 0px);
 }
-
-/* Popup Body Text */
-.identity-popup-description {
-  white-space: pre-wrap;
-  -moz-padding-start: 15px;
-  margin: 2px 0 4px;
-}
-
-.identity-popup-label {
-  white-space: pre-wrap;
-  -moz-padding-start: 15px;
-  margin: 0;
-}
-
-#identity-popup-content-host,
-#identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
-  font-size: 1.2em;
-}
-
-#identity-popup-content-host {
-  margin-top: 3px;
-  margin-bottom: 5px;
-  font-weight: bold;
-  max-width: 300px;
-}
-
-#identity-popup-content-owner {
-  margin-top: 4px;
-  margin-bottom: 0 !important;
-  font-weight: bold;
-  max-width: 300px;
-}
-
-.verifiedDomain > #identity-popup-content-owner {
-  font-weight: normal;
-}
-
-#identity-popup-content-verifier {
-  margin: 4px 0 2px;
-}
-
-#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
-#identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
-  margin-top: 10px;
-  -moz-margin-start: -24px;
-}
-
-#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
-#identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
-  list-style-image: url("chrome://browser/skin/Secure24.png");
-}
-
-#identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
-  padding: 0;
-}
-
-#identity-popup-container {
-  min-width: 280px;
-  padding: 10px;
-}
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@ -121,8 +121,6 @@ browser.jar:
        skin/classic/browser/search-indicator-badge-add.png          (../shared/search/search-indicator-badge-add.png)
        skin/classic/browser/search-indicator-badge-add@2x.png       (../shared/search/search-indicator-badge-add@2x.png)
        skin/classic/browser/search-history-icon.svg                 (../shared/search/history-icon.svg)
-        skin/classic/browser/Secure24.png
-        skin/classic/browser/Secure24-XP.png
        skin/classic/browser/setDesktopBackground.css
        skin/classic/browser/slowStartup-16.png
        skin/classic/browser/theme-switcher-icon.png                 (../shared/theme-switcher-icon.png)
@ -584,7 +582,6 @@ browser.jar:
 % override chrome://browser/skin/pageInfo.png                         chrome://browser/skin/pageInfo-XP.png                             os=WINNT osversion<6
 % override chrome://browser/skin/Privacy-16.png                       chrome://browser/skin/Privacy-16-XP.png                           os=WINNT osversion<6
 % override chrome://browser/skin/searchbar-dropdown-arrow.png         chrome://browser/skin/searchbar-dropdown-arrow-XP.png             os=WINNT osversion<6
-% override chrome://browser/skin/Secure24.png                         chrome://browser/skin/Secure24-XP.png                             os=WINNT osversion<6
 % override chrome://browser/skin/downloads/buttons.png                chrome://browser/skin/downloads/buttons-XP.png                    os=WINNT osversion<6
 % override chrome://browser/skin/feeds/feedIcon.png                   chrome://browser/skin/feeds/feedIcon-XP.png                       os=WINNT osversion<6
 % override chrome://browser/skin/feeds/feedIcon16.png                 chrome://browser/skin/feeds/feedIcon16-XP.png                     os=WINNT osversion<6