Bug 1170759 - Move detailed security information to a subpanel r=Gijs

2015-06-11 14:26:17 +02:00 · 2015-06-11 14:26:17 +02:00 · 5e2d730ccc
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@ -6605,11 +6605,6 @@ var gIdentityHandler = {
    delete this._identityBox;
    return this._identityBox = document.getElementById("identity-box");
  },
-  get _identityPopupContentBox () {
-    delete this._identityPopupContentBox;
-    return this._identityPopupContentBox =
-      document.getElementById("identity-popup-content-box");
-  },
  get _identityPopupContentHost () {
    delete this._identityPopupContentHost;
    return this._identityPopupContentHost =
@ -6630,6 +6625,16 @@ var gIdentityHandler = {
    return this._identityPopupContentVerif =
      document.getElementById("identity-popup-content-verifier");
  },
+  get _identityPopupSecurityContent () {
+    delete this._identityPopupSecurityContent;
+    return this._identityPopupSecurityContent =
+      document.getElementById("identity-popup-security-content");
+  },
+  get _identityPopupSecurityView () {
+    delete this._identityPopupSecurityView;
+    return this._identityPopupSecurityView =
+      document.getElementById("identity-popup-securityView");
+  },
  get _identityIconLabel () {
    delete this._identityIconLabel;
    return this._identityIconLabel = document.getElementById("identity-icon-label");
@ -6685,6 +6690,11 @@ var gIdentityHandler = {
    this._identityPopup.hidePopup();
  },

+  showSubView(name, anchor) {
+    let view = document.getElementById("identity-popup-multiView");
+    view.showSubView(`identity-popup-${name}View`, anchor);
+  },
+
  /**
   * Helper to parse out the important parts of _lastStatus (of the SSL cert in
   * particular) for use in constructing identity UI strings
@ -6947,7 +6957,8 @@ var gIdentityHandler = {
  setPopupMessages : function(newMode) {

    this._identityPopup.className = newMode;
-    this._identityPopupContentBox.className = newMode;
+    this._identityPopupSecurityView.className = newMode;
+    this._identityPopupSecurityContent.className = newMode;

    // Initialize the optional strings to empty values
    let supplemental = "";
@ -6955,16 +6966,11 @@ var gIdentityHandler = {
    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;
-      }
+    try {
+      host = this.getEffectiveHost();
+    } catch (e) {
+      // Some URIs might have no hosts.
+      host = this._lastUri.specIgnoringRef;
    }

    switch (newMode) {
@ -7001,10 +7007,13 @@ var gIdentityHandler = {
    // 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._identityPopupContentHost.setAttribute("value", host);
    this._identityPopupContentOwner.textContent = owner;
    this._identityPopupContentSupp.textContent = supplemental;
    this._identityPopupContentVerif.textContent = verifier;
+
+    // Hide subviews when updating panel information.
+    document.getElementById("identity-popup-multiView").showMainView();
  },

  /**
@ -7129,6 +7138,7 @@ var gIdentityHandler = {

    let label = document.createElement("label");
    label.setAttribute("flex", "1");
+    label.setAttribute("class", "identity-popup-permission-label");
    label.setAttribute("control", menulist.getAttribute("id"));
    label.setAttribute("value", SitePermissions.getPermissionLabel(aPermission));

--- a/browser/components/controlcenter/content/panel.inc.xul
+++ b/browser/components/controlcenter/content/panel.inc.xul
@ -10,35 +10,72 @@
                       gIdentityHandler.onPopupShown(event);"
       orient="vertical"
       level="top">
-  <hbox id="identity-popup-container" align="top">
-    <image id="identity-popup-icon"/>
-    <vbox id="identity-popup-content-box">
-      <label id="identity-popup-content-host"
-             class="identity-popup-description"
-             crop="end"/>
-      <label id="identity-popup-connection-secure"
-             class="identity-popup-label"
-             value="&identity.connectionSecure;"/>
-      <label id="identity-popup-connection-not-secure"
-             class="identity-popup-label"
-             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"/>
-      <vbox id="identity-popup-permissions">
-        <label class="identity-popup-label header"
-               value="&identity.permissions;"/>
-        <vbox id="identity-popup-permission-list" class="indent"/>
+
+  <broadcasterset>
+    <broadcaster id="identity-popup-content-host" value=""/>
+  </broadcasterset>
+
+  <panelmultiview id="identity-popup-multiView"
+                  mainViewId="identity-popup-mainView">
+    <panelview id="identity-popup-mainView">
+
+      <!-- Security Section -->
+      <hbox class="identity-popup-section">
+        <vbox id="identity-popup-security-content" flex="1">
+          <label class="identity-popup-headline" crop="end">
+            <observes element="identity-popup-content-host" attribute="value"/>
+          </label>
+          <label class="identity-popup-connection-secure identity-popup-text"
+                 value="&identity.connectionSecure;"/>
+          <label class="identity-popup-connection-not-secure identity-popup-text"
+                 value="&identity.connectionNotSecure;"/>
+          <label class="identity-popup-connection-internal identity-popup-text"
+                 value="&identity.connectionInternal;"/>
+        </vbox>
+        <button class="identity-popup-expander"
+                oncommand="gIdentityHandler.showSubView('security', this)"/>
+      </hbox>
+
+      <!-- Permissions Section -->
+      <hbox id="identity-popup-permissions" class="identity-popup-section">
+        <vbox id="identity-popup-permissions-content" flex="1">
+          <label class="identity-popup-text identity-popup-headline"
+                 value="&identity.permissions;"/>
+          <vbox id="identity-popup-permission-list"/>
+        </vbox>
+      </hbox>
+
+      <!-- More Information Button -->
+      <hbox id="identity-popup-button-container" flex="1" align="center">
+        <button id="identity-popup-more-info-button" flex="1"
+                label="&identity.moreInfoLinkText2;"
+                oncommand="gIdentityHandler.handleMoreInfoClick(event);"/>
+      </hbox>
+    </panelview>
+
+    <!-- Security SubView -->
+    <panelview id="identity-popup-securityView" flex="1">
+      <vbox id="identity-popup-securityView-header">
+        <label class="identity-popup-headline" crop="end">
+          <observes element="identity-popup-content-host" attribute="value"/>
+        </label>
+        <label class="identity-popup-connection-secure identity-popup-text"
+               value="&identity.connectionSecure;"/>
+        <label class="identity-popup-connection-not-secure identity-popup-text"
+               value="&identity.connectionNotSecure;"/>
+        <label class="identity-popup-connection-internal identity-popup-text"
+               value="&identity.connectionInternal;"/>
      </vbox>
-    </vbox>
-  </hbox>
-  <!-- Footer button to open security page info -->
-  <hbox id="identity-popup-button-container" align="center">
-    <button id="identity-popup-more-info-button" flex="1"
-            label="&identity.moreInfoLinkText2;"
-            oncommand="gIdentityHandler.handleMoreInfoClick(event);"/>
-  </hbox>
+
+      <description id="identity-popup-securityView-connection"
+                   class="identity-popup-text">&identity.connectionVerified;</description>
+
+      <description id="identity-popup-content-owner"
+                   class="identity-popup-text"/>
+      <description id="identity-popup-content-supplemental"
+                   class="identity-popup-text"/>
+      <description id="identity-popup-content-verifier"
+                   class="identity-popup-text"/>
+    </panelview>
+  </panelmultiview>
 </panel>
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@ -675,6 +675,8 @@ you can use these alternative items. Otherwise, their values should be empty.  -

 <!ENTITY identity.connectionSecure "Secure Connection">
 <!ENTITY identity.connectionNotSecure "Connection is Not Secure">
+<!ENTITY identity.connectionVerified "&brandShortName; verified that you are securely connected to this site, run by:">
+<!ENTITY identity.connectionInternal "This is a secure &brandShortName; page.">

 <!ENTITY identity.moreInfoLinkText2 "More Information">

--- a/browser/themes/linux/controlcenter/panel.css
+++ b/browser/themes/linux/controlcenter/panel.css
@ -3,20 +3,3 @@
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

 %include ../../shared/controlcenter/panel.inc.css
-
-/* Identity popup icons */
-#identity-popup-icon {
-  height: 64px;
-  width: 64px;
-  padding: 0;
-  list-style-image: url("chrome://browser/skin/identity.png");
-  -moz-image-region: rect(0px, 64px, 64px, 0px);
-}
-
-#identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
-  -moz-image-region: rect(64px, 64px, 128px, 0px);
-}
-
-#identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
-  -moz-image-region: rect(128px, 64px, 192px, 0px);
-}
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@ -146,6 +146,11 @@ browser.jar:
  skin/classic/browser/loop/toolbar-inverted.png      (loop/toolbar-inverted.png)
  skin/classic/browser/loop/toolbar-inverted@2x.png   (loop/toolbar-inverted@2x.png)
 * skin/classic/browser/controlcenter/panel.css        (controlcenter/panel.css)
