Bug 1476220 - Show a "site information" header in the identity popup. r=paolo
authorJohann Hofmann <jhofmann@mozilla.com>
Tue, 09 Oct 2018 13:47:13 +0000
changeset 496000 679d009963f936849de348afb08098a0702f148d
parent 495999 367c440ef7f7c490d0f845230afccac57f187646
child 496001 ed9091a418b9393f04c82a18b03b484609958efd
push id9984
push userffxbld-merge
push dateMon, 15 Oct 2018 21:07:35 +0000
treeherdermozilla-beta@183d27ea8570 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspaolo
bugs1476220
milestone64.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1476220 - Show a "site information" header in the identity popup. r=paolo Differential Revision: https://phabricator.services.mozilla.com/D7090
browser/base/content/browser-siteIdentity.js
browser/base/content/test/siteIdentity/browser_identity_UI.js
browser/components/controlcenter/content/panel.inc.xul
browser/locales/en-US/chrome/browser/browser.dtd
browser/locales/en-US/chrome/browser/browser.properties
browser/themes/shared/controlcenter/panel.inc.css
testing/firefox-ui/tests/functional/security/test_dv_certificate.py
testing/firefox-ui/tests/functional/security/test_ev_certificate.py
testing/marionette/puppeteer/firefox/firefox_puppeteer/ui/browser/toolbars.py
--- a/browser/base/content/browser-siteIdentity.js
+++ b/browser/base/content/browser-siteIdentity.js
@@ -110,25 +110,24 @@ var gIdentityHandler = {
   get _identityPopupMultiView() {
     delete this._identityPopupMultiView;
     return this._identityPopupMultiView = document.getElementById("identity-popup-multiView");
   },
   get _identityPopupMainView() {
     delete this._identityPopupMainView;
     return this._identityPopupMainView = document.getElementById("identity-popup-mainView");
   },
-  get _identityPopupContentHosts() {
-    delete this._identityPopupContentHosts;
-    return this._identityPopupContentHosts =
-      [...document.querySelectorAll(".identity-popup-host")];
+  get _identityPopupMainViewHeaderLabel() {
+    delete this._identityPopupMainViewHeaderLabel;
+    return this._identityPopupMainViewHeaderLabel =
+      document.getElementById("identity-popup-mainView-panel-header-span");
   },
-  get _identityPopupContentHostless() {
-    delete this._identityPopupContentHostless;
-    return this._identityPopupContentHostless =
-      [...document.querySelectorAll(".identity-popup-hostless")];
+  get _identityPopupContentHost() {
+    delete this._identityPopupContentHost;
+    return this._identityPopupContentHost = document.getElementById("identity-popup-host");
   },
   get _identityPopupContentOwner() {
     delete this._identityPopupContentOwner;
     return this._identityPopupContentOwner =
       document.getElementById("identity-popup-content-owner");
   },
   get _identityPopupContentSupp() {
     delete this._identityPopupContentSupp;
@@ -698,34 +697,30 @@ var gIdentityHandler = {
       updateAttribute(element, "isbroken", this._isBroken);
     }
 
     // Initialize the optional strings to empty values
     let supplemental = "";
     let verifier = "";
     let host = "";
     let owner = "";
-    let hostless = false;
 
     try {
       host = this.getEffectiveHost();
     } catch (e) {
       // Some URIs might have no hosts.
     }
 
+    if (this._pageExtensionPolicy) {
+      host = this._pageExtensionPolicy.name;
+    }
+
     // Fallback for special protocols.
     if (!host) {
       host = this._uri.specIgnoringRef;
-      // Special URIs without a host (eg, about:) should crop the end so
-      // the protocol can be seen.
-      hostless = true;
-    }
-
-    if (this._pageExtensionPolicy) {
-      host = this._pageExtensionPolicy.name;
     }
 
     // Fill in the CA name if we have a valid TLS certificate.
     if (this._isSecure || this._isCertUserOverridden) {
       verifier = this._identityIconLabels.tooltipText;
     }
 
     // Fill in organization information if we have a valid EV certificate.
@@ -742,24 +737,19 @@ var gIdentityHandler = {
                                                             [iData.state, iData.country]);
       else if (iData.state) // State only
         supplemental += iData.state;
       else if (iData.country) // Country only
         supplemental += iData.country;
     }
 
     // Push the appropriate strings out to the UI.
-    this._identityPopupContentHosts.forEach((el) => {
-      el.textContent = host;
-      el.hidden = hostless;
-    });
-    this._identityPopupContentHostless.forEach((el) => {
-      el.setAttribute("value", host);
-      el.hidden = !hostless;
-    });
+    this._identityPopupMainViewHeaderLabel.textContent =
+      gNavigatorBundle.getFormattedString("identity.headerWithHost", [host]);
+    this._identityPopupContentHost.textContent = host;
     this._identityPopupContentOwner.textContent = owner;
     this._identityPopupContentSupp.textContent = supplemental;
     this._identityPopupContentVerif.textContent = verifier;
 
     // Update per-site permissions section.
     this.updateSitePermissions();
   },
 
--- a/browser/base/content/test/siteIdentity/browser_identity_UI.js
+++ b/browser/base/content/test/siteIdentity/browser_identity_UI.js
@@ -1,21 +1,11 @@
 /* Tests for correct behaviour of getEffectiveHost on identity handler */
 
-function test() {
-  waitForExplicitFinish();
-  requestLongerTimeout(2);
-
-  ok(gIdentityHandler, "gIdentityHandler should exist");
-
-  BrowserTestUtils.openNewForegroundTab(gBrowser, "about:blank", true).then(() => {
-    BrowserTestUtils.addContentEventListener(gBrowser.selectedBrowser, "load", checkResult, true);
-    nextTest();
-  });
-}
+requestLongerTimeout(2);
 
 // Greek IDN for 'example.test'.
 var idnDomain = "\u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1.\u03B4\u03BF\u03BA\u03B9\u03BC\u03AE";
 var tests = [
   {
     name: "normal domain",
     location: "http://test1.example.org/",
     effectiveHost: "test1.example.org",
@@ -24,127 +14,106 @@ var tests = [
     name: "view-source",
     location: "view-source:http://example.com/",
     effectiveHost: null,
   },
   {
     name: "normal HTTPS",
     location: "https://example.com/",
     effectiveHost: "example.com",
-    isHTTPS: true,
   },
   {
     name: "IDN subdomain",
     location: "http://sub1.xn--hxajbheg2az3al.xn--jxalpdlp/",
     effectiveHost: "sub1." + idnDomain,
   },
   {
     name: "subdomain with port",
     location: "http://sub1.test1.example.org:8000/",
     effectiveHost: "sub1.test1.example.org",
   },
   {
     name: "subdomain HTTPS",
     location: "https://test1.example.com/",
     effectiveHost: "test1.example.com",
-    isHTTPS: true,
   },
   {
     name: "view-source HTTPS",
     location: "view-source:https://example.com/",
     effectiveHost: null,
-    isHTTPS: true,
   },
   {
     name: "IP address",
     location: "http://127.0.0.1:8888/",
     effectiveHost: "127.0.0.1",
   },
 ];
 
-var gCurrentTest, gCurrentTestIndex = -1, gTestDesc, gPopupHidden;
-// Go through the tests in both directions, to add additional coverage for
-// transitions between different states.
-var gForward = true;
-var gCheckETLD = false;
-function nextTest() {
-  if (!gCheckETLD) {
-    if (gForward)
-      gCurrentTestIndex++;
-    else
-      gCurrentTestIndex--;
+add_task(async function test() {
+  ok(gIdentityHandler, "gIdentityHandler should exist");
+
+  await BrowserTestUtils.openNewForegroundTab(gBrowser);
+
+  for (let i = 0; i < tests.length; i++) {
+    await runTest(i, true);
+  }
 
-    if (gCurrentTestIndex == tests.length) {
-      // Went too far, reverse
-      gCurrentTestIndex--;
-      gForward = false;
-    }
+  gBrowser.removeCurrentTab();
+  await BrowserTestUtils.openNewForegroundTab(gBrowser);
 
-    if (gCurrentTestIndex == -1) {
-      gBrowser.removeCurrentTab();
-      finish();
-      return;
-    }
+  for (let i = tests.length - 1; i >= 0; i--) {
+    await runTest(i, false);
+  }
 
-    gCurrentTest = tests[gCurrentTestIndex];
-    gTestDesc = "#" + gCurrentTestIndex + " (" + gCurrentTest.name + ")";
-    if (!gForward)
-      gTestDesc += " (second time)";
-    if (gCurrentTest.isHTTPS) {
-      gCheckETLD = true;
-    }
+  gBrowser.removeCurrentTab();
+});
 
-    // Navigate to the next page, which will cause checkResult to fire.
-    let spec = gBrowser.selectedBrowser.currentURI.spec;
-    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(async () => {
-        ok(!BrowserTestUtils.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)";
-    gBrowser.selectedBrowser.reloadWithFlags(Ci.nsIWebNavigation.LOAD_FLAGS_BYPASS_CACHE |
-                                             Ci.nsIWebNavigation.LOAD_FLAGS_BYPASS_PROXY);
+async function runTest(i, forward) {
+  let currentTest = tests[i];
+  let testDesc = "#" + i + " (" + currentTest.name + ")";
+  if (!forward) {
+    testDesc += " (second time)";
   }
-}
+
+  info("Running test " + testDesc);
 
-function checkResult() {
-  if (gBrowser.selectedBrowser.currentURI.spec == "about:blank")
-    return;
+  let popupHidden = null;
+  if ((forward && i > 0) || (!forward && i < tests.length - 1)) {
+    popupHidden = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "popuphidden");
+  }
+
+  let loaded = BrowserTestUtils.browserLoaded(gBrowser.selectedBrowser, false, currentTest.location);
+  BrowserTestUtils.loadURI(gBrowser.selectedBrowser, currentTest.location);
+  await loaded;
+  await popupHidden;
+  ok(BrowserTestUtils.is_hidden(gIdentityHandler._identityPopup), "Control Center is hidden");
 
   // Sanity check other values, and the value of gIdentityHandler.getEffectiveHost()
-  is(gIdentityHandler._uri.spec, gCurrentTest.location, "location matches for test " + gTestDesc);
+  is(gIdentityHandler._uri.spec, currentTest.location, "location matches for test " + testDesc);
   // getEffectiveHost can't be called for all modes
-  if (gCurrentTest.effectiveHost === null) {
+  if (currentTest.effectiveHost === null) {
     let identityBox = document.getElementById("identity-box");
     ok(identityBox.className == "unknownIdentity" ||
        identityBox.className == "chromeUI", "mode matched");
   } else {
-    is(gIdentityHandler.getEffectiveHost(), gCurrentTest.effectiveHost, "effectiveHost matches for test " + gTestDesc);
+    is(gIdentityHandler.getEffectiveHost(), currentTest.effectiveHost, "effectiveHost matches for test " + testDesc);
   }
 
-  if (gPopupHidden) {
-    info("Waiting for the Control Center to hide");
-    gPopupHidden.then(() => {
-      gPopupHidden = null;
-      ok(BrowserTestUtils.is_hidden(gIdentityHandler._identityPopup), "Control Center is hidden");
-      executeSoon(nextTest);
-    });
-  } else {
-    executeSoon(nextTest);
-  }
+  // Open the Control Center and make sure it closes after nav (Bug 1207542).
+  let popupShown = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "popupshown");
+  gIdentityHandler._identityBox.click();
+  info("Waiting for the Control Center to be shown");
+  await popupShown;
+  ok(!BrowserTestUtils.is_hidden(gIdentityHandler._identityPopup), "Control Center is visible");
+  let displayedHost = currentTest.effectiveHost || currentTest.location;
+  ok(gIdentityHandler._identityPopupMainViewHeaderLabel.textContent.includes(displayedHost),
+     "identity UI header shows the host for test " + testDesc);
+
+  // 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;
+
+  displayedHost = currentTest.effectiveHost || currentTest.location;
+  ok(gIdentityHandler._identityPopupContentHost.textContent.includes(displayedHost),
+     "security subview header shows the host for test " + testDesc);
 }
--- a/browser/components/controlcenter/content/panel.inc.xul
+++ b/browser/components/controlcenter/content/panel.inc.xul
@@ -10,22 +10,27 @@
        onpopupshown="gIdentityHandler.onPopupShown(event);"
        onpopuphidden="gIdentityHandler.onPopupHidden(event);"
        orient="vertical">
 
   <panelmultiview id="identity-popup-multiView"
                   mainViewId="identity-popup-mainView">
     <panelview id="identity-popup-mainView"
                descriptionheightworkaround="true">
+      <vbox id="identity-popup-mainView-panel-header">
+        <label>
+          <html:span id="identity-popup-mainView-panel-header-span"/>
+        </label>
+      </vbox>
+
       <!-- Security Section -->
       <hbox id="identity-popup-security" class="identity-popup-section">
         <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 class="identity-popup-headline">&identity.connection;</label>
           </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>
           <description when-connection="chrome">&identity.connectionInternal;</description>
           <description when-connection="file">&identity.connectionFile;</description>
           <description when-connection="extension">&identity.extensionPage;</description>
@@ -160,18 +165,17 @@
     </panelview>
 
     <!-- Security SubView -->
     <panelview id="identity-popup-securityView"
                title="&identity.securityView.label;"
                descriptionheightworkaround="true">
       <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 class="identity-popup-headline" id="identity-popup-host"></label>
         </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>
       </vbox>
 
       <vbox id="identity-popup-securityView-body" class="panel-view-body-unscrollable">
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -781,16 +781,17 @@ you can use these alternative items. Oth
 <!ENTITY editBookmark.done.label                     "Done">
 <!ENTITY editBookmark.showForNewBookmarks.label       "Show editor when saving">
 <!ENTITY editBookmark.showForNewBookmarks.accesskey   "S">
 
 <!-- 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.connection "Connection">
 <!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
@@ -485,16 +485,19 @@ webauthn.cancel=Cancel
 webauthn.cancel.accesskey=c
 webauthn.proceed=Proceed
 webauthn.proceed.accesskey=p
 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.headerWithHost):
+# %S is the hostname of the site that is being displayed.
+identity.headerWithHost=Site Information 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
 
 # LOCALIZATION NOTE (identity.notSecure.label):
 # Keep this string as short as possible, this is displayed in the URL bar
 # use a synonym for "safe" or "private" if "secure" is too long.
 identity.notSecure.label=Not Secure
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -1,15 +1,13 @@
 %if 0
 /* 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/. */
 %endif
-%filter substitution
-%define identityPopupExpanderWidth 38px
 
 /* Hide all conditional elements by default. */
 :-moz-any([when-connection],[when-mixedcontent],[when-ciphers],[when-loginforms]) {
   display: none;
 }
 
 /* This is used by screenshots tests to hide intermittently different
  * identity popup shadows (see bug 1425253). */
@@ -69,17 +67,17 @@
   fill-opacity: .6;
 }
 
 #identity-popup-mainView {
   min-width: 33em;
   max-width: 33em;
 }
 
-.identity-popup-section:not(:first-child) {
+.identity-popup-section {
   border-top: 1px solid var(--panel-separator-color);
 }
 
 .identity-popup-security-content,
 #identity-popup-permissions-content,
 #identity-popup-content-blocking-content {
   background-repeat: no-repeat;
   background-position: 1em 1em;
@@ -100,17 +98,17 @@
 }
 
 /* EXPAND BUTTON */
 
 .identity-popup-expander {
   margin: 0;
   padding: 4px 0;
   min-width: auto;
-  width: @identityPopupExpanderWidth@;
+  width: 38px;
   border-style: none;
   -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;
 }
@@ -142,52 +140,73 @@
 }
 
 .identity-popup-preferences-button > .toolbarbutton-text {
   display: none;
 }
 
 /* CONTENT */
 
+#identity-popup-mainView-panel-header > label,
+#identity-popup-securityView > .panel-header,
+#identity-popup-breakageReportView > .panel-header,
 #identity-popup-content-blocking-report-breakage,
 #identity-popup-content-blocking-disabled-label,
 .identity-popup-content-blocking-category-label,
 .identity-popup-content-blocking-category-state-label,
 .identity-popup-content-blocking-category-add-blocking,
 .identity-popup-permission-label,
 .identity-popup-permission-state-label,
 .identity-popup-security-content > description,
 #identity-popup-security-descriptions > description,
 #identity-popup-securityView-body > description,
 #identity-popup-permissions-content > description,
 #identity-popup-content-blocking-content > description {
   font-size: 110%;
   margin: 0;
 }
 
+#identity-popup-mainView-panel-header {
+  padding: 4px 1em;
+  min-height: 40px;
+  -moz-box-pack: center;
+  -moz-box-align: center;
+}
+
+#identity-popup-mainView-panel-header-span {
+  display: inline-block;
+  font-weight: 600;
+  text-align: center;
+  overflow-wrap: break-word;
+  /* This is needed for the overflow-wrap to work correctly.
+   * 33em is the panel width, panel-header has 1em padding on each side. */
+  max-width: calc(33rem - 2em);
+}
+
 #identity-popup-permissions-content > description,
 #identity-popup-content-blocking-content > description {
   color: var(--panel-disabled-color);
 }
 
 /* This element needs the pre-wrap because we add newlines to it in the code. */
 #identity-popup-content-supplemental {
   white-space: pre-wrap;
 }
 
 .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
