Bug 1409301 - Update the site security subview to the Photon style. r=johannh draft
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Sat, 11 Nov 2017 14:03:27 +0000
changeset 696814 eb5604b3b831963662f76918dfb88f3930d66ef9
parent 696813 61b68e11d5e7bb2308ba40bd81c3e413f8f9179b
child 739931 d549625d7589ffad70b99698b400750362c281d6
push id88794
push userpaolo.mozmail@amadzone.org
push dateSat, 11 Nov 2017 14:04:14 +0000
reviewersjohannh
bugs1409301
milestone58.0a1
Bug 1409301 - Update the site security subview to the Photon style. r=johannh The site security subview is now implemented using the "photonpanelmultiview" element, replacing the last instance of the "panelmultiview" element. The subview features a standard Photon header, hence the connection state icon was moved to the element below it. This makes the styles more similar between the main view and the subview. The connection state styles are now applied using a class name, and the tests have been updated accordingly. This change required some fixes in the "photonpanelmultiview" implementation to make sure the height of the subview is correct and to allow keyboard navigation back to the main view. Since the expander button and the permission controls in the main view are not visible anymore after the subview is shown, some code related to focus and hover could be removed as well. MozReview-Commit-ID: 4nIAPWJPV8k
browser/base/content/browser.js
browser/base/content/test/general/browser_addCertException.js
browser/base/content/test/siteIdentity/browser_identity_UI.js
browser/base/content/test/siteIdentity/browser_insecureLoginForms.js
browser/base/content/test/siteIdentity/head.js
browser/components/controlcenter/content/panel.inc.xul
browser/components/customizableui/content/panelUI.xml
browser/locales/en-US/chrome/browser/browser.dtd
browser/locales/en-US/chrome/browser/browser.properties
browser/themes/shared/controlcenter/panel.inc.css
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -7323,38 +7323,23 @@ var gIdentityHandler = {
    * "identity-popup" panel.
    */
   handleMoreInfoClick(event) {
     displaySecurityInfo();
     event.stopPropagation();
     this._identityPopup.hidePopup();
   },
 
-  toggleSubView(name, anchor) {
-    let view = this._identityPopupMultiView;
-    let id = `identity-popup-${name}View`;
-    let subView = document.getElementById(id);
-
-    // Listen for the subview showing or hiding to change
-    // the tooltip on the expander button.
-    subView.addEventListener("ViewShowing", this);
-    subView.addEventListener("ViewHiding", this);
-
-    if (view.showingSubView) {
-      view.showMainView();
-    } else {
-      view.showSubView(id, anchor);
-    }
-
-    // If an element is focused that's not the anchor, clear the focus.
+  showSecuritySubView() {
+    this._identityPopupMultiView.showSubView("identity-popup-securityView",
+                                             this._popupExpander);
+
     // Elements of hidden views have -moz-user-focus:ignore but setting that
     // per CSS selector doesn't blur a focused element in those hidden views.
-    if (Services.focus.focusedElement != anchor) {
-      Services.focus.clearFocus(window);
-    }
+    Services.focus.clearFocus(window);
   },
 
   disableMixedContentProtection() {
     // Use telemetry to measure how often unblocking happens
     const kMIXED_CONTENT_UNBLOCK_EVENT = 2;
     let histogram =
       Services.telemetry.getHistogramById(
         "MIXED_CONTENT_UNBLOCK_COUNTER");
@@ -7677,17 +7662,17 @@ var gIdentityHandler = {
   refreshIdentityPopup() {
     // Update "Learn More" for Mixed Content Blocking and Insecure Login Forms.
     let baseURL = Services.urlFormatter.formatURLPref("app.support.baseURL");
     this._identityPopupMixedContentLearnMore
         .setAttribute("href", baseURL + "mixed-content");
     this._identityPopupInsecureLoginFormsLearnMore
         .setAttribute("href", baseURL + "insecure-password");
 
-    // The expander switches its tooltip when toggled, change it to the default.
+    // This is in the properties file because the expander used to switch its tooltip.
     this._popupExpander.tooltipText = gNavigatorBundle.getString("identity.showDetails.tooltip");
 
     // Determine connection security information.
     let connection = "not-secure";
     if (this._isSecureInternalUI) {
       connection = "chrome";
     } else if (this._isExtensionPage) {
       connection = "extension";
@@ -7907,26 +7892,16 @@ var gIdentityHandler = {
   onPopupHidden(event) {
     if (event.target == this._identityPopup) {
       window.removeEventListener("focus", this, true);
       this._identityBox.removeAttribute("open");
     }
   },
 
   handleEvent(event) {
-    // If the subview is shown or hidden, change the tooltip on the expander button.
-    if (event.type == "ViewShowing") {
-      this._popupExpander.tooltipText = gNavigatorBundle.getString("identity.hideDetails.tooltip");
-      return;
-    }
-    if (event.type == "ViewHiding") {
-      this._popupExpander.tooltipText = gNavigatorBundle.getString("identity.showDetails.tooltip");
-      return;
-    }
-
     let elem = document.activeElement;
     let position = elem.compareDocumentPosition(this._identityPopup);
 
     if (!(position & (Node.DOCUMENT_POSITION_CONTAINS |
                       Node.DOCUMENT_POSITION_CONTAINED_BY)) &&
         !this._identityPopup.hasAttribute("noautohide")) {
       // Hide the panel when focusing an element that is
       // neither an ancestor nor descendant unless the panel has
--- a/browser/base/content/test/general/browser_addCertException.js
+++ b/browser/base/content/test/general/browser_addCertException.js
@@ -7,44 +7,44 @@
 // Test adding a certificate exception by attempting to browse to a site with
 // a bad certificate, being redirected to the internal about:certerror page,
 // using the button contained therein to load the certificate exception
 // dialog, using that to add an exception, and finally successfully visiting
 // the site, including showing the right identity box and control center icons.
 add_task(async function() {
   await BrowserTestUtils.openNewForegroundTab(gBrowser);
   await loadBadCertPage("https://expired.example.com");
-  checkControlPanelIcons();
-  let certOverrideService = Cc["@mozilla.org/security/certoverride;1"]
-                              .getService(Ci.nsICertOverrideService);
-  certOverrideService.clearValidityOverride("expired.example.com", -1);
-  await BrowserTestUtils.removeTab(gBrowser.selectedTab);
-});
 
-// Check for the correct icons in the identity box and control center.
-function checkControlPanelIcons() {
   let { gIdentityHandler } = gBrowser.ownerGlobal;
   gIdentityHandler._identityBox.click();
+  let promiseViewShown = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "ViewShown");
   document.getElementById("identity-popup-security-expander").click();
+  await promiseViewShown;
 
   is_element_visible(document.getElementById("connection-icon"), "Should see connection icon");
   let connectionIconImage = gBrowser.ownerGlobal
         .getComputedStyle(document.getElementById("connection-icon"))
         .getPropertyValue("list-style-image");
   let securityViewBG = gBrowser.ownerGlobal
-        .getComputedStyle(document.getElementById("identity-popup-securityView"))
+        .getComputedStyle(document.getElementById("identity-popup-securityView")
+                                  .getElementsByClassName("identity-popup-security-content")[0])
         .getPropertyValue("background-image");
   let securityContentBG = gBrowser.ownerGlobal
-        .getComputedStyle(document.getElementById("identity-popup-security-content"))
+        .getComputedStyle(document.getElementById("identity-popup-mainView")
+                                  .getElementsByClassName("identity-popup-security-content")[0])
         .getPropertyValue("background-image");
   is(connectionIconImage,
      "url(\"chrome://browser/skin/connection-mixed-passive-loaded.svg\")",
      "Using expected icon image in the identity block");
   is(securityViewBG,
      "url(\"chrome://browser/skin/connection-mixed-passive-loaded.svg\")",
      "Using expected icon image in the Control Center main view");
   is(securityContentBG,
      "url(\"chrome://browser/skin/connection-mixed-passive-loaded.svg\")",
      "Using expected icon image in the Control Center subview");
 
   gIdentityHandler._identityPopup.hidden = true;
-}
 
+  let certOverrideService = Cc["@mozilla.org/security/certoverride;1"]
+                              .getService(Ci.nsICertOverrideService);
+  certOverrideService.clearValidityOverride("expired.example.com", -1);
+  await BrowserTestUtils.removeTab(gBrowser.selectedTab);
+});
--- a/browser/base/content/test/siteIdentity/browser_identity_UI.js
+++ b/browser/base/content/test/siteIdentity/browser_identity_UI.js
@@ -98,21 +98,23 @@ function nextTest() {
     if (spec == "about:blank" || spec == gCurrentTest.location) {
       BrowserTestUtils.loadURI(gBrowser.selectedBrowser, gCurrentTest.location);
     } else {
       // Open the Control Center and make sure it closes after nav (Bug 1207542).
       let popupShown = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "popupshown");
       gPopupHidden = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "popuphidden");
       gIdentityHandler._identityBox.click();
       info("Waiting for the Control Center to be shown");
-      popupShown.then(() => {
+      popupShown.then(async () => {
         ok(!is_hidden(gIdentityHandler._identityPopup), "Control Center is visible");
         // Show the subview, which is an easy way in automation to reproduce
         // Bug 1207542, where the CC wouldn't close on navigation.
+        let promiseViewShown = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "ViewShown");
         gBrowser.ownerDocument.querySelector("#identity-popup-security-expander").click();
+        await promiseViewShown;
         BrowserTestUtils.loadURI(gBrowser.selectedBrowser, gCurrentTest.location);
       });
     }
   } else {
     gCheckETLD = false;
     gTestDesc = "#" + gCurrentTestIndex + " (" + gCurrentTest.name + " without eTLD in identity icon label)";
     if (!gForward)
       gTestDesc += " (second time)";
--- a/browser/base/content/test/siteIdentity/browser_insecureLoginForms.js
+++ b/browser/base/content/test/siteIdentity/browser_insecureLoginForms.js
@@ -33,51 +33,64 @@ add_task(async function test_simple() {
       BrowserTestUtils.switchTab(gBrowser, tab),
       BrowserTestUtils.browserLoaded(browser),
       // One event is triggered by pageshow and one by DOMFormHasPassword.
       waitForInsecureLoginFormsStateChange(browser, 2),
     ]);
 
     let { gIdentityHandler } = gBrowser.ownerGlobal;
     gIdentityHandler._identityBox.click();
+
+    // Messages should be visible when the scheme is HTTP, and invisible when
+    // the scheme is HTTPS.
+    is(Array.every(document.getElementById("identity-popup-mainView")
+                           .querySelectorAll("[when-loginforms=insecure]"),
+                   element => !is_hidden(element)),
+       expectWarning,
+       "The relevant messages should be visible or hidden in the main view.");
+
     let promiseViewShown = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "ViewShown");
     document.getElementById("identity-popup-security-expander").click();
     await promiseViewShown;
 
     if (expectWarning) {
       ok(is_visible(document.getElementById("connection-icon")), "Connection icon should be visible");
       let connectionIconImage = gBrowser.ownerGlobal
             .getComputedStyle(document.getElementById("connection-icon"))
             .getPropertyValue("list-style-image");
       let securityViewBG = gBrowser.ownerGlobal
-            .getComputedStyle(document.getElementById("identity-popup-securityView"))
+            .getComputedStyle(document.getElementById("identity-popup-securityView")
+                                      .getElementsByClassName("identity-popup-security-content")[0])
             .getPropertyValue("background-image");
       let securityContentBG = gBrowser.ownerGlobal
-            .getComputedStyle(document.getElementById("identity-popup-security-content"))
+            .getComputedStyle(document.getElementById("identity-popup-mainView")
+                                      .getElementsByClassName("identity-popup-security-content")[0])
             .getPropertyValue("background-image");
       is(connectionIconImage,
          "url(\"chrome://browser/skin/connection-mixed-active-loaded.svg\")",
          "Using expected icon image in the identity block");
       is(securityViewBG,
          "url(\"chrome://browser/skin/controlcenter/mcb-disabled.svg\")",
          "Using expected icon image in the Control Center main view");
       is(securityContentBG,
          "url(\"chrome://browser/skin/controlcenter/mcb-disabled.svg\")",
          "Using expected icon image in the Control Center subview");
-      is(Array.filter(document.querySelectorAll("[observes=identity-popup-insecure-login-forms-learn-more]"),
+      is(Array.filter(document.getElementById("identity-popup-securityView")
+                              .querySelectorAll("[observes=identity-popup-insecure-login-forms-learn-more]"),
                       element => !is_hidden(element)).length, 1,
          "The 'Learn more' link should be visible once.");
     }
 
     // Messages should be visible when the scheme is HTTP, and invisible when
     // the scheme is HTTPS.
-    is(Array.every(document.querySelectorAll("[when-loginforms=insecure]"),
+    is(Array.every(document.getElementById("identity-popup-securityView")
+                           .querySelectorAll("[when-loginforms=insecure]"),
                    element => !is_hidden(element)),
        expectWarning,
-       "The relevant messages should be visible or hidden.");
+       "The relevant messages should be visible or hidden in the security view.");
 
     if (gIdentityHandler._identityPopup.state != "closed") {
       let hideEvent = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "popuphidden");
       info("hiding popup");
       gIdentityHandler._identityPopup.hidePopup();
       await hideEvent;
     }
 
@@ -129,46 +142,55 @@ add_task(async function test_ignoring_wi
     });
     let tab = await loaded;
     browser = tab.linkedBrowser;
     await waitForInsecureLoginFormsStateChange(browser, 2);
 
     // Open the identity popup.
     let { gIdentityHandler } = gBrowser.ownerGlobal;
     gIdentityHandler._identityBox.click();
+
+    ok(Array.every(document.getElementById("identity-popup-mainView")
+                           .querySelectorAll("[when-loginforms=insecure]"),
+                   element => is_hidden(element)),
+       "All messages should be hidden in the main view.");
+
     let promiseViewShown = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "ViewShown");
     document.getElementById("identity-popup-security-expander").click();
     await promiseViewShown;
 
     ok(is_visible(document.getElementById("connection-icon")),
        "Connection icon is visible");
 
     // Assert that the identity indicators are still "secure".
     let connectionIconImage = gBrowser.ownerGlobal
           .getComputedStyle(document.getElementById("connection-icon"))
           .getPropertyValue("list-style-image");
     let securityViewBG = gBrowser.ownerGlobal
-          .getComputedStyle(document.getElementById("identity-popup-securityView"))
+          .getComputedStyle(document.getElementById("identity-popup-securityView")
+                                    .getElementsByClassName("identity-popup-security-content")[0])
           .getPropertyValue("background-image");
     let securityContentBG = gBrowser.ownerGlobal
-          .getComputedStyle(document.getElementById("identity-popup-security-content"))
+          .getComputedStyle(document.getElementById("identity-popup-mainView")
+                                    .getElementsByClassName("identity-popup-security-content")[0])
           .getPropertyValue("background-image");
     is(connectionIconImage,
        "url(\"chrome://browser/skin/connection-secure.svg\")",
        "Using expected icon image in the identity block");
     is(securityViewBG,
        "url(\"chrome://browser/skin/controlcenter/connection.svg\")",
        "Using expected icon image in the Control Center main view");
     is(securityContentBG,
        "url(\"chrome://browser/skin/controlcenter/connection.svg\")",
        "Using expected icon image in the Control Center subview");
 
-    ok(Array.every(document.querySelectorAll("[when-loginforms=insecure]"),
+    ok(Array.every(document.getElementById("identity-popup-securityView")
+                           .querySelectorAll("[when-loginforms=insecure]"),
                    element => is_hidden(element)),
-       "All messages should be hidden.");
+       "All messages should be hidden in the security view.");
 
     if (gIdentityHandler._identityPopup.state != "closed") {
       info("hiding popup");
       let hideEvent = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "popuphidden");
       gIdentityHandler._identityPopup.hidePopup();
       await hideEvent;
     }
 
--- a/browser/base/content/test/siteIdentity/head.js
+++ b/browser/base/content/test/siteIdentity/head.js
@@ -213,21 +213,24 @@ async function assertMixedContentBlockin
 
   is(popupAttr.includes("passive-loaded"), passiveLoaded,
       "identity-popup has expected attr for passiveLoaded");
   is(bodyAttr.includes("passive-loaded"), passiveLoaded,
       "securityView-body has expected attr for passiveLoaded");
 
   // Make sure the correct icon is visible in the Control Center.
   // This logic is controlled with CSS, so this helps prevent regressions there.
-  let securityView = doc.getElementById("identity-popup-securityView");
-  let securityViewBG = tabbrowser.ownerGlobal.getComputedStyle(securityView).
-                       getPropertyValue("background-image");
-  let securityContentBG = tabbrowser.ownerGlobal.getComputedStyle(securityView).
-                          getPropertyValue("background-image");
+  let securityViewBG = tabbrowser.ownerGlobal
+    .getComputedStyle(document.getElementById("identity-popup-securityView")
+                              .getElementsByClassName("identity-popup-security-content")[0])
+    .getPropertyValue("background-image");
+  let securityContentBG = tabbrowser.ownerGlobal
+    .getComputedStyle(document.getElementById("identity-popup-mainView")
+                              .getElementsByClassName("identity-popup-security-content")[0])
+    .getPropertyValue("background-image");
 
   if (stateInsecure) {
     is(securityViewBG, "url(\"chrome://browser/skin/controlcenter/conn-not-secure.svg\")",
       "CC using 'not secure' icon");
     is(securityContentBG, "url(\"chrome://browser/skin/controlcenter/conn-not-secure.svg\")",
       "CC using 'not secure' icon");
   }
 
@@ -257,17 +260,18 @@ async function assertMixedContentBlockin
         "CC using degraded icon");
     }
   }
 
   if (activeLoaded || activeBlocked || passiveLoaded) {
     let promiseViewShown = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "ViewShown");
     doc.getElementById("identity-popup-security-expander").click();
     await promiseViewShown;
-    is(Array.filter(doc.querySelectorAll("[observes=identity-popup-mcb-learn-more]"),
+    is(Array.filter(doc.getElementById("identity-popup-securityView")
+                       .querySelectorAll("[observes=identity-popup-mcb-learn-more]"),
                     element => !is_hidden(element)).length, 1,
        "The 'Learn more' link should be visible once.");
   }
 
   if (gIdentityHandler._identityPopup.state != "closed") {
     let hideEvent = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "popuphidden");
     info("Hiding identity popup");
     gIdentityHandler._identityPopup.hidePopup();
--- a/browser/components/controlcenter/content/panel.inc.xul
+++ b/browser/components/controlcenter/content/panel.inc.xul
@@ -1,32 +1,33 @@
 <!-- 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/. -->
 
 <panel id="identity-popup"
        type="arrow"
        hidden="true"
+       photon="true"
        role="alertdialog"
        onpopupshown="gIdentityHandler.onPopupShown(event);"
        onpopuphidden="gIdentityHandler.onPopupHidden(event);"
        orient="vertical">
 
   <broadcasterset>
     <broadcaster id="identity-popup-mcb-learn-more" class="text-link plain" value="&identity.learnMore;"/>
     <broadcaster id="identity-popup-insecure-login-forms-learn-more" class="text-link plain" value="&identity.learnMore;"/>
   </broadcasterset>
 
-  <panelmultiview id="identity-popup-multiView"
-                  mainViewId="identity-popup-mainView">
-    <panelview id="identity-popup-mainView" flex="1"
+  <photonpanelmultiview id="identity-popup-multiView"
+                        mainViewId="identity-popup-mainView">
+    <panelview id="identity-popup-mainView"
                descriptionheightworkaround="true">
       <!-- Security Section -->
       <hbox id="identity-popup-security" class="identity-popup-section">
-        <vbox id="identity-popup-security-content" flex="1">
+        <vbox class="identity-popup-security-content" flex="1">
           <label class="plain">
             <label class="identity-popup-headline identity-popup-host"></label>
             <label class="identity-popup-headline identity-popup-hostless" crop="end"/>
           </label>
           <description class="identity-popup-connection-not-secure"
                        when-connection="not-secure secure-cert-user-overridden">&identity.connectionNotSecure;</description>
           <description class="identity-popup-connection-secure"
                        when-connection="secure secure-ev">&identity.connectionSecure;</description>
@@ -43,17 +44,17 @@
             <description class="identity-popup-warning-yellow"
                          when-ciphers="weak">&identity.weakEncryption;</description>
             <description when-loginforms="insecure">&identity.insecureLoginForms2;</description>
           </vbox>
         </vbox>
         <button id="identity-popup-security-expander"
                 class="identity-popup-expander"
                 when-connection="not-secure secure secure-ev secure-cert-user-overridden"
-                oncommand="gIdentityHandler.toggleSubView('security', this)"/>
+                oncommand="gIdentityHandler.showSecuritySubView();"/>
       </hbox>
 
       <!-- Tracking Protection Section -->
       <hbox id="tracking-protection-container"
             class="identity-popup-section"
             when-connection="not-secure secure secure-ev secure-cert-user-overridden file">
         <vbox id="tracking-protection-content" flex="1">
           <label class="identity-popup-headline"
@@ -93,18 +94,19 @@
           <description id="identity-popup-permission-reload-hint">&identity.permissionsReloadHint;</description>
           <description id="identity-popup-permission-empty-hint">&identity.permissionsEmpty;</description>
         </vbox>
       </hbox>
     </panelview>
 
     <!-- Security SubView -->
     <panelview id="identity-popup-securityView"
+               title="&identity.securityView.label;"
                descriptionheightworkaround="true">
-      <vbox id="identity-popup-securityView-header">
+      <vbox class="identity-popup-security-content">
         <label class="plain">
           <label class="identity-popup-headline identity-popup-host"></label>
           <label class="identity-popup-headline identity-popup-hostless" crop="end"/>
         </label>
         <description class="identity-popup-connection-not-secure"
                      when-connection="not-secure secure-cert-user-overridden">&identity.connectionNotSecure;</description>
         <description class="identity-popup-connection-secure"
                      when-connection="secure secure-ev">&identity.connectionSecure;</description>
@@ -177,10 +179,10 @@
 
       <vbox id="identity-popup-securityView-footer">
         <!-- More Security Information -->
         <button label="&identity.moreInfoLinkText2;"
                 oncommand="gIdentityHandler.handleMoreInfoClick(event);"/>
       </vbox>
 
     </panelview>
-  </panelmultiview>
+  </photonpanelmultiview>
 </panel>
--- a/browser/components/customizableui/content/panelUI.xml
+++ b/browser/components/customizableui/content/panelUI.xml
@@ -67,17 +67,17 @@
   <binding id="panelview">
     <content>
       <xul:box class="panel-header" anonid="header">
         <xul:toolbarbutton anonid="back"
                            class="subviewbutton subviewbutton-iconic subviewbutton-back"
                            closemenu="none"
                            tabindex="0"
                            tooltip="&backCmd.label;"
-                           onclick="document.getBindingParent(this).panelMultiView.goBack(); this.blur()"/>
+                           oncommand="document.getBindingParent(this).panelMultiView.goBack(); this.blur()"/>
         <xul:label xbl:inherits="value=title"/>
       </xul:box>
       <children/>
     </content>
     <implementation>
       <property name="header"
                 readonly="true"
                 onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'header');"/>
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -727,16 +727,20 @@ you can use these alternative items. Oth
 <!ENTITY findSelectionCmd.commandkey "e">
 
 <!ENTITY spellAddDictionaries.label "Add Dictionaries…">
 <!ENTITY spellAddDictionaries.accesskey "A">
 
 <!ENTITY editBookmark.done.label                     "Done">
 <!ENTITY editBookmark.removeBookmark.accessKey       "R">
 
+<!-- LOCALIZATION NOTE (identity.securityView.label)
+     This is the header of the security subview in the Site Identity panel. -->
+<!ENTITY identity.securityView.label "Site Security">
+
 <!ENTITY identity.connectionSecure "Secure Connection">
 <!ENTITY identity.connectionNotSecure "Connection is Not Secure">
 <!ENTITY identity.connectionFile "This page is stored on your computer.">
 <!ENTITY identity.connectionVerified2 "You are securely connected to this site, owned by:">
 <!ENTITY identity.connectionInternal "This is a secure &brandShortName; page.">
 <!ENTITY identity.extensionPage "This page is loaded from an extension.">
 <!ENTITY identity.insecureLoginForms2 "Logins entered on this page could be compromised.">
 
--- a/browser/locales/en-US/chrome/browser/browser.properties
+++ b/browser/locales/en-US/chrome/browser/browser.properties
@@ -492,17 +492,16 @@ canvas.remember=Always remember my decis
 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.icon.tooltip=Show site information
 identity.extension.label=Extension (%S)
 identity.extension.tooltip=Loaded by extension: %S
 identity.showDetails.tooltip=Show connection details
-identity.hideDetails.tooltip=Hide connection details
 
 trackingProtection.intro.title=How Tracking Protection works
 # LOCALIZATION NOTE (trackingProtection.intro.description2):
 # %S is brandShortName. This string should match the one from Step 1 of the tour
 # when it starts from the button shown when a new private window is opened.
 trackingProtection.intro.description2=When you see the shield, %S is blocking some parts of the page that could track your browsing activity.
 # LOCALIZATION NOTE (trackingProtection.intro.step1of3): Indicates that the intro panel is step one of three in a tour.
 trackingProtection.intro.step1of3=1 of 3
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -50,38 +50,27 @@
 }
 
 /* Make sure hidden elements don't accidentally become visible from one of the
    above selectors (see Bug 1194258) */
 #identity-popup [hidden] {
   display: none !important;
 }
 