+  skin/classic/browser/controlcenter/arrow-subview.svg  (../shared/controlcenter/arrow-subview.svg)
+  skin/classic/browser/controlcenter/conn-not-secure.svg  (../shared/controlcenter/conn-not-secure.svg)
+  skin/classic/browser/controlcenter/conn-secure-dv.svg  (../shared/controlcenter/conn-secure-dv.svg)
+  skin/classic/browser/controlcenter/conn-secure-ev.svg  (../shared/controlcenter/conn-secure-ev.svg)
+  skin/classic/browser/controlcenter/permissions.svg  (../shared/controlcenter/permissions.svg)
  skin/classic/browser/customizableui/background-noise-toolbar.png  (customizableui/background-noise-toolbar.png)
  skin/classic/browser/customizableui/customize-illustration.png  (../shared/customizableui/customize-illustration.png)
  skin/classic/browser/customizableui/customize-illustration-rtl.png  (../shared/customizableui/customize-illustration-rtl.png)
--- a/browser/themes/osx/controlcenter/panel.css
+++ b/browser/themes/osx/controlcenter/panel.css
@ -7,35 +7,3 @@
 #identity-popup {
  margin-top: 1px;
 }
-
-/* Popup Icons */
-#identity-popup-icon {
-  height: 64px;
-  width: 64px;
-  padding: 0;
-  list-style-image: url("chrome://browser/skin/identity.png");
-  -moz-image-region: rect(0px, 64px, 64px, 0px);
-}
-
-#identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
-  -moz-image-region: rect(64px, 64px, 128px, 0px);
-}
-
-#identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
-  -moz-image-region: rect(128px, 64px, 192px, 0px);
-}
-
-@media (min-resolution: 2dppx) {
-  #identity-popup-icon {
-    list-style-image: url("chrome://browser/skin/identity@2x.png");
-    -moz-image-region: rect(0px, 128px, 128px, 0px);
-  }
-
-  #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
-    -moz-image-region: rect(128px, 128px, 256px, 0px);
-  }
-
-  #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
-    -moz-image-region: rect(256px, 128px, 384px, 0px);
-  }
-}
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@ -191,6 +191,11 @@ browser.jar:
  skin/classic/browser/yosemite/loop/toolbar.png            (loop/toolbar-yosemite.png)
  skin/classic/browser/yosemite/loop/toolbar@2x.png         (loop/toolbar-yosemite@2x.png)
 * skin/classic/browser/controlcenter/panel.css        (controlcenter/panel.css)
