Bug 1703012: fix control center and identity panel proton styling r=desktop-theme-reviewers,fluent-reviewers,mconley,flod,pbz,Itiel

Migrates two strings to fluent and uses sentence casing. Places identity security block into a toolbar button. Fixes margin spacing. Removes green color from secure connection. Differential Revision: https://phabricator.services.mozilla.com/D111368
2021-04-16 16:38:02 +00:00 · 2021-04-16 16:38:02 +00:00 · 4f7010a85c
--- a/browser/base/content/browser-siteIdentity.js
+++ b/browser/base/content/browser-siteIdentity.js
@ -192,6 +192,29 @@ var gIdentityHandler = {
      let wrapper = document.getElementById("template-identity-popup");
      wrapper.replaceWith(wrapper.content);
      this._popupInitialized = true;
+
+      if (this._protonEnabled) {
+        // When proton is enabled, we need to place the security section
+        // within a toolbarbutton.
+        let button = document.createXULElement("toolbarbutton");
+        button.id = "identity-popup-security-button";
+        button.classList.add("subviewbutton-nav", "subviewbutton");
+        button.setAttribute("align", "center");
+        this.showSecuritySubView = this.showSecuritySubView.bind(this);
+        button.addEventListener("command", this.showSecuritySubView);
+        button.appendChild(
+          document
+            .getElementById("identity-popup-security")
+            .querySelector(".identity-popup-security-connection")
+        );
+
+        this._identityPopupMainView.insertBefore(
+          button,
+          this._identityPopupMainView.querySelector("toolbarseparator")
+            .nextSibling
+        );
+        this._popupExpander.hidden = true;
+      }
    }
  },

@ -395,6 +418,16 @@ var gIdentityHandler = {
    );
    return this._useGrayLockIcon;
  },
