Bug 1548198 - Remove 1px of padding in the urlbar input so that text in the popup is aligned with text in the input. r=dao
authorDrew Willcoxon <adw@mozilla.com>
Wed, 08 May 2019 21:22:06 +0000
changeset 531973 c8ada1038c844c5c218b592ea26a09d8f0d4cb83
parent 531972 176eced1154bca5f78b54505aa0b8a7bbabeacb6
child 531974 6cfaeaa212f82db5129ef7c72f5e4a5e990a1e1f
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1548198
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1548198 - Remove 1px of padding in the urlbar input so that text in the popup is aligned with text in the input. r=dao In quantumbar, favicons have 8px of margin-end: https://searchfox.org/mozilla-central/rev/197210b8c139b64f642edaa3336d26b9c1761568/browser/themes/shared/urlbar-autocomplete.inc.css#9 https://searchfox.org/mozilla-central/rev/197210b8c139b64f642edaa3336d26b9c1761568/browser/themes/shared/urlbar-autocomplete.inc.css#100 But in awesomebar, it's 9px, e.g.: https://searchfox.org/mozilla-central/rev/197210b8c139b64f642edaa3336d26b9c1761568/toolkit/themes/osx/global/autocomplete.css#46 It's nice that quantumbar has the same amount of space between the type icon and favicon as it does between the favicon and title, unlike awesomebar. i.e., there's a single margin-end value for both .urlbarView-type-icon and .urlbarView-favicon (urlbarViewIconMarginEnd, 8px). So instead of adding another 9px value for .urlbarView-favicon's margin-end, this patch removes the 1px of padding in the urlbar input. That has the added benefit that the space around the identity box and its search icon (shown when typing) is now more symmetrical, although there's still 1px more space on its right side than its left side. This patch also adjusts spacing in the awesomebar popup so the alignment remains right there. Differential Revision: https://phabricator.services.mozilla.com/D30413
browser/themes/shared/urlbar-searchbar.inc.css
toolkit/themes/linux/global/autocomplete.css
toolkit/themes/osx/global/autocomplete.css
toolkit/themes/windows/global/autocomplete.css
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -100,16 +100,22 @@
   /* Remove excess space between the address bar and the menu button in popups. */
   margin-inline-end: 0;
 }
 
 :root[customizing] .urlbar-input-box {
   visibility: hidden;
 }
 
+.urlbar-input {
+  /* Remove the 1px padding-left (and padding-right) so that the titles in the
+     urlbar popup align with the text in the input. */
+  padding: 0;
+}
+
 #urlbar-container {
   -moz-box-align: center;
 }
 
 #urlbar-search-splitter {
   /* The splitter width should equal the location and search bars' combined
      neighboring margin and border width. */
   min-width: 12px;
--- a/toolkit/themes/linux/global/autocomplete.css
+++ b/toolkit/themes/linux/global/autocomplete.css
@@ -50,17 +50,17 @@ panel[type="autocomplete-richlistbox"] {
 
 .ac-site-icon {
   display: none;
   width: 16px;
   height: 16px;
   max-width: 16px;
   max-height: 16px;
   margin-inline-start: 6px;
-  margin-inline-end: 9px;
+  margin-inline-end: 8px;
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
 .ac-title {
   margin-inline-start: 0;
   margin-inline-end: 6px;
--- a/toolkit/themes/osx/global/autocomplete.css
+++ b/toolkit/themes/osx/global/autocomplete.css
@@ -38,17 +38,17 @@ panel[type="autocomplete-richlistbox"] {
 
 .ac-site-icon {
   display: none;
   width: 16px;
   height: 16px;
   max-width: 16px;
   max-height: 16px;
   margin-inline-start: 6px;
-  margin-inline-end: 9px;
+  margin-inline-end: 8px;
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
 .ac-title {
   margin-inline-start: 0;
   margin-inline-end: 6px;
--- a/toolkit/themes/windows/global/autocomplete.css
+++ b/toolkit/themes/windows/global/autocomplete.css
@@ -48,17 +48,17 @@ panel[type="autocomplete-richlistbox"] {
 
 .ac-site-icon {
   display: none;
   width: 16px;
   height: 16px;
   max-width: 16px;
   max-height: 16px;
   margin-inline-start: 6px;
-  margin-inline-end: 9px;
+  margin-inline-end: 8px;
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
 .ac-title {
   margin-inline-start: 0;
   margin-inline-end: 6px;