+  skin/classic/browser/controlcenter/arrow-subview.svg  (../shared/controlcenter/arrow-subview.svg)
+  skin/classic/browser/controlcenter/conn-not-secure.svg  (../shared/controlcenter/conn-not-secure.svg)
+  skin/classic/browser/controlcenter/conn-secure-dv.svg  (../shared/controlcenter/conn-secure-dv.svg)
+  skin/classic/browser/controlcenter/conn-secure-ev.svg  (../shared/controlcenter/conn-secure-ev.svg)
+  skin/classic/browser/controlcenter/permissions.svg  (../shared/controlcenter/permissions.svg)
  skin/classic/browser/customizableui/background-noise-toolbar.png  (customizableui/background-noise-toolbar.png)
  skin/classic/browser/customizableui/customize-titleBar-toggle.png  (customizableui/customize-titleBar-toggle.png)
  skin/classic/browser/customizableui/customize-titleBar-toggle@2x.png  (customizableui/customize-titleBar-toggle@2x.png)
--- a/browser/themes/shared/controlcenter/arrow-subview.svg
+++ b/browser/themes/shared/controlcenter/arrow-subview.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <polygon fill="#808080" points="5,3.5 6.5,2 12.375,8 6.5,14 5,12.5 9.375,8" />
+</svg>
--- a/browser/themes/shared/controlcenter/conn-not-secure.svg
+++ b/browser/themes/shared/controlcenter/conn-not-secure.svg
--- a/browser/themes/shared/controlcenter/conn-secure-dv.svg
+++ b/browser/themes/shared/controlcenter/conn-secure-dv.svg
@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+  <style>
+    .icon-default {
+      fill: #4d9a26;
+    }
+  </style>
+
+  <defs>
+    <rect id="shape-lock-clasp-outer" x="5" y="1" width="14" height="20" rx="7" ry="7" />
+    <rect id="shape-lock-clasp-inner" x="8" y="4" width="8" height="14" rx="4" ry="4" />
+    <rect id="shape-lock-base" x="3" y="10" width="18" height="13" rx="1.5" ry="1.5" />
+
+    <mask id="mask-clasp-cutout">
+      <rect width="24" height="24" fill="#000" />
+      <use xlink:href="#shape-lock-clasp-outer" fill="#fff" />
+      <use xlink:href="#shape-lock-clasp-inner" fill="#000" />
+    </mask>
+  </defs>
+
+  <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" class="icon-default" />
+  <use xlink:href="#shape-lock-base" class="icon-default" />
+</svg>
--- a/browser/themes/shared/controlcenter/conn-secure-ev.svg
+++ b/browser/themes/shared/controlcenter/conn-secure-ev.svg
@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+  <style>
+    .icon-default {
+      fill: #4d9a26;
+    }
+  </style>
+
+  <defs>
+    <rect id="shape-lock-clasp-outer" x="5" y="1" width="14" height="20" rx="7" ry="7" />
+    <rect id="shape-lock-clasp-inner" x="8" y="4" width="8" height="14" rx="4" ry="4" />
+    <rect id="shape-lock-base" x="3" y="10" width="18" height="13" rx="1.5" ry="1.5" />
+
+    <mask id="mask-clasp-cutout">
+      <rect width="16" height="16" fill="#000" />
+      <use xlink:href="#shape-lock-clasp-outer" fill="#fff" />
+      <use xlink:href="#shape-lock-clasp-inner" fill="#000" />
+    </mask>
+
+    <mask id="mask-verified-cutout">
+      <rect width="24" height="24" fill="#fff" />
+      <circle cx="18" cy="18" r="7" fill="#000" />
+    </mask>
+  </defs>
+
+  <g mask="url(#mask-verified-cutout)">
+    <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" class="icon-default" />
+    <use xlink:href="#shape-lock-base" class="icon-default" />
+  </g>
+  <circle cx="18" cy="18" r="5.25" fill="#66cc33" />
+
+  <path fill="#fff" d="M17.4,21l-3.1-3c-0.1-0.1-0.1-0.2,0-0.3l0.7-0.9c0.1-0.1,0.2-0.1,0.3,0l2.1,2l3-4c0.1-0.1,0.2-0.1,0.3,0 l0.9,0.9c0.1,0.1,0.1,0.2,0,0.3L17.7,21C17.6,21,17.4,21.1,17.4,21z"/>
+</svg>
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@ -1,86 +1,212 @@
-#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 {
+#identity-popup-securityView:not(.verifiedIdentity) > #identity-popup-content-owner,
+#identity-popup-securityView:not(.verifiedIdentity):not(.verifiedDomain) > #identity-popup-content-verifier,
+#identity-popup-securityView:not(.verifiedIdentity):not(.mixedContent) > #identity-popup-content-supplemental,
+#identity-popup-security-content:not(.verifiedIdentity):not(.verifiedDomain) > .identity-popup-connection-secure,
+#identity-popup-securityView:not(.verifiedIdentity):not(.verifiedDomain) > #identity-popup-securityView-header > .identity-popup-connection-secure,
+#identity-popup-securityView:not(.unknownIdentity) > #identity-popup-securityView-header > .identity-popup-connection-not-secure,
+#identity-popup-securityView:not(.chromeUI) > #identity-popup-securityView-header > .identity-popup-connection-internal,
+#identity-popup-security-content:not(.unknownIdentity) > .identity-popup-connection-not-secure,
+#identity-popup-securityView:not(.verifiedIdentity) > #identity-popup-securityView-connection,
+#identity-popup-security-content.unknownIdentity:not(.mixedContent) + .identity-popup-expander,
+#identity-popup-security-content:not(.chromeUI) > .identity-popup-connection-internal,
+#identity-popup-security-content.chromeUI + .identity-popup-expander {
  display: none;
 }

 /* PANEL */

