nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

Bug 1747429 - Replace preprocessor urlbar* variables with CSS vars. r=dao

Browse source 
* Define urlbarMarginInline and urlbarSearchButtonWidth as CSS rather than preprocessor variables
* Replace the urlbarViewPadding, urlbarViewFaviconWidth and urlbarViewIconMarginEnd preprocessor variables with CSS vars.
* Remove %ifdefs around the license comment in these 2 files
* Update ambiguous/out-of-date comment in the skeleton UI code

Differential Revision: https://phabricator.services.mozilla.com/D135962
This commit is contained in:
Sam Foster 2022-01-20 22:46:29 +00:00
parent 357b106665
commit d60fc9a269
3 changed files with 23 additions and 30 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

19
browser/themes/shared/urlbar-searchbar.inc.css
View file

@ -1,16 +1,13 @@
%if 0
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%endif
%define urlbarMarginInline 5px
%define urlbarSearchButtonWidth calc(16px + 2 * var(--urlbar-icon-padding))
:root {
--toolbar-field-border-color: hsla(240,5%,5%,.25);
--toolbar-field-focus-border-color: var(--focus-outline-color);
--urlbar-container-padding: 1px;
--urlbar-margin-inline: 5px;
--urlbar-search-button-width: calc(16px + 2 * var(--urlbar-icon-padding));
}
@media not (prefers-contrast) {
@ -23,7 +20,7 @@
#urlbar-container,
#search-container {
padding-block: 4px;
margin-inline: @urlbarMarginInline@;
margin-inline: var(--urlbar-margin-inline);
}
#search-container[cui-areatype="menu-panel"] {
@ -144,7 +141,7 @@
}
#urlbar.searchButton > #urlbar-input-container > #urlbar-search-button {
width: @urlbarSearchButtonWidth@;
width: var(--urlbar-search-button-width);
background-image: url(chrome://global/skin/icons/search-glass.svg);
background-repeat: no-repeat;
background-position: center;
@ -176,7 +173,7 @@
:root:not([chromehidden~="toolbar"]) #urlbar.searchButton:not([breakout]) > #urlbar-background,
:root:not([chromehidden~="toolbar"]) #urlbar.searchButton:not([breakout-extend]) > #urlbar-background {
inset-inline-start: @urlbarSearchButtonWidth@;
inset-inline-start: var(--urlbar-search-button-width);
}
#urlbar-input-container {
@ -219,14 +216,14 @@
#urlbar[breakout][breakout-extend] {
top: 0;
left: -@urlbarMarginInline@;
width: calc(100% + 2 * @urlbarMarginInline@);
left: calc(-1 * var(--urlbar-margin-inline));
width: calc(100% + 2 * var(--urlbar-margin-inline));
}
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
height: var(--urlbar-toolbar-height);
padding-block: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2 + var(--urlbar-container-padding));
padding-inline: calc(@urlbarMarginInline@ + var(--urlbar-container-padding));
padding-inline: calc(var(--urlbar-margin-inline) + var(--urlbar-container-padding));
}
#urlbar.searchButton[breakout][breakout-extend] > #urlbar-input-container > #urlbar-search-button {

32
browser/themes/shared/urlbarView.inc.css
View file

@ -1,13 +1,6 @@
%if 0
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%endif
%filter substitution
%define urlbarViewPadding 4px
%define urlbarViewFaviconWidth 16px
%define urlbarViewIconMarginEnd (var(--urlbar-icon-padding) + var(--identity-box-margin-inline))
%include ../shared/urlbar/dynamicResults.inc.css
@ -20,6 +13,9 @@
--urlbarView-action-slide-in-distance: 200px;
--urlbarView-item-inline-padding: var(--urlbar-icon-padding);
--urlbarView-favicon-width: 16px;
--urlbarView-icon-margin-end: calc(var(--urlbar-icon-padding) + var(--identity-box-margin-inline));
}
:root:-moz-lwtheme {
@ -69,7 +65,7 @@
}
.urlbarView-results {
padding-block: @urlbarViewPadding@;
padding-block: 4px;
white-space: nowrap;
}
@ -118,7 +114,7 @@
padding-block-start: 18px;
/* Compensating for the 16px bottom margin on the tip elements. */
padding-block-end: calc(18px - 16px);
padding-inline-end: calc(@urlbarViewIconMarginEnd@);
padding-inline-end: var(--urlbarView-icon-margin-end);
}
.urlbarView-row-inner,
@ -146,7 +142,7 @@
/* We prioritize icons + title + action over the url, so they can grow freely,
but the url should never disappear when it's visible */
flex-shrink: 0;
max-width: calc(70% - 2 * (@urlbarViewFaviconWidth@ + (6px + 2px)));
max-width: calc(70% - 2 * (var(--urlbarView-favicon-width) + (6px + 2px)));
}
/* Wrap the url to a second line when the window is narrow. Do not wrap when the
@ -164,10 +160,10 @@
}
/* urlbarView-url is forced to be LTR for RTL locales, so set the padding based on the browser's directionality. */
.urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(ltr) {
padding-left: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + @urlbarViewFaviconWidth@);
padding-left: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width));
}
.urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(rtl) {
padding-right: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + @urlbarViewFaviconWidth@);
padding-right: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width));
}
/* Note: switchtab entries show the url only in override mode,
remotetab and sponsored ones only when selected or :hover. */
@ -182,7 +178,7 @@
}
.urlbarView-results[wrap] > .urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
flex-basis: 100%;
margin-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + @urlbarViewFaviconWidth@);
margin-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width));
}
}
@ -231,9 +227,9 @@
/* Favicon */
.urlbarView-favicon {
width: @urlbarViewFaviconWidth@;
height: @urlbarViewFaviconWidth@;
margin-inline-end: calc(@urlbarViewIconMarginEnd@);
width: var(--urlbarView-favicon-width);
height: var(--urlbarView-favicon-width);
margin-inline-end: var(--urlbarView-icon-margin-end);
background-repeat: no-repeat;
background-size: contain;
object-fit: contain;
@ -539,7 +535,7 @@
displayed width, favicon and title will collapse as different row, the style
will be broken. To avoid it, we specify the max displayable width for title
explicitly. */
flex-basis: calc(100% - @urlbarViewFaviconWidth@ - @urlbarViewIconMarginEnd@);
flex-basis: calc(100% - var(--urlbarView-favicon-width) - var(--urlbarView-icon-margin-end));
/* Move the title away from the action a little. This does not affect the
height of the row. */
margin-top: -0.3em;
@ -547,7 +543,7 @@
.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
flex-basis: 100%;
margin-inline-start: calc(@urlbarViewFaviconWidth@ + @urlbarViewIconMarginEnd@);
margin-inline-start: calc(var(--urlbarView-favicon-width) + var(--urlbarView-icon-margin-end));
font-size: 0.73em;
/* This value + the bottom padding control the space between the bottom edge
of the favicon and the bottom edge of the row. The bottom padding is 1px,

2
mozglue/misc/PreXULSkeletonUI.cpp
View file

@ -756,7 +756,7 @@ Result<Ok, PreXULSkeletonUIError> DrawSkeletonUI(
int menubarHeightDevPixels =
menubarShown ? CSSToDevPixels(28, sCSSToDevPixelScaling) : 0;
// controlled by css variable urlbarMarginInline in urlbar-searchbar.inc.css
// defined in urlbar-searchbar.inc.css as --urlbar-margin-inline: 5px
int urlbarMargin =
CSSToDevPixels(5, sCSSToDevPixelScaling) + horizontalOffset;