+  get _protonEnabled() {
+    delete this._protonEnabled;
+    XPCOMUtils.defineLazyPreferenceGetter(
+      this,
+      "_protonEnabled",
+      "browser.proton.doorhangers.enabled",
+      false
+    );
+    return this._protonEnabled;
+  },

  /**
   * Handles clicks on the "Clear Cookies and Site Data" button.
@ -982,6 +1015,17 @@ var gIdentityHandler = {
      connection = "file";
    }

+    if (this._protonEnabled) {
+      document.getElementById("identity-popup-security-button").disabled = ![
+        "not-secure",
+        "secure",
+        "secure-ev",
+        "secure-cert-user-overridden",
+        "cert-error-page",
+        "https-only-error-page",
+      ].includes(connection);
+    }
+
    // Determine the mixed content state.
    let mixedcontent = [];
    if (this._isMixedPassiveContentLoaded) {
@ -1097,16 +1141,20 @@ var gIdentityHandler = {
    }

    // Push the appropriate strings out to the UI.
-    this._identityPopupMainViewHeaderLabel.textContent = gNavigatorBundle.getFormattedString(
-      "identity.headerMainWithHost",
-      [host]
+    document.l10n.setAttributes(
+      this._identityPopupMainViewHeaderLabel,
+      "identity-site-information",
+      {
+        host,
+      }
    );

-    this._identityPopupSecurityView.setAttribute(
-      "title",
-      gNavigatorBundle.getFormattedString("identity.headerSecurityWithHost", [
+    document.l10n.setAttributes(
+      this._identityPopupSecurityView,
+      "identity-header-security-with-host",
+      {
        host,
-      ])
+      }
    );

    this._identityPopupSecurityEVContentOwner.textContent = gNavigatorBundle.getFormattedString(
--- a/browser/base/content/test/siteIdentity/browser_check_identity_state.js
+++ b/browser/base/content/test/siteIdentity/browser_check_identity_state.js
@ -38,12 +38,18 @@ function getSecurityConnectionBG() {
    .getPropertyValue("background-image");
 }

-function getReaderModeURL() {
+async function getReaderModeURL() {
  // Gets the reader mode URL from "identity-popup mainView panel header span"
  document.getElementById("identity-icon-box").click();
  gIdentityHandler.refreshIdentityPopup();
-  return document.getElementById("identity-popup-mainView-panel-header-span")
-    .innerHTML;
+
+  let headerSpan = document.getElementById(
+    "identity-popup-mainView-panel-header-span"
+  );
+  await BrowserTestUtils.waitForCondition(() =>
+    headerSpan.innerHTML.includes("example.com")
+  );
+  return headerSpan.innerHTML;
 }

 // This test is slow on Linux debug e10s
@ -581,10 +587,10 @@ async function readerUriTest(secureCheck) {

  let newTab = await loadNewTab("about:reader?url=http://example.com");
  gBrowser.selectedTab = newTab;
-  let readerURL = getReaderModeURL();
+  let readerURL = await getReaderModeURL();
  is(
    readerURL,
-    "Site Information for example.com",
+    "Site information for example.com",
    "should be the correct URI in reader mode"
  );

--- a/browser/base/content/test/siteIdentity/browser_identityPopup_focus.js
+++ b/browser/base/content/test/siteIdentity/browser_identityPopup_focus.js
@ -48,7 +48,11 @@ add_task(async function testIdentityPopupFocusKeyboard() {
    await shown;
    is(
      Services.focus.focusedElement,
-      document.getElementById("identity-popup-security-expander")
+      document.getElementById(
+        gProtonDoorhangers
+          ? "identity-popup-security-button"
+          : "identity-popup-security-expander"
+      )
    );
  });
 });
@ -70,7 +74,11 @@ add_task(async function testSiteSecurityTabOrder() {
    await shown;
    is(
      Services.focus.focusedElement,
-      document.getElementById("identity-popup-security-expander")
+      document.getElementById(
+        gProtonDoorhangers
+          ? "identity-popup-security-button"
+          : "identity-popup-security-expander"
+      )
    );

    // 2. Access the Site Security section.
--- a/browser/components/controlcenter/content/identityPanel.inc.xhtml
+++ b/browser/components/controlcenter/content/identityPanel.inc.xhtml
@ -23,12 +23,13 @@
          <html:span id="identity-popup-mainView-panel-header-span" role="heading" aria-level="1"/>
        </label>
      </vbox>
+      <toolbarseparator></toolbarseparator>

      <!-- Security Section -->
-      <hbox id="identity-popup-security" class="identity-popup-section">
+      <hbox id="identity-popup-security" class="identity-popup-section" flex="1">
        <vbox class="identity-popup-security-content" flex="1">

-          <vbox class="identity-popup-security-connection">
+          <vbox class="identity-popup-security-connection identity-button">
            <hbox flex="1">
              <description class="identity-popup-connection-not-secure"
                          when-connection="not-secure secure-cert-user-overridden secure-custom-root cert-error-page https-only-error-page" data-l10n-id="identity-connection-not-secure"></description>
@ -104,9 +105,9 @@
               descriptionheightworkaround="true">
      <vbox class="identity-popup-security-content">
        <vbox class="identity-popup-security-connection">
-          <description class="identity-popup-connection-not-secure"
+          <description class="identity-popup-connection-not-secure security-view"
                       when-connection="not-secure secure-cert-user-overridden cert-error-page https-only-error-page" data-l10n-id="identity-connection-not-secure-security-view"></description>
-          <description class="identity-popup-connection-secure"
+          <description class="identity-popup-connection-secure security-view"
                       when-connection="secure secure-ev" data-l10n-id="identity-connection-verified"></description>
        </vbox>
      </vbox>
--- a/browser/locales/en-US/browser/browser.ftl
+++ b/browser/locales/en-US/browser/browser.ftl
@ -291,6 +291,13 @@ bookmark-panel =

 ## Identity Panel

+# Variables
+#  $host (String): the hostname of the site that is being displayed.
+identity-site-information = Site information for { $host }
+# Variables
+#  $host (String): the hostname of the site that is being displayed.
+identity-header-security-with-host =
+    .title = Connection security for { $host }
 identity-connection-not-secure = Connection not secure
 identity-connection-secure = Connection secure
 identity-connection-internal = This is a secure { -brand-short-name } page.
@ -321,7 +328,7 @@ identity-permissions-storage-access-learn-more = Learn more

 identity-permissions-reload-hint = You may need to reload the page for changes to apply.
 identity-clear-site-data =
-    .label = Clear Cookies and 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:
--- a/browser/locales/en-US/chrome/browser/browser.properties
+++ b/browser/locales/en-US/chrome/browser/browser.properties
@ -432,10 +432,8 @@ webauthn.anonymize=Anonymize anyway
 # Spoof Accept-Language prompt
 privacy.spoof_english=Changing your language setting to English will make you more difficult to identify and enhance your privacy. Do you want to request English language versions of web pages?

-# LOCALIZATION NOTE (identity.headerMainWithHost, identity.headerSecurityWithHost):
+# LOCALIZATION NOTE (identity.identified.verifier, identity.identified.state_and_country, identity.ev.contentOwner2):
 # %S is the hostname of the site that is being displayed.
-identity.headerMainWithHost=Site Information for %S
-identity.headerSecurityWithHost=Connection Security for %S
 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
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@ -121,14 +121,6 @@
  min-height: 30px;
 }

-.identity-popup-section {
-  border-top: 1px solid var(--panel-separator-color);
-}
-
-#identity-popup-securityView .identity-popup-security-content {
-  border-bottom: 1px solid var(--panel-separator-color);
-}
-
 .identity-popup-security-connection {
  background-repeat: no-repeat;
  background-position: 2em 50%;
@ -144,16 +136,13 @@
  margin-block: 0;
 }

-.identity-popup-security-connection,
-#identity-popup-security-description,
-#identity-popup-security-httpsonlymode {
-  /* icon indent + 16px icon width + 6px description margin
-     (total of 12px margin with the native 6px description margin) */
-  padding-inline: calc(2em + 22px) 1em;
+.identity-popup-security-connection > hbox {
+  margin-inline-start: 16px;
 }

 #identity-popup-security-description > description {
