Bug 1202280 - [Control Center] Style the security subview's More Information button like a footer. r=jaws
MozReview-Commit-ID: FFrmSP1TYpT
--- a/browser/components/controlcenter/content/panel.inc.xul
+++ b/browser/components/controlcenter/content/panel.inc.xul
@@ -100,17 +100,17 @@
<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>
- <vbox id="identity-popup-securityView-body">
+ <vbox id="identity-popup-securityView-body" flex="1">
<!-- (EV) Certificate Information -->
<description id="identity-popup-content-verified-by"
when-connection="secure-ev">&identity.connectionVerified1;</description>
<description id="identity-popup-content-owner"
when-connection="secure-ev"
class="header"/>
<description id="identity-popup-content-supplemental"
when-connection="secure-ev"/>
@@ -157,17 +157,19 @@
<button when-mixedcontent="active-blocked"
label="&identity.disableMixedContentBlocking.label;"
accesskey="&identity.disableMixedContentBlocking.accesskey;"
oncommand="gIdentityHandler.disableMixedContentProtection()"/>
<button when-mixedcontent="active-loaded"
label="&identity.enableMixedContentBlocking.label;"
accesskey="&identity.enableMixedContentBlocking.accesskey;"
oncommand="gIdentityHandler.enableMixedContentProtection()"/>
+ </vbox>
+ <vbox id="identity-popup-securityView-footer">
<!-- More Security Information -->
<button label="&identity.moreInfoLinkText2;"
oncommand="gIdentityHandler.handleMoreInfoClick(event);"/>
</vbox>
</panelview>
</panelmultiview>
</panel>
--- a/browser/themes/osx/controlcenter/panel.css
+++ b/browser/themes/osx/controlcenter/panel.css
@@ -12,16 +12,25 @@
.identity-popup-expander:-moz-focusring {
padding: 2px;
}
.identity-popup-expander:-moz-focusring > .button-box {
@hudButtonFocused@
}
+#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
+ border-bottom-right-radius: 3.5px;
+}
+
+#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews:-moz-locale-dir(rtl) {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 3.5px;
+}
+
#tracking-action-block,
#tracking-action-unblock,
#tracking-action-unblock-private,
#identity-popup-securityView-body > button {
@hudButton@
min-height: 30px;
}
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -78,39 +78,38 @@
}
#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
transform: translateX(-100%);
}
#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
background: var(--panel-arrowcontent-background);
- border-bottom-right-radius: 3.5px;
padding: 0;
}
-#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews:-moz-locale-dir(rtl) {
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 3.5px;
-}
-
.identity-popup-section:not(:first-child) {
border-top: 1px solid var(--panel-separator-color);
}
#identity-popup-securityView,
#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;
-moz-padding-start: calc(2em + 24px);
-moz-padding-end: 1em;
- background-repeat: no-repeat;
- background-position: 1em 1em;
- background-size: 24px auto;
}
#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) {
background-position: calc(100% - 1em) 1em;
}
@@ -203,17 +202,16 @@
color: #418220;
}
.identity-popup-connection-not-secure {
color: #d74345;
}
#identity-popup-securityView {
- padding-bottom: 2em;
overflow: hidden;
}
#identity-popup-securityView,
#identity-popup-security-content {
background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg);
}
@@ -247,25 +245,56 @@
background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg);
}
#identity-popup-security-descriptions > description {
margin-top: 6px;
color: Graytext;
}
+#identity-popup-securityView-header,
+#identity-popup-securityView-body {
+ -moz-margin-start: calc(2em + 24px);
+ -moz-margin-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 {
-moz-padding-end: 1em;
}
+#identity-popup-securityView-footer {
+ margin-top: 1em;
+ background-color: hsla(210,4%,10%,.07);
+}
+
+#identity-popup-securityView-footer > button {
+ -moz-appearance: none;
+ margin: 0;
+ border: none;
+ border-top: 1px solid #ccc;
+ padding: 8px 20px;
+ color: ButtonText;
+ background-color: transparent;
+}
+
+#identity-popup-securityView-footer > button:hover,
+#identity-popup-securityView-footer > button:focus {
+ background-color: hsla(210,4%,10%,.07);
+}
+
+#identity-popup-securityView-footer > button:hover:active {
+ background-color: hsla(210,4%,10%,.12);
+}
+
#identity-popup-content-verifier ~ description {
margin-top: 1em;
color: Graytext;
}
description#identity-popup-content-verified-by,
description#identity-popup-content-owner,
description#identity-popup-content-verifier,