Bug 1202280 - [Control Center] Style the security subview's More Information button like a footer. r=jaws
authorNihanth Subramanya <nhnt11@gmail.com>
Thu, 11 Feb 2016 14:00:48 -0800
changeset 322769 c36859eaec38c5f0aeb886b97be0950f7a0dd259
parent 322768 9e4c8d1ffd3c23944c9a0741b3f4e64ea240b832
child 322770 5ea9a54a24d60dc63df47c4f7f5231b66d8835c6
push id5913
push userjlund@mozilla.com
push dateMon, 25 Apr 2016 16:57:49 +0000
treeherdermozilla-beta@dcaf0a6fa115 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1202280
milestone47.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 1202280 - [Control Center] Style the security subview's More Information button like a footer. r=jaws MozReview-Commit-ID: FFrmSP1TYpT
browser/components/controlcenter/content/panel.inc.xul
browser/themes/osx/controlcenter/panel.css
browser/themes/shared/controlcenter/panel.inc.css
--- 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"/>
@@ -163,17 +163,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,