-  margin-top: 0.5em;
+  font-weight: 600;
+  margin-bottom: 1em;
 }

 #identity-popup-security-httpsonlymode > label {
@ -171,24 +160,18 @@
 #identity-popup-security-httpsonlymode-menulist {
  text-overflow: ellipsis;
  overflow: hidden;
+  width: 11em;
 }
 #identity-popup-security-httpsonlymode-info {
  font-size: 0.85em;
  color: var(--panel-description-color);
-}
-
-.identity-popup-connection-secure.upgraded {
-  margin-inline: 0;
+  margin-bottom: 12px
 }

 #permission-popup-permissions-content {
  padding-inline: 1.25em;
 }

-.identity-popup-security-content {
-  padding-block: 1em;
-}
-
 #protections-popup-content {
  background-repeat: no-repeat;
  background-position: 1em 1em;
@ -202,6 +185,36 @@
  background-position: calc(100% - 1em) 1em;
 }

+@media not (-moz-proton-doorhangers) {
+#identity-popup-securityView .identity-popup-security-content {
+  border-bottom: 1px solid var(--panel-separator-color);
+}
+
+.identity-popup-security-connection,
+#identity-popup-security-description,
+#identity-popup-security-httpsonlymode {
+  /* icon indent + 16px icon width + 6px description margin
+     (total of 12px margin with the native 6px description margin) */
+  padding-inline: calc(2em + 22px) 1em;
+}
+
+.identity-popup-security-connection > hbox {
+  margin-inline-start: 0;
+}
+
+#identity-popup-security-httpsonlymode-info {
+  margin-bottom: 0;
+}
+
+.identity-popup-connection-secure.upgraded {
+  margin-inline: 0;
+}
+
+#identity-popup-security-description > description {
+  margin-block: 0.5em 0.3em;
+  font-weight: normal;
+}
+
 /* EXPAND BUTTON */

 .identity-popup-expander {
@ -236,8 +249,10 @@
  background-color: var(--arrowpanel-dimmed-further);
  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
 }
+} /** END not PROTON **/

@media not (-moz-proton-doorhangers) {
+.identity-popup-security-content,
 #permission-popup-permissions-content {
  padding-block: 1em;
 }
@ -277,10 +292,7 @@
  -moz-box-align: center;
 }

-#identity-popup-mainView-panel-header {
-  padding: var(--vertical-section-padding) var(--horizontal-padding);
-}
-
+#identity-popup-mainView-panel-header,
 #permission-popup-mainView-panel-header {
  padding: 4px 8px;
 }
@ -327,18 +339,36 @@
  max-width: calc(var(--popup-width) - 2 * var(--horizontal-padding));
 }

+#identity-popup-mainView-panel-header-span,
 #permission-popup-mainView-panel-header-span {
  margin-top: 4px;
 }

@media not (-moz-proton-doorhangers) {
-#permission-popup-mainView-panel-header {
+#permission-popup-mainView-panel-header,
+#identity-popup-mainView-panel-header {
  padding: var(--vertical-section-padding) 2px;
 }

