Bug 1185362 - Fix and consolidate margin and padding styling around the identity block. r=paolo

This commit is contained in:
Dão Gottwald 2015-07-22 18:11:34 +02:00
parent ea36f00dd7
commit 325f491709
5 changed files with 69 additions and 185 deletions

View File

@ -19,6 +19,8 @@
%define conditionalForwardWithUrlbarWidth 30
:root {
--backbutton-urlbar-overlap: 5px;
--toolbarbutton-hover-background: hsla(0,0%,100%,.3) linear-gradient(hsla(0,0%,100%,.7), hsla(0,0%,100%,.2));
--toolbarbutton-hover-boxshadow: 0 1px 0 hsla(0,0%,100%,.3) inset, 0 0 0 1px hsla(0,0%,100%,.2) inset, 0 1px 0 hsla(0,0%,0%,.03);
--toolbarbutton-hover-bordercolor: rgb(154,154,154);
@ -846,7 +848,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
#urlbar,
.searchbar-textbox {
-moz-appearance: none;
padding: 1px;
padding: 0;
border: 1px solid ThreeDShadow;
border-radius: 2px;
margin: 0 3px;
@ -895,7 +897,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
@conditionalForwardWithUrlbar@ {
clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");
-moz-margin-start: -5px;
margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap));
}
@conditionalForwardWithUrlbar@:-moz-locale-dir(rtl),
@ -973,14 +975,6 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
/* identity box */
#identity-box {
margin: -1px;
-moz-margin-end: 4px;
padding: 2px;
-moz-padding-end: 1px;
font-size: .9em;
}
#identity-box:-moz-locale-dir(ltr) {
border-top-left-radius: 1.5px;
border-bottom-left-radius: 1.5px;
@ -991,42 +985,6 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
border-bottom-right-radius: 1.5px;
}
#notification-popup-box:not([hidden]) + #identity-box {
-moz-padding-start: 10px;
border-radius: 0;
}
@conditionalForwardWithUrlbar@ > #urlbar > #identity-box {
border-radius: 0;
}
@conditionalForwardWithUrlbar@:not([switchingtabs]) > #urlbar > #identity-box {
transition: padding-left, padding-right;
}
@conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
padding-left: 5px;
}
@conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
padding-right: 5px;
}
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box {
/* forward button hiding is delayed when hovered */
transition-delay: 100s;
}
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
/* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
padding-left: 5.01px;
}
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
/* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
padding-right: 5.01px;
}
#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
background-color: var(--verified-identity-box-backgroundcolor);
}
@ -1036,20 +994,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
outline-offset: -3px;
}
#identity-icon-labels {
-moz-padding-start: 2px;
-moz-padding-end: 5px;
}
%include ../shared/identity-block/identity-block.inc.css
#page-proxy-favicon {
margin-top: 1px;
margin-bottom: 1px;
-moz-margin-start: 3px;
-moz-margin-end: 1px;
}
%include ../shared/notification-icons.inc.css
.popup-notification-body[popupid="addon-progress"],
@ -1065,8 +1011,6 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
/* Notification icon box */
#notification-popup-box {
border-radius: 2.5px 0 0 2.5px;
margin-top: -1px;
margin-bottom: -1px;
}
.notification-anchor-icon:-moz-focusring {

View File

@ -7,11 +7,6 @@
padding: 1px;
}
.searchbar-textbox {
min-height: 22px;
background-color: -moz-field;
}
.autocomplete-textbox-container {
-moz-box-align: stretch;
}
@ -81,6 +76,8 @@ menuitem[cmd="cmd_clearhistory"][disabled] {
.searchbar-search-button {
list-style-image: url("chrome://browser/skin/search-indicator.png");
-moz-image-region: rect(0, 20px, 20px, 0);
margin-top: 1px;
margin-bottom: 1px;
-moz-margin-start: 2px;
}

View File

@ -18,8 +18,10 @@
:root {
--space-above-tabbar: 9px;
--tabs-toolbar-color: #333;
--backbutton-urlbar-overlap: 6px;
--toolbarbutton-hover-background: hsla(0,0%,100%,.1) linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,.1)) padding-box;
--toolbarbutton-hover-bordercolor: hsla(0,0%,0%,.2);
--toolbarbutton-hover-boxshadow: 0 1px 0 hsla(0,0%,100%,.5),
@ -1633,7 +1635,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
@conditionalForwardWithUrlbar@ {
clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");
-moz-margin-start: -6px;
margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap));
}
@conditionalForwardWithUrlbar@:-moz-locale-dir(rtl),
@ -1646,24 +1648,19 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
-moz-box-direction: reverse;
}
#identity-box {
margin: 0;
-moz-margin-end: 3px;
padding: 1px 4px;
font-size: .9em;
}
#urlbar:not([focused="true"]) > #identity-box {
margin: -1px 0;
-moz-margin-end: 3px;
padding: 2px 4px;
margin-top: -1px;
margin-bottom: -1px;
padding-top: 3px;
padding-bottom: 3px;
}
@media (-moz-mac-yosemite-theme) {
#urlbar:not([focused="true"]):not(:-moz-window-inactive) > #identity-box {
margin: -2px 0;
-moz-margin-end: 3px;
padding: 3px 4px;
margin-top: -2px;
margin-bottom: -2px;
padding-top: 4px;
padding-bottom: 4px;
}
#identity-box {
--identity-box-selected-background-color: rgb(240,237,237);
@ -1680,40 +1677,6 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
border-bottom-right-radius: 2px;
}
#notification-popup-box:not([hidden]) + #identity-box {
-moz-padding-start: 10px !important;
border-radius: 0;
}
@conditionalForwardWithUrlbar@ > #urlbar > #identity-box {
border-radius: 0;
}
@conditionalForwardWithUrlbar@:not([switchingtabs]) > #urlbar > #identity-box {
transition: padding-left, padding-right;
}
@conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
padding-left: 10px;
}
@conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
padding-right: 10px;
}
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box {
/* forward button hiding is delayed when hovered */
transition-delay: 100s;
}
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
padding-left: 10.01px;
}
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
padding-right: 10.01px;
}
#identity-box:-moz-focusring {
box-shadow: 0 0 2px 1px -moz-mac-focusring inset,
0 0 2px 2px -moz-mac-focusring;
@ -1721,10 +1684,6 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
-moz-padding-end: 5px;
}
#identity-icon-labels {
-moz-margin-start: 4px;
}
.urlbar-input-box {
-moz-margin-start: 0;
padding: 3px 0 2px;
@ -1807,11 +1766,6 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
%include ../shared/identity-block/identity-block.inc.css
#page-proxy-favicon {
margin: 0px;
padding: 0px;
}
#wrapper-urlbar-container[place="palette"] {
max-width: 20em;
}