-#identity-popup,
-#identity-popup:not([panelopen]) .panel-viewstack[viewtype="main"]:not([transitioning]) #identity-popup-mainView {
-  /* 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;
-}
-
-.panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView menulist,
-.panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView button:not([panel-multiview-anchor]) {
-  -moz-user-focus: ignore;
-}
-
 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 0;
   /* Set default fill for icons in the identity popup.
      Individual icons can override this. */
   fill: currentColor;
   fill-opacity: .6;
 }
 
-.panel-mainview[panelid=identity-popup] {
+#identity-popup-mainView {
   min-width: 30em;
+  max-width: 30em;
 }
 
 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews {
   transform: translateX(100%);
   box-shadow: none;
 }
 
 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
@@ -92,36 +81,29 @@
   background: var(--arrowpanel-background);
   padding: 0;
 }
 
 .identity-popup-section:not(:first-child) {
   border-top: 1px solid var(--panel-separator-color);
 }
 
-#identity-popup-securityView,
-#identity-popup-security-content,
+.identity-popup-security-content,
 #identity-popup-permissions-content,
 #tracking-protection-content {
   background-repeat: no-repeat;
   background-position: 1em 1em;
   background-size: 24px auto;
-}
-
-#identity-popup-security-content,
-#identity-popup-permissions-content,
-#tracking-protection-content {
   padding: 0.5em 0 1em;
   /* .identity-popup-host depends on this width */
   padding-inline-start: calc(2em + 24px);
   padding-inline-end: 1em;
 }
 
