Bug 1202280 - [Control Center] Style the security subview's More Information button like a footer. r=jaws draft
authorNihanth Subramanya <nhnt11@gmail.com>
Thu, 11 Feb 2016 14:00:48 -0800
changeset 335644 212cda9ac556a68ce9df5feee877db03ee559f8d
parent 335631 1b2fddb62fcc4d1038f2e57b619a56c4f1837507
child 515186 5529e1b13ed937bf702cde23af5fe14ff2cb7de0
push id11841
push usernhnt11@gmail.com
push dateTue, 01 Mar 2016 01:36:04 +0000
reviewersjaws
bugs1202280
milestone47.0a1
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"/>
@@ -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,