Bug 1374339 - Fix door hangers visual inconsistencies. r=Paolo
MozReview-Commit-ID: C43J8BhXynV
--- 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"] {