+#identity-popup {
+  /* Tiny hack to ensure the panel shrinks back to its original
+     size after closing a subview that is bigger than the main view. */
+  max-height: 0;
+}
+
 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
  padding: 0;
 }

-#identity-popup-container {
-  min-width: 25em;
-  padding: 10px;
+.panel-mainview[panelid=identity-popup] {
+  min-width: 30em;
 }

-/* ICON */
+#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews {
+  transform: translateX(100%);
+  box-shadow: none;
+}

-#identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
-  list-style-image: url("chrome://branding/content/icon64.png");
+#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
+  transform: translateX(-100%);
+}
+
+#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
+  background: var(--panel-arrowcontent-background);
+  border-bottom-right-radius: 3.5px;
+  padding: 0;
+}
+
+#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews:-moz-locale-dir(rtl) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 3.5px;
+}
+
+.identity-popup-section:not(:first-child) {
+  border-top: 1px solid rgb(229,229,229);
+}
+
+#identity-popup-securityView,
+#identity-popup-security-content,
+#identity-popup-permissions-content {
+  padding: 0.75em 0 1em;
+  -moz-padding-start: calc(2em + 24px);
+  -moz-padding-end: 1em;
+  background-repeat: no-repeat;
+  background-position: 1em 1em;
+  background-size: 24px auto;
+}
+
+#identity-popup-securityView:-moz-locale-dir(rtl),
+#identity-popup-security-content:-moz-locale-dir(rtl),
+#identity-popup-permissions-content:-moz-locale-dir(rtl) {
+  background-position: calc(100% - 1em) 1em;
+}
+
+/* EXPAND BUTTON */
+
+.identity-popup-expander {
+  margin: 0;
+  padding: 4px 0;
+  min-width: auto;
+  width: 38px;
+  border: 0 none;
+  -moz-appearance: none;
+  background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg"),
+                    linear-gradient(rgba(255,255,255,0.3), transparent);
+  background-size: 16px, auto;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: transparent;
+}
+
+.identity-popup-expander:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.identity-popup-expander[panel-multiview-anchor] {
+  transition: background-color 250ms ease-in;
+  background-color: #0069d9;
+  background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png"),
+                    linear-gradient(rgba(255,255,255,0.3), transparent);
 }

