Bug 2050924 - Fix security information component on the trust panel. r=credential-management-reviewers,fluent-reviewers,desktop-theme-reviewers,flod,mtigley,hjones

Specs https://mozilla-hub.atlassian.net/browse/FELTPY-80

Differential Revision: https://phabricator.services.mozilla.com/D309647

Author: codemist

browser/components/controlcenter/content/securityInformation.inc.xhtml

@@ -3,7 +3,7 @@
    - file, You can obtain one at https://mozilla.org/MPL/2.0/. -->
 
       <vbox class="panel-subview-body">
-        <hbox class="identity-popup-security-connection identity-popup-section" align="center" pack="center">
+        <hbox class="identity-popup-security-connection identity-popup-section" align="center">
           <image class="identity-popup-security-connection-icon"/>
           <description class="identity-popup-connection-not-secure security-view"
                        when-connection="not-secure secure-cert-user-overridden cert-error-page net-error-page https-only-error-page" data-l10n-id="identity-connection-not-secure-security-view"></description>
@@ -22,21 +22,22 @@
           </box>
         </hbox>
 
-        <html:moz-card id="identity-popup-securityView-extended-info">
+
+        <vbox id="identity-popup-securityView-extended-info">
           <!-- (EV) Certificate Information -->
-          <hbox>
+          <hbox id="identity-popup-content-cert-info">
             <vbox>
               <description id="identity-popup-content-owner-label"
                            when-connection="secure-ev secure-etsi"
-                           data-l10n-id="identity-ev-owner-label"/>
+                           data-l10n-id="identity-ev-owner-label2"/>
               <description id="identity-popup-content-owner"
                            when-connection="secure-ev secure-etsi"
                            class="header"/>
               <description id="identity-popup-content-supplemental"
                            when-connection="secure-ev secure-etsi"/>
               <description id="identity-popup-content-verifier-label"
                            when-connection="secure secure-ev secure-etsi"
-                           data-l10n-id="identity-verifier-label"/>
+                           data-l10n-id="identity-verifier-label2"/>
               <description id="identity-popup-content-verifier"
                            when-connection="secure secure-ev secure-etsi"
                            class="header"/>
@@ -123,5 +124,5 @@
               <description when-httpsonlystatus="failed-top" flex="1" data-l10n-id="identity-https-only-info-no-upgrade"></description>
             </vbox>
           </vbox>
-        </html:moz-card>
+        </vbox>
       </vbox>

browser/components/controlcenter/content/trustPanel.inc.xhtml

@@ -84,7 +84,8 @@
                class="PanelUI-subView"
                role="document">
 #include securityInformation.inc.xhtml
-      <html:a id="trustpanel-siteinformation-morelink" data-l10n-id="trustpanel-siteinformation-morelink" role="link" class="trustpanel-section panel-subview-footer-button"></html:a>
+      <toolbarseparator></toolbarseparator>
+      <toolbarbutton id="trustpanel-siteinformation-morelink" data-l10n-id="trustpanel-siteinformation-morelink" class="subviewbutton"></toolbarbutton>
     </panelview>
 
     <panelview id="trustpanel-blockerView"

browser/locales/en-US/browser/browser.ftl

@@ -469,8 +469,8 @@ identity-clear-site-data =
     .label = Clear cookies and site data…
 identity-connection-not-secure-security-view = You are not securely connected to this site.
 identity-connection-verified = You are securely connected to this site.
-identity-ev-owner-label = Certificate issued to:
-identity-verifier-label = Verified by:
+identity-ev-owner-label2 = Certificate issued to
+identity-verifier-label2 = Verified by
 # "qualified" here refers to the qualified website authentication certificate presented by the site.
 identity-etsi = Qualified as specified in Regulation (EU) 2024/1183.
 identity-description-custom-root2 = Mozilla does not recognize this certificate issuer. It may have been added from your operating system or by an administrator.

browser/themes/shared/controlcenter/panel.css

@@ -315,6 +315,17 @@
   margin-block: 0.5em;
 }
 
+#trustpanel-popup #identity-popup-content-verifier-label {
+  margin-block-end: var(--space-xsmall);
+}
+
+#trustpanel-popup #identity-popup-content-cert-info {
+  border-block-end: 1px solid var(--trustpanel-card-divider-color);
+  padding-block-end: var(--space-small);
+  margin-inline: calc(-1 * var(--panel-menuitem-padding-inline));
+  padding-inline: var(--panel-menuitem-padding-inline);
+}
+
 #identity-popup-content-supplemental {
   margin-block-end: 0.5em;
 }
@@ -325,9 +336,10 @@
 
 #identity-popup-securityView-extended-info {
   margin-inline: var(--panel-menuitem-margin-inline);
+  padding-inline: var(--panel-menuitem-padding-inline);
 
-  @media not (prefers-contrast) {
-    --card-background-color: color-mix(in srgb, currentColor 2%, transparent);
+  .header {
+    font-weight: var(--font-weight-heading);
   }
 
   #trustpanel-popup:is([connection="chrome"], [connection="file"], [connection="associated"], [connection="extension"]) & {
@@ -1179,6 +1191,10 @@
   padding-bottom: 0;
 }
 
+#trustpanel-securityInformationView {
+  padding-block-end: var(--space-small);
+}
+
 .moz-button-subviewbutton-nav {
   --button-font-weight: normal;
   --button-content-alignment: inline-start;