Bug 1374339 - Fix door hangers visual inconsistencies. r=Paolo draft
authordarcese <darcese@mozilla.com>
Fri, 14 Jul 2017 10:35:07 -0400
changeset 609815 b4a6fd0fee8b65d640fb0b79069dd64775942a63
parent 601524 217b7fcf58944f927118b465769faeb1e613130a
child 637674 431a69439b629925401fdc6833fd897453eaafba
push id68689
push userbmo:darcese@mozilla.com
push dateMon, 17 Jul 2017 14:58:33 +0000
reviewersPaolo
bugs1374339
milestone56.0a1
Bug 1374339 - Fix door hangers visual inconsistencies. r=Paolo MozReview-Commit-ID: C43J8BhXynV
browser/components/controlcenter/content/panel.inc.xul
browser/themes/shared/controlcenter/panel.inc.css
browser/themes/shared/downloads/downloads.inc.css
toolkit/themes/osx/global/popup.css
--- a/browser/components/controlcenter/content/panel.inc.xul
+++ b/browser/components/controlcenter/content/panel.inc.xul
@@ -17,17 +17,17 @@
 
   <panelmultiview id="identity-popup-multiView"
                   mainViewId="identity-popup-mainView"
                   descriptionheightworkaround="true">
     <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">
+        <vbox id="identity-popup-security-content" flex="1" onclick="document.getElementById('identity-popup-security-expander').doCommand()">
           <label class="plain">
             <label class="identity-popup-headline identity-popup-host"></label>
             <label class="identity-popup-headline identity-popup-hostless" crop="end"/>
           </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>
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -4,16 +4,20 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 %endif
 
 /* Hide all conditional elements by default. */
 :-moz-any([when-connection],[when-mixedcontent],[when-ciphers],[when-loginforms]) {
   display: none;
 }
 
+#identity-popup {
+  font: menu;
+}
+
 /* Show the right elements for the right connection states. */
 #identity-popup[connection=not-secure] [when-connection~=not-secure],
 #identity-popup[connection=secure-cert-user-overridden] [when-connection~=secure-cert-user-overridden],
 #identity-popup[connection=secure-ev] [when-connection~=secure-ev],
 #identity-popup[connection=secure] [when-connection~=secure],
 #identity-popup[connection=chrome] [when-connection~=chrome],
 #identity-popup[connection=file] [when-connection~=file],
 #identity-popup[connection=extension] [when-connection~=extension],
@@ -131,61 +135,45 @@
 
 .identity-popup-expander:-moz-locale-dir(rtl) {
   transform: scaleX(-1);
 }
 
 .identity-popup-expander[panel-multiview-anchor] {
   transition: background-color 250ms ease-in;
   background-color: Highlight;
-  background-image: url("chrome://browser/skin/controlcenter/arrow-subview-back.svg"),
-                    linear-gradient(rgba(255,255,255,0.3), transparent);
+  background-image: url("chrome://browser/skin/controlcenter/arrow-subview-back.svg");
 }
 
 .identity-popup-expander > .button-box {
   padding: 0;
 }
 
-.identity-popup-expander:not([panel-multiview-anchor]) > .button-box {
-  border-left: 1px solid var(--panel-separator-color);
-}
-
-.identity-popup-expander:hover {
-  background-color: var(--arrowpanel-dimmed);
-  background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg"),
-                    linear-gradient(rgba(255,255,255,0.3), transparent);
-}
-
-.identity-popup-expander:hover:active {
-  background-color: var(--arrowpanel-dimmed-further);
-  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
-}
-
 /* CONTENT */
 
 .identity-popup-permission-label,
 .identity-popup-permission-state-label,
 #identity-popup-security-content > description,
 #identity-popup-security-descriptions > description,
 #identity-popup-securityView-header > description,
 #identity-popup-securityView-body > description,
 #identity-popup-permissions-content > description,
 #tracking-protection-content > description {
-  font-size: 110%;
+  font-size: 100%;
   margin: 0;
 }
 
 /* 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%;
+  font-size: 100%;
 }
 
 .identity-popup-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))
 }
@@ -210,16 +198,25 @@
 .identity-popup-connection-secure {
   color: #418220;
 }
 
 .identity-popup-connection-not-secure {
   color: #d74345;
 }
 
+#identity-popup-security:hover {
+  background-color: var(--arrowpanel-dimmed);
+}
+
+#identity-popup-security:hover:active {
+  background-color: var(--arrowpanel-dimmed-further);
+  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
+}
+
 #identity-popup-securityView {
   overflow: hidden;
 }
 
 #identity-popup-securityView,
 #identity-popup-security-content {
   background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg);
 }
@@ -352,23 +349,22 @@ description#identity-popup-content-verif
 #tracking-protection-content:not([state]) > #tracking-actions {
   display: none;
 }
 
 /* PERMISSIONS */
 
 #identity-popup-permissions-content {
   background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
-  padding-bottom: 1.5em;
 }
 
 #identity-popup-permissions-headline {
   /* Make sure the label is as tall as the icon so that the permission list
      which is aligned with the icon doesn't cover it up. */
-  min-height: 24px;
+  margin: 10px 0 6px 0;
 }
 
 #identity-popup-permission-list {
   /* Offset the padding set on #identity-popup-permissions-content so that it
      shows up just below the section. The permission icons are 16px wide and
      should be right aligned with the section icon. */
   margin-inline-start: calc(-1em - 16px);
 }
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -10,16 +10,17 @@
 %define itemFinished @item@[state="1"]
 %define itemNotFinished @item@:not([state="1"])
 %define itemFocused #downloadsListBox:focus > @item@[selected]
 
 /*** Panel and outer controls ***/
 
 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
   overflow: hidden;
+  font: menu;
 }
 
 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent,
 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
   padding: 0;
 }
 
 #downloadsListBox {
@@ -232,17 +233,17 @@ richlistitem[type="download"]:last-child
 }
 
 @item@[verdict] > toolbarseparator {
   visibility: hidden;
 }
 
 .downloadButton {
   -moz-appearance: none;
-  min-width: 58px;
+  min-width: 38px;
   margin: 0;
   border: none;
   background: transparent;
   padding: 0;
   color: inherit;
 }
 
 .downloadButton > .button-box > .button-icon {
--- a/toolkit/themes/osx/global/popup.css
+++ b/toolkit/themes/osx/global/popup.css
@@ -37,17 +37,16 @@ panel[type="arrow"][side="left"],
 panel[type="arrow"][side="right"] {
   margin-top: -25px;
   margin-bottom: -25px;
 }
 
 .panel-arrowcontent {
   -moz-appearance: none;
   background: var(--arrowpanel-background);
-  border-radius: var(--arrowpanel-border-radius);
   box-shadow: 0 0 0 1px var(--arrowpanel-border-color);
   color: var(--arrowpanel-color);
   border: none;
   padding: var(--arrowpanel-padding);
   margin: 1px;
 }
 
 .panel-arrow[side="top"] {