@media (min-resolution: 1.1dppx) {
-  #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
-    list-style-image: url("chrome://branding/content/icon128.png");
+  .identity-popup-expander[panel-multiview-anchor] {
+    background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted@2x.png"),
+                      linear-gradient(rgba(255,255,255,0.3), transparent);
  }
 }

+.identity-popup-expander > .button-box,
+.identity-popup-expander > .button-box:focus {
+  padding: 0;
+  -moz-appearance: none;
+  border: solid #e5e5e5;
+  border-width: 0 0 0 1px;
+}
+
+.identity-popup-expander[panel-multiview-anchor] > .button-box,
+.identity-popup-expander[panel-multiview-anchor] > .button-box:focus {
+  border: 0 none;
+}
+
+.identity-popup-expander:hover {
+  background-color: hsla(210,4%,10%,.07);
+}
+
+.identity-popup-expander:hover:active {
+  background-color: hsla(210,4%,10%,.12);
+  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
+}
+
 /* CONTENT */

-.identity-popup-label {
-  font-size: 120%;
+.identity-popup-text {
  white-space: pre-wrap;
-  -moz-padding-start: 15px;
+  font-size: 110%;
  margin: 0;
 }

-.identity-popup-description {
-  white-space: pre-wrap;
-  -moz-padding-start: 15px;
+.identity-popup-headline {
  margin: 2px 0 4px;
-  font-size: 110%;
+  font-size: 150%;
 }

-#identity-popup-content-box {
-  width: 40ch;
+/* SECURITY */
+
+#identity-popup-securityView > .identity-popup-text:not(#identity-popup-content-owner) {
+  margin: 2px 0 4px;
 }

-#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 {
+.identity-popup-connection-secure {
  color: #418220;
 }

-#identity-popup-connection-not-secure {
+.identity-popup-connection-not-secure {
  color: #d74345;
 }

+#identity-popup-security-content.chromeUI {
+  background-image: url(chrome://branding/content/icon48.png);
+}
+
+/* SECURITY SUBVIEW */
+
+#identity-popup-securityView {
+  padding-bottom: 2em;
+  overflow: hidden;
+}
+
+#identity-popup-securityView,
+#identity-popup-security-content {
+  background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg);
+}
+
+#identity-popup-securityView.verifiedDomain,
+#identity-popup-security-content.verifiedDomain {
+  background-image: url(chrome://browser/skin/controlcenter/conn-secure-dv.svg);
+}
+
+#identity-popup-securityView.verifiedIdentity,
+#identity-popup-security-content.verifiedIdentity {
+  background-image: url(chrome://browser/skin/controlcenter/conn-secure-ev.svg);
+}
+
+#identity-popup-securityView-header {
+  border-bottom: 1px solid #e5e5e5;
+  padding-bottom: 1em;
+  margin-bottom: 1em;
+}
+
+#identity-popup-content-owner {
+  font-weight: 700;
+}
+
+#identity-popup-content-owner,
+#identity-popup-securityView:not(.verifiedDomain) > #identity-popup-content-verifier {
+  margin-top: 1em;
+}
+
 /* PERMISSIONS */

