Bug 1207619 - Make control center hostname wrap on long cert names rather than truncating
MozReview-Commit-ID: LZnx91zv6pE
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -2,16 +2,17 @@
* 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/. */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
@namespace svg url("http://www.w3.org/2000/svg");
:root {
+ --identity-popup-expander-width: 38px;
--panelui-subview-transition-duration: 150ms;
}
#main-window:not([chromehidden~="toolbar"]) {
%ifdef XP_MACOSX
min-width: 335px;
%else
min-width: 300px;
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -6456,20 +6456,23 @@ var gIdentityHandler = {
get _identityPopup () {
delete this._identityPopup;
return this._identityPopup = document.getElementById("identity-popup");
},
get _identityBox () {
delete this._identityBox;
return this._identityBox = document.getElementById("identity-box");
},
- get _identityPopupContentHost () {
- delete this._identityPopupContentHost;
- return this._identityPopupContentHost =
- document.getElementById("identity-popup-content-host");
+ get _identityPopupContentHosts () {
+ delete this._identityPopupContentHosts;
+ return this._identityPopupContentHosts = [...document.querySelectorAll(".identity-popup-headline.host")];
+ },
+ get _identityPopupContentHostless () {
+ delete this._identityPopupContentHostless;
+ return this._identityPopupContentHostless = [...document.querySelectorAll(".identity-popup-headline.hostless")];
},
get _identityPopupContentOwner () {
delete this._identityPopupContentOwner;
return this._identityPopupContentOwner =
document.getElementById("identity-popup-content-owner");
},
get _identityPopupContentSupp () {
delete this._identityPopupContentSupp;
@@ -6902,62 +6905,64 @@ var gIdentityHandler = {
updateAttribute(element, "isbroken", this._isBroken);
}
// Initialize the optional strings to empty values
let supplemental = "";
let verifier = "";
let host = "";
let owner = "";
- let crop = "start";
+ let hostless = false;
try {
host = this.getEffectiveHost();
} catch (e) {
// Some URIs might have no hosts.
}
// 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.
- crop = "end";
+ hostless = true;
}
// Fill in the CA name if we have a valid TLS certificate.
if (this._isSecure) {
verifier = this._identityBox.tooltipText;
}
// Fill in organization information if we have a valid EV certificate.
if (this._isEV) {
- crop = "end";
-
let iData = this.getIdentityData();
host = owner = iData.subjectOrg;
verifier = this._identityBox.tooltipText;
// Build an appropriate supplemental block out of whatever location data we have
if (iData.city)
supplemental += iData.city + "\n";
if (iData.state && iData.country)
supplemental += gNavigatorBundle.getFormattedString("identity.identified.state_and_country",
[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. 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.setAttribute("crop", crop);
- this._identityPopupContentHost.setAttribute("value", host);
+ // 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._identityPopupContentOwner.textContent = owner;
this._identityPopupContentSupp.textContent = supplemental;
this._identityPopupContentVerif.textContent = verifier;
// Update per-site permissions section.
this.updateSitePermissions();
},
--- a/browser/components/controlcenter/content/panel.inc.xul
+++ b/browser/components/controlcenter/content/panel.inc.xul
@@ -5,29 +5,31 @@
<panel id="identity-popup"
type="arrow"
hidden="true"
onpopupshown="gIdentityHandler.onPopupShown(event);"
onpopuphidden="gIdentityHandler.onPopupHidden(event);"
orient="vertical">
<broadcasterset>
- <broadcaster id="identity-popup-content-host" class="identity-popup-headline" crop="start"/>
<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">
<!-- Security Section -->
<hbox id="identity-popup-security" class="identity-popup-section">
<vbox id="identity-popup-security-content" flex="1">
- <label observes="identity-popup-content-host"/>
+ <label class="plain">
+ <label class="identity-popup-headline host"></label>
+ <label class="identity-popup-headline hostless" crop="end"/>
+ </label>
<description class="identity-popup-connection-not-secure"
value="&identity.connectionNotSecure;"
when-connection="not-secure secure-cert-user-overridden"/>
<description class="identity-popup-connection-secure"
value="&identity.connectionSecure;"
when-connection="secure secure-ev"/>
<description value="&identity.connectionInternal;"
when-connection="chrome"/>
@@ -91,17 +93,20 @@
<description>&identity.permissionsEmpty;</description>
</vbox>
</hbox>
</panelview>
<!-- Security SubView -->
<panelview id="identity-popup-securityView" flex="1">
<vbox id="identity-popup-securityView-header">
- <label observes="identity-popup-content-host"/>
+ <label class="plain">
+ <label class="identity-popup-headline host"></label>
+ <label class="identity-popup-headline hostless" crop="end"/>
+ </label>
<description class="identity-popup-connection-not-secure"
value="&identity.connectionNotSecure;"
when-connection="not-secure secure-cert-user-overridden"/>
<description class="identity-popup-connection-secure"
value="&identity.connectionSecure;"
when-connection="secure secure-ev"/>
</vbox>
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -98,16 +98,17 @@
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-headline.host depends on this width */
-moz-padding-start: calc(2em + 24px);
-moz-padding-end: 1em;
}
#identity-popup-securityView:-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) {
@@ -115,17 +116,17 @@
}
/* EXPAND BUTTON */
.identity-popup-expander {
margin: 0;
padding: 4px 0;
min-width: auto;
- width: 38px;
+ width: var(--identity-popup-expander-width);
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;
@@ -176,16 +177,23 @@
margin: 0;
}
.identity-popup-headline {
margin: 3px 0 4px;
font-size: 150%;
}
+.identity-popup-headline.host {
+ word-wrap: break-word;
+ /* 1em + 2em + 24px is #identity-popup-security-content padding
+ * 30em is .panel-mainview:not([panelid="PanelUI-popup"]) width */
+ max-width: calc(30rem - 3rem - 24px - var(--identity-popup-expander-width))
+}
+
.identity-popup-warning-gray {
-moz-padding-start: 24px;
background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%;
}
.identity-popup-warning-yellow {
-moz-padding-start: 24px;
background: url(chrome://browser/skin/controlcenter/warning-yellow.svg) no-repeat 0 50%;