View File

@ -48,6 +48,9 @@
background-size: 1px;
background-repeat: no-repeat;
background-image: var(--identity-box-background-image);
font-size: .9em;
padding: 2px 5px;
margin-inline-end: 4px;
}
#identity-box:-moz-locale-dir(rtl) {
@ -69,11 +72,52 @@
background-image: var(--identity-box-chrome-background-image);
}
#identity-icon-labels {
padding-inline-start: 2px;
}
#notification-popup-box:not([hidden]) + #identity-box {
-moz-padding-start: 10px;
border-radius: 0;
}
@conditionalForwardWithUrlbar@ > #urlbar > #identity-box {
border-radius: 0;
}
@conditionalForwardWithUrlbar@:not([switchingtabs]) > #urlbar > #identity-box {
transition: padding-left, padding-right;
}
@conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
padding-left: calc(var(--backbutton-urlbar-overlap) + 4px);
}
@conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
padding-right: calc(var(--backbutton-urlbar-overlap) + 4px);
}
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box {
/* forward button hiding is delayed when hovered */
transition-delay: 100s;
}
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
/* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
padding-left: calc(var(--backbutton-urlbar-overlap) + 4.01px);
}
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
/* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
padding-right: calc(var(--backbutton-urlbar-overlap) + 4.01px);
}
/* TRACKING PROTECTION ICON */
#tracking-protection-icon {
width: 16px;
height: 16px;
margin-inline-end: 2px;
list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
}

View File

@ -20,6 +20,8 @@
:root {
--space-above-tabbar: 15px;
--backbutton-urlbar-overlap: 5px;
--toolbarbutton-vertical-inner-padding: 2px;
--toolbarbutton-vertical-outer-padding: 8px;
@ -1303,13 +1305,16 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
@conditionalForwardWithUrlbar@ {
clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");
-moz-margin-start: -5px;
margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap));
}
@media (-moz-os-version: windows-win10) {
@conditionalForwardWithUrlbar@ {
clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path-win10");
-moz-margin-start: -8px;
}
:root {
--backbutton-urlbar-overlap: 8px;
}
}
@ -1419,12 +1424,6 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
/* identity box */
#identity-box {
padding: 2px;
font-size: .9em;
-moz-margin-end: 4px;
}
#identity-box:-moz-locale-dir(ltr) {
border-top-left-radius: 1.5px;
border-bottom-left-radius: 1.5px;
@ -1435,42 +1434,6 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
border-bottom-right-radius: 1.5px;
}
#notification-popup-box:not([hidden]) + #identity-box {
-moz-padding-start: 10px;
border-radius: 0;
}
@conditionalForwardWithUrlbar@ > #urlbar > #identity-box {
border-radius: 0;
}
@conditionalForwardWithUrlbar@:not([switchingtabs]) > #urlbar > #identity-box {
transition: padding-left, padding-right;
}
@conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
padding-left: 5px;
}
@conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
padding-right: 5px;
}
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box {
/* forward button hiding is delayed when hovered */
transition-delay: 100s;
}
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
/* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
padding-left: 5.01px;
}
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
/* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
padding-right: 5.01px;
}
#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
background-color: var(--verified-identity-box-backgroundcolor);
}
@ -1480,11 +1443,6 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
outline-offset: -3px;
}
#identity-icon-labels {
-moz-padding-start: 2px;
-moz-padding-end: 5px;
}
/* Location bar dropmarker */
.urlbar-history-dropmarker {
@ -1532,19 +1490,6 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
%include ../shared/identity-block/identity-block.inc.css
#page-proxy-favicon {
margin-top: 1px;
margin-bottom: 1px;
-moz-margin-start: 3px;
-moz-margin-end: 1px;
}
@media (-moz-os-version: windows-win10) {
#page-proxy-favicon {
-moz-margin-start: 6px;
}
}
/* autocomplete */
#treecolAutoCompleteImage {