-#identity-popup-permissions {
-  margin-top: 1em;
+#identity-popup-permissions-content {
+  background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
+}
+
+#identity-popup-permission-list {
+  margin-top: 0.5em;
+}
+
+.identity-popup-permission-label {
+  -moz-margin-start: 0;
 }

 /* FOOTER BUTTONS */
--- a/browser/themes/shared/controlcenter/permissions.svg
+++ b/browser/themes/shared/controlcenter/permissions.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="#a6a6a6" d="M2,1h20c1.1,0,2,0.9,2,2v18c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2V3 C0,1.9,0.9,1,2,1z"/>
+  <path fill="#fff" d="M12,3h9c0.6,0,1,0.4,1,1v16c0,0.6-0.4,1-1,1h-9V3z"/>
+  <path fill="#fff" d="M5.5,12.5l2.7-3.7C8.4,8.5,8.8,8.5,9,8.7l0.7,0.5 c0.2,0.2,0.2,0.5,0,0.7L5.8,15c-0.2,0.2-0.5,0.3-0.8,0.1l-2.2-2.2c-0.2-0.2-0.2-0.5,0-0.7l0.8-0.8c0.2-0.2,0.5-0.2,0.7,0L5.5,12.5z" />
+  <rect x="16.3" y="8.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.5061 15.5355)" fill="#a6a6a6" width="1.4" height="7.1"/>
+  <rect x="16.3" y="8.5" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 20.5355 32.5061)" fill="#a6a6a6" width="1.4" height="7.1"/>
+</svg>
--- a/browser/themes/windows/controlcenter/panel.css
+++ b/browser/themes/windows/controlcenter/panel.css
@ -3,20 +3,3 @@
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

 %include ../../shared/controlcenter/panel.inc.css
-
-/* Popup Icons */
-#identity-popup-icon {
-  height: 64px;
-  width: 64px;
-  padding: 0;
-  list-style-image: url("chrome://browser/skin/identity.png");
-  -moz-image-region: rect(0px, 64px, 64px, 0px);
-}
-
-#identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
-  -moz-image-region: rect(64px, 64px, 128px, 0px);
-}
-
-#identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
-  -moz-image-region: rect(128px, 64px, 192px, 0px);
-}
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@ -192,6 +192,11 @@ browser.jar:
        skin/classic/browser/loop/toolbar-lunaSilver.png             (loop/toolbar-lunaSilver.png)
        skin/classic/browser/loop/toolbar-lunaSilver@2x.png          (loop/toolbar-lunaSilver@2x.png)
 *       skin/classic/browser/controlcenter/panel.css                 (controlcenter/panel.css)
+        skin/classic/browser/controlcenter/arrow-subview.svg  (../shared/controlcenter/arrow-subview.svg)
+        skin/classic/browser/controlcenter/conn-not-secure.svg  (../shared/controlcenter/conn-not-secure.svg)
+        skin/classic/browser/controlcenter/conn-secure-dv.svg  (../shared/controlcenter/conn-secure-dv.svg)
+        skin/classic/browser/controlcenter/conn-secure-ev.svg  (../shared/controlcenter/conn-secure-ev.svg)
+        skin/classic/browser/controlcenter/permissions.svg  (../shared/controlcenter/permissions.svg)
        skin/classic/browser/customizableui/background-noise-toolbar.png  (customizableui/background-noise-toolbar.png)
        skin/classic/browser/customizableui/customizeFavicon.ico  (../shared/customizableui/customizeFavicon.ico)
        skin/classic/browser/customizableui/customize-illustration.png  (../shared/customizableui/customize-illustration.png)