-#identity-popup-securityView:-moz-locale-dir(rtl),
-#identity-popup-security-content:-moz-locale-dir(rtl),
+.identity-popup-security-content:-moz-locale-dir(rtl),
 #identity-popup-permissions-content:-moz-locale-dir(rtl),
 #tracking-protection-content:-moz-locale-dir(rtl) {
   background-position: calc(100% - 1em) 1em;
 }
 
 /* EXPAND BUTTON */
 
 .identity-popup-expander {
@@ -133,53 +115,40 @@
   -moz-appearance: none;
   background: url("chrome://browser/skin/arrow-left.svg") center no-repeat;
   background-size: 16px, auto;
   -moz-context-properties: fill;
   fill: currentColor;
   color: inherit;
 }
 
-.identity-popup-expander[panel-multiview-anchor] {
-  transition: background-color 250ms ease-in;
-  background-color: Highlight;
-  background-image: url("chrome://browser/skin/arrow-left.svg");
-  color: HighlightText;
-}
-
-.identity-popup-expander[panel-multiview-anchor]:-moz-locale-dir(rtl),
-.identity-popup-expander:not([panel-multiview-anchor]):-moz-locale-dir(ltr) {
+.identity-popup-expander:-moz-locale-dir(ltr) {
   transform: scaleX(-1);
 }
 
 .identity-popup-expander > .button-box {
+  border-right: 1px solid var(--panel-separator-color);
   padding: 0;
 }
 
-.identity-popup-expander:not([panel-multiview-anchor]) > .button-box {
-  border-right: 1px solid var(--panel-separator-color);
-}
-
 .identity-popup-expander:hover {
   background-color: var(--arrowpanel-dimmed);
-  background-image: url("chrome://browser/skin/arrow-left.svg");
 }
 
 .identity-popup-expander:hover:active {
   background-color: var(--arrowpanel-dimmed-further);
   box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
 }
 
 /* CONTENT */
 
 .identity-popup-permission-label,
 .identity-popup-permission-state-label,
-#identity-popup-security-content > description,
+.identity-popup-security-content > description,
 #identity-popup-security-descriptions > description,
-#identity-popup-securityView-header > description,
 #identity-popup-securityView-body > description,
 #identity-popup-permissions-content > description,
 #tracking-protection-content > description {
   font-size: 110%;
   margin: 0;
 }
 
 /* This element needs the pre-wrap because we add newlines to it in the code. */