+#identity-popup-mainView-panel-header-span,
 #permission-popup-mainView-panel-header-span {
  margin-top: 0;
 }
+
+.identity-popup-warning-box {
+  padding: 0.5em;
+}
+
+.identity-popup-warning-gray {
+  background-color: var(--arrowpanel-dimmed);
+  border: 1px solid var(--panel-separator-color);
+}
+
+.identity-popup-warning-yellow {
+  color: black;
+  background-color: #FFEEBF;
+  border: 1px solid #FFE083;
+}
 } /** END not PROTON **/

 #protections-popup[toast] #protections-popup-info-button {
@ -363,23 +393,9 @@
  white-space: pre-wrap;
 }

-.identity-popup-warning-box {
-  padding: 0.5em;
-}
-
-.identity-popup-warning-gray {
-  background-color: var(--arrowpanel-dimmed);
-  border: 1px solid var(--panel-separator-color);
-}
-
-.identity-popup-warning-yellow {
-  color: black;
-  background-color: #FFEEBF;
-  border: 1px solid #FFE083;
-}
-
 /* SECURITY */

+@media not (-moz-proton-doorhangers) {
 .identity-popup-connection-secure {
  color: #058B00;
 }
@ -388,10 +404,24 @@
  color: #30e60b;
 }

+#identity-popup[connection^=secure] .identity-popup-security-connection {
+  fill: #12BC00;
+}
+
+#identity-popup[connection=extension] .identity-popup-security-connection {
+  fill: #60bf4c;
+}
+
 #identity-popup[mixedcontent~=active-loaded] .identity-popup-connection-not-secure,
 #identity-popup:not([mixedcontent]) .identity-popup-connection-not-secure {
  color: #d74345;
 }
+} /** END not PROTON **/
+
+#identity-popup[mixedcontent~=active-loaded] .identity-popup-connection-not-secure,
+#identity-popup:not([mixedcontent]) .identity-popup-connection-not-secure {
+  color: #C50042;
+}

 .identity-popup-security-connection {
  background-image: url(chrome://global/skin/icons/security-broken.svg);
@ -410,10 +440,6 @@
  -moz-context-properties: fill;
 }

-#identity-popup[connection^=secure] .identity-popup-security-connection {
-  fill: #12BC00;
-}
-
 #identity-popup[connection^=secure][lock-icon-gray] .identity-popup-security-connection {
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
@ -441,20 +467,83 @@
 #identity-popup[connection=extension] .identity-popup-security-connection {
  background-image: url(chrome://mozapps/skin/extensions/extension.svg);
  -moz-context-properties: fill;
-  fill: #60bf4c;
 }

+#identity-popup-securityView-body {
+  margin-inline: 10px;
+  padding-inline-end: 1em;
+  padding-top: 4px;
+}
+
+@media not (-moz-proton-doorhangers) {
 #identity-popup-securityView-body {
  /* icon indent + 16px icon width + 6px description margin
    (total of 12px margin with the native 6px description margin) */
  margin-inline: calc(2em + 22px) 1em;
-  padding-inline-end: 1em;
  padding-top: 0.5em;
 }

 #identity-popup-more-info-footer {
  margin-top: 1em;
 }
+} /** END not PROTON **/
+
+@media (-moz-proton-doorhangers) {
+#identity-popup-multiView {
+  height: -moz-fit-content;
+}
+
+.identity-popup-security-connection > hbox > description {
+  padding: 2px;
+  margin-inline-start: 8px;
+  margin-block: 0;
+}
+
+#identity-popup-security-button {
+  padding: 3px;
+  margin-bottom: 8px;
+  -moz-box-pack: start;
+}
+
+.identity-popup-security-connection {
+  padding: 2px;
+  background-position-x: 16px;
+}
+
+.identity-popup-security-connection:-moz-locale-dir(rtl) {
+  background-position-x: right 16px;
+}
+
+.identity-popup-security-connection.identity-button {
+  padding: 0;
+  width: 28em;
+  background-position-x: 4px;
+}
+
+.identity-popup-security-connection.identity-button:-moz-locale-dir(rtl) {
+  background-position-x: right 4px;
+}
+
+.identity-popup-connection-secure.security-view,
+.identity-popup-connection-not-secure.security-view {
+  padding: 2px;
+  margin-inline-start: 36px;
+}
+
+#identity-popup-mainView-panel-header-span {
+  margin-top: 4px;
+}
+
+#identity-popup-clear-sitedata-footer {
+  margin-block: -4px 8px;
+}
+
+#identity-popup-security-httpsonlymode,
+#identity-popup-security-ev-content-owner,
+.identity-popup-warning-box {
+  padding-inline: 2.4em 3em;
+}
+}/** END Proton **/

 #identity-popup-securityView-body > label:not(.plain),
 #identity-popup-content-verifier ~ description {