-   * 30em is the panel width */
-  max-width: calc(30rem - 3rem - 24px - @identityPopupExpanderWidth@);
+#identity-popup-host {
+  overflow-wrap: break-word;
+  /* This is needed for the overflow-wrap to work correctly.
+   * 1em + 2em + 24px is .identity-popup-security-content padding
+   * 33em is the panel width */
+  max-width: calc(33rem - 3rem - 24px);
 }
 
 .identity-popup-warning-gray {
   padding-inline-start: 24px;
   background: url(chrome://browser/skin/controlcenter/warning.svg) no-repeat 0 50%;
   fill: #808080;
   stroke: #fff;
   -moz-context-properties: fill, stroke;
--- a/testing/firefox-ui/tests/functional/security/test_dv_certificate.py
+++ b/testing/firefox-ui/tests/functional/security/test_dv_certificate.py
@@ -36,17 +36,17 @@ class TestDVCertificate(PuppeteerMixin, 
         self.locationbar.open_identity_popup()
 
         # Check the identity popup doorhanger
         self.assertEqual(self.identity_popup.element.get_attribute('connection'), 'secure')
 
         cert = self.browser.tabbar.selected_tab.certificate
 
         # The shown host equals to the certificate
-        self.assertRegexpMatches(self.identity_popup.view.main.host.get_property('textContent'),
+        self.assertRegexpMatches(self.identity_popup.view.main.header.get_property('textContent'),
                                  '.*badssl\.com$')
         self.assertRegexpMatches(cert['commonName'], '.*badssl\.com$')
 
         # Only the secure label is visible in the main view
         secure_label = self.identity_popup.view.main.secure_connection_label
         self.assertNotEqual(secure_label.value_of_css_property('display'), 'none')
 
         insecure_label = self.identity_popup.view.main.insecure_connection_label
--- a/testing/firefox-ui/tests/functional/security/test_ev_certificate.py
+++ b/testing/firefox-ui/tests/functional/security/test_ev_certificate.py
@@ -45,18 +45,20 @@ class TestEVCertificate(PuppeteerMixin, 
 
         # Open the identity popup
         self.locationbar.open_identity_popup()
 
         # Check the idenity popup doorhanger
         self.assertEqual(self.identity_popup.element.get_attribute('connection'), 'secure-ev')
 
         # For EV certificates no hostname but the organization name is shown
-        self.assertEqual(self.identity_popup.view.main.host.get_property('textContent'),
-                         cert['organization'])
+        l10n_header = self.browser.localize_property('identity.headerWithHost')
+        l10n_header = l10n_header.replace('%S', cert['organization'])
+        self.assertEqual(self.identity_popup.view.main.header.get_property('textContent'),
+                         l10n_header)
 
         # Only the secure label is visible in the main view
         secure_label = self.identity_popup.view.main.secure_connection_label
         self.assertNotEqual(secure_label.value_of_css_property('display'), 'none')
 
         insecure_label = self.identity_popup.view.main.insecure_connection_label
         self.assertEqual(insecure_label.value_of_css_property('display'), 'none')
 
--- a/testing/marionette/puppeteer/firefox/firefox_puppeteer/ui/browser/toolbars.py
+++ b/testing/marionette/puppeteer/firefox/firefox_puppeteer/ui/browser/toolbars.py
@@ -519,22 +519,22 @@ class IdentityPopupMainView(IdentityPopu
     def expander(self):
         """The DOM element which represents the expander button for the security content.
 
         :returns: Reference to the identity popup expander button.
         """
         return self.element.find_element(By.CLASS_NAME, 'identity-popup-expander')
 
     @property
-    def host(self):
-        """The DOM element which represents the identity-popup content host.
+    def header(self):
+        """The DOM element which represents the identity-popup header.
 
-        :returns: Reference to the identity-popup content host.
+        :returns: Reference to the identity-popup header.
         """
-        return self.element.find_element(By.CLASS_NAME, 'identity-popup-host')
+        return self.element.find_element(By.ID, 'identity-popup-mainView-panel-header-span')
 
     @property
     def insecure_connection_label(self):
         """The DOM element which represents the identity popup insecure connection label.
 
         :returns: Reference to the identity-popup insecure connection label.
         """
         return self.element.find_element(By.CLASS_NAME, 'identity-popup-connection-not-secure')
@@ -585,17 +585,17 @@ class IdentityPopupSecurityView(Identity
                                          'button[when-mixedcontent=active-loaded]')
 
     @property
     def host(self):
         """The DOM element which represents the identity-popup content host.
 
         :returns: Reference to the identity-popup content host.
         """
-        return self.element.find_element(By.CLASS_NAME, 'identity-popup-host')
+        return self.element.find_element(By.ID, 'identity-popup-host')
 
     @property
     def insecure_connection_label(self):
         """The DOM element which represents the identity popup insecure connection label.
 
         :returns: Reference to the identity-popup insecure connection label.
         """
         return self.element.find_element(By.CLASS_NAME, 'identity-popup-connection-not-secure')