@@ -189,17 +158,17 @@
 
 .identity-popup-headline {
   margin: 3px 0 4px;
   font-size: 150%;
 }
 
 .identity-popup-host {
   word-wrap: break-word;
-  /* 1em + 2em + 24px is #identity-popup-security-content padding
+  /* 1em + 2em + 24px is .identity-popup-security-content padding
    * 30em is .panel-mainview width */
   max-width: calc(30rem - 3rem - 24px - @identityPopupExpanderWidth@);
 }
 
 .identity-popup-warning-gray {
   padding-inline-start: 24px;
   background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%;
 }
@@ -215,83 +184,62 @@
 }
 /* SECURITY */
 .identity-popup-connection-secure {
   color: #058B00;
 }
 .identity-popup-connection-not-secure {
   color: #d74345;
 }
-#identity-popup-securityView {
-  overflow: hidden;
-}
 
-#identity-popup-securityView,
-#identity-popup-security-content {
+.identity-popup-security-content {
   background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg);
 }
 
-#identity-popup[connection=chrome] #identity-popup-securityView,
-#identity-popup[connection=chrome] #identity-popup-security-content {
+#identity-popup[connection=chrome] .identity-popup-security-content {
   background-image: url(chrome://branding/content/icon48.png);
 }
-#identity-popup[connection^=secure] #identity-popup-securityView,
-#identity-popup[connection^=secure] #identity-popup-security-content {
+#identity-popup[connection^=secure] .identity-popup-security-content {
   background-image: url(chrome://browser/skin/controlcenter/connection.svg);
   -moz-context-properties: fill;
   fill: #12BC00;
 }
 /* Use [isbroken] to make sure we don't show a lock on an http page. See Bug 1192162. */
-#identity-popup[ciphers=weak] #identity-popup-securityView,
-#identity-popup[ciphers=weak] #identity-popup-security-content,
-#identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-securityView,
-#identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-security-content {
+#identity-popup[ciphers=weak] .identity-popup-security-content,
+#identity-popup[mixedcontent~=passive-loaded][isbroken] .identity-popup-security-content {
   background-image: url(chrome://browser/skin/controlcenter/connection.svg);
   -moz-context-properties: fill, fill-opacity;
 }
 
-#identity-popup[connection=secure-cert-user-overridden] #identity-popup-securityView,
-#identity-popup[connection=secure-cert-user-overridden] #identity-popup-security-content {
+#identity-popup[connection=secure-cert-user-overridden] .identity-popup-security-content {
   background-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg);
   -moz-context-properties: fill, fill-opacity;
 }
 
-#identity-popup[loginforms=insecure] #identity-popup-securityView,
-#identity-popup[loginforms=insecure] #identity-popup-security-content,
-#identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-securityView,
-#identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-security-content {
+#identity-popup[loginforms=insecure] .identity-popup-security-content,
+#identity-popup[mixedcontent~=active-loaded][isbroken] .identity-popup-security-content {
   background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg);
   -moz-context-properties: fill, fill-opacity;
 }
 
-#identity-popup[connection=extension] #identity-popup-securityView,
-#identity-popup[connection=extension] #identity-popup-security-content {
+#identity-popup[connection=extension] .identity-popup-security-content {
   background-image: url(chrome://browser/skin/controlcenter/extension.svg);
   -moz-context-properties: fill;
   fill: #60bf4c;
 }
 
 #identity-popup-security-descriptions > description {
   margin-top: 6px;
   color: Graytext;
 }
 
-#identity-popup-securityView-header,
 #identity-popup-securityView-body {
   margin-inline-start: calc(2em + 24px);
   margin-inline-end: 1em;
-}
-
-#identity-popup-securityView-header {
-  margin-top: 0.5em;
-  border-bottom: 1px solid var(--panel-separator-color);
-  padding-bottom: 1em;
-}
-
-#identity-popup-securityView-body {
+  border-top: 1px solid var(--panel-separator-color);
   padding-inline-end: 1em;
 }
 
 #identity-popup-securityView-footer {
   margin-top: 1em;
   background-color: var(--arrowpanel-dimmed);
 }