Bug 1490508 - Apply mask correctly to CFR recommendation on urlbar focus r=Mardak a=pascalc
authorahillier <ahillier@mozilla.com>
Thu, 13 Sep 2018 23:21:06 +0000
changeset 490143 cd305e92721b942d140e1af274e4330fe6e8abe7
parent 490142 e31b0fa4bdb86164c0c017009052446a35eed1ad
child 490144 108b9d174f0971fcdeabe862c37b143656dbda27
push id9920
push userrgurzau@mozilla.com
push dateTue, 02 Oct 2018 09:01:06 +0000
treeherdermozilla-beta@cd305e92721b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMardak, pascalc
bugs1490508
milestone63.0
Bug 1490508 - Apply mask correctly to CFR recommendation on urlbar focus r=Mardak a=pascalc Differential Revision: https://phabricator.services.mozilla.com/D5618
browser/base/content/browser.css
browser/themes/shared/urlbar-searchbar.inc.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -598,17 +598,17 @@ html|input.urlbar-scheme[textoverflow="s
 html|input.urlbar-input[textoverflow="end"]:not([focused]) {
   mask-image: linear-gradient(to left, transparent, black 3ch);
 }
 
 html|input.urlbar-input[textoverflow="start"]:not([focused]) {
   mask-image: linear-gradient(to right, transparent var(--urlbar-scheme-size), black calc(var(--urlbar-scheme-size) + 3ch));
 }
 
-html|input.urlbar-input:not([focused]) {
+html|input.urlbar-input {
   mask-repeat: no-repeat;
 }
 
 /* Apply crisp rendering for favicons at exactly 2dppx resolution */
 @media (resolution: 2dppx) {
   .searchbar-engine-image {
     image-rendering: -moz-crisp-edges;
   }
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -474,23 +474,24 @@
   transition: transform ease-in-out var(--cfr-animation-duration);
 }
 #urlbar[cfr-recommendation-state="expanded"] .urlbar-history-dropmarker {
   transform: translateX(calc(var(--cfr-label-width) * -1));
 }
 
 /* Shift the url-bar text fading to stop the recommendation overlapping */
 #urlbar[cfr-recommendation-state] html|input.urlbar-input {
+  /* A mask-image is usually only defined for the url bar when text overflows.
+     We need to re-define the mask image here so that it shows up correctly when
+     we transition to or from an `expanded` state (in which the right end of the
+     url bar may be obscured without overflow). */
+  mask-image: linear-gradient(to left, transparent, black 3ch);
   transition: mask-position-x ease-in-out var(--cfr-animation-duration);
 }
 #urlbar[cfr-recommendation-state="expanded"] html|input.urlbar-input {
-  /* A mask-image is only defined for the url bar when text overflows. When
-     expanded, the right end of the url bar may be obscured without overflow so
-     we need to redefine the mask-image here, as well as the mask-position-x. */
-  mask-image: linear-gradient(to left, transparent, black 3ch);
   mask-position-x: calc(var(--cfr-label-width) * -1);
 }
 
 /* Reader mode icon */
 
 #reader-mode-button {
   list-style-image: url(chrome://browser/skin/readerMode.svg);
 }