Bug 1490508 - Apply mask correctly to CFR recommendation on urlbar focus r=Mardak
authorahillier <ahillier@mozilla.com>
Thu, 13 Sep 2018 23:21:06 +0000
changeset 436266 43e67f28b4254327fa6b361d6d55d0b1af85609e
parent 436265 128979a6e32fa333ad158e9356c94a3c111c7597
child 436267 ce74ddd3192adb70e58ab81206184a964842c90d
push id34632
push usernerli@mozilla.com
push dateFri, 14 Sep 2018 03:30:35 +0000
treeherdermozilla-central@03bf654b9641 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMardak
bugs1490508
milestone64.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 1490508 - Apply mask correctly to CFR recommendation on urlbar focus r=Mardak 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
@@ -602,17 +602,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);
 }