@ -830,6 +919,10 @@ description#identity-popup-content-verifier,
 .permission-popup-permission-item {
  padding-inline-end: 8px;
 }
+
+#identity-popup-security {
+  margin-top: -6px;
+}
 } /** END not PROTON **/

 .permission-popup-permission-label-subitem {
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@ -1581,6 +1581,7 @@ panelview .toolbarbutton-1,
  color: var(--panel-shortcut-color);
 }

+#identity-popup-mainView .subviewbutton-nav::after,
 .widget-overflow-list .subviewbutton-nav::after,
 .PanelUI-subView .subviewbutton-nav::after {
  -moz-context-properties: fill, fill-opacity;
@ -1590,11 +1591,17 @@ panelview .toolbarbutton-1,
  display: -moz-box;
 }

+#identity-popup-mainView .subviewbutton-nav:-moz-locale-dir(rtl)::after,
 .widget-overflow-list .subviewbutton-nav:-moz-locale-dir(rtl)::after,
 .PanelUI-subView .subviewbutton-nav:-moz-locale-dir(rtl)::after {
  scale: -1 1;
 }

+#identity-popup-security-button > .toolbarbutton-text {
+  text-align: start;
+  text-shadow: none;
+}
+
@media not (-moz-proton) {
 .widget-overflow-list .subviewbutton-nav::after,
 .PanelUI-subView .subviewbutton-nav::after {
@ -1835,6 +1842,8 @@ menuitem.panel-subview-footer@menuStateActive@,
 .PanelUI-subView toolbarseparator,
 #permission-popup-mainView > toolbarseparator,
 #protections-popup-mainView toolbarseparator,
+#identity-popup-mainView > toolbarseparator,
+#identity-popup-securityView > toolbarseparator,
 .cui-widget-panelview menuseparator,
 .cui-widget-panel toolbarseparator {
  appearance: none;
--- a/python/l10n/fluent_migrations/bug_1703012_control_center.py
+++ b/python/l10n/fluent_migrations/bug_1703012_control_center.py
@ -0,0 +1,45 @@
+# coding=utf8
+
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+
+from __future__ import absolute_import
+from fluent.migrate.helpers import transforms_from
+import fluent.syntax.ast as FTL
+from fluent.migrate import COPY, PLURALS, REPLACE, REPLACE_IN_TEXT
+from fluent.migrate.helpers import COPY, VARIABLE_REFERENCE
+
+
+def migrate(ctx):
+    """Bug 1703012: fix control center and identity panel proton styling - part {index}"""
+    ctx.add_transforms(
+        "browser/browser/browser.ftl",
+        "browser/browser/browser.ftl",
+        [
+            FTL.Message(
+                id=FTL.Identifier("identity-site-information"),
+                value=REPLACE(
+                    "browser/chrome/browser/browser.properties",
+                    "identity.headerMainWithHost",
+                    {
+                        "%1$S": VARIABLE_REFERENCE("host"),
+                    },
+                ),
+            ),
+            FTL.Message(
+                id=FTL.Identifier("identity-header-security-with-host"),
+                attributes=[
+                    FTL.Attribute(
+                        id=FTL.Identifier("title"),
+                        value=REPLACE(
+                            "browser/chrome/browser/browser.properties",
+                            "identity.headerSecurityWithHost",
+                            {
+                                "%1$S": VARIABLE_REFERENCE("host"),
+                            },
+                        ),
+                    ),
+                ],
+            ),
+        ],
+    )
--- a/toolkit/themes/shared/popupnotification.inc.css
+++ b/toolkit/themes/shared/popupnotification.inc.css
@ -149,6 +149,7 @@
 }

 .panel-footer.panel-footer-menulike > button > .button-box {
+  padding: 0;
  display: inline;
 }