Bug 1485725 - Add RTL support for CFR animation and panel r=ursula
authorAndrei Oprea <andrei.br92@gmail.com>
Thu, 01 Nov 2018 15:25:30 +0000
changeset 444443 07930ba778c6807c373f83ddb89da629d9e1eec9
parent 444442 1d900d22c44802808cb262ddc5717788915fd9d9
child 444444 b308b69122d35d4309ebb804229d9b0e3c83d924
push id72341
push useraoprea@mozilla.com
push dateMon, 05 Nov 2018 17:08:51 +0000
treeherderautoland@07930ba778c6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersursula
bugs1485725
milestone65.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 1485725 - Add RTL support for CFR animation and panel r=ursula Flip the animation in RTL mode so we get the same effect Differential Revision: https://phabricator.services.mozilla.com/D10276
browser/themes/shared/urlbar-searchbar.inc.css
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -396,37 +396,40 @@
 :root {
   --cfr-animation-duration: 0.35s;
   --cfr-button-icon: url(resource://activity-stream/data/content/assets/glyph-webextension-16.svg);
   --cfr-active-color: #0060df;
 }
 
 #contextual-feature-recommendation {
   width: 28px;
-  margin-left: 0;
-  transition: margin-left step-end var(--cfr-animation-duration);
+  margin-inline-start: 0;
+  transition: margin-inline-start step-end var(--cfr-animation-duration);
 }
 #urlbar[cfr-recommendation-state="expanded"] #contextual-feature-recommendation {
-  margin-left: calc(var(--cfr-label-width) * -1);
-  transition: margin-left step-start var(--cfr-animation-duration);
+  margin-inline-start: calc(var(--cfr-label-width) * -1);
+  transition: margin-inline-start step-start var(--cfr-animation-duration);
 }
 
 #cfr-button {
   list-style-image: var(--cfr-button-icon);
   margin: -2px 0;
   transition-property: fill, fill-opacity, transform;
   transition-timing-function: ease-in-out;
   transition-duration: var(--cfr-animation-duration);
 }
 #urlbar[cfr-recommendation-state="expanded"] #cfr-button {
   fill: white;
   fill-opacity: 1;
   background-color: transparent; /* Override hover background-color */
   transform: translateX(calc(var(--cfr-label-width) * -1));
 }
+#urlbar[cfr-recommendation-state="expanded"] #cfr-button:-moz-locale-dir(rtl) {
+  transform: translateX(calc(var(--cfr-label-width)));
+}
 @keyframes cfr-button-fade-through-active-color {
   33% {
     fill-opacity: 1;
     fill: var(--cfr-active-color);
   }
   67% {
     fill-opacity: 1;
     fill: var(--cfr-active-color);
@@ -435,65 +438,82 @@
 #urlbar[cfr-recommendation-state="collapsed"] #cfr-button {
   animation: cfr-button-fade-through-active-color calc(3 * var(--cfr-animation-duration));
 }
 
 #cfr-label-container {
   width: 0;
   overflow: hidden;
   border-radius: 5px;
-  padding-left: 28px;
+  padding-inline-start: 28px;
   mask-image: linear-gradient(to right, transparent 0, black 0);
   mask-position-x: var(--cfr-label-width);
   mask-repeat: no-repeat;
-  transition-property: background-color, mask-position-x, width, margin-right;
+  transition-property: background-color, mask-position-x, width, margin-inline-end;
   transition-timing-function: ease-in-out, ease-in-out, step-end, step-end;
   transition-duration: var(--cfr-animation-duration);
 }
+#cfr-label-container:-moz-locale-dir(rtl) {
+  mask-position-x: calc(var(--cfr-label-width) * -1);
+}
+
 #urlbar[cfr-recommendation-state="expanded"] #cfr-label-container {
   width: calc(var(--cfr-label-width) + 28px);
   background-color: var(--cfr-active-color);
-  margin-right: -28px;
+  margin-inline-end: -28px;
   mask-position-x: 0;
   transition-timing-function: ease-in-out, ease-in-out, step-start, step-start;
 }
 
 #cfr-label {
   margin: 0;
-  padding: 3px 5px 3px 0;
+  padding: 3px 5px;
+  padding-inline-start: 0;
   color: white;
   mask-image: linear-gradient(to right, transparent 0, black 0);
   mask-position-x: var(--cfr-label-width);
   mask-repeat: no-repeat;
   transition: mask-position-x ease-in-out var(--cfr-animation-duration);
 }
+#cfr-label:-moz-locale-dir(rtl) {
+  mask-position-x: calc(var(--cfr-label-width) * -1);
+}
 #urlbar[cfr-recommendation-state="expanded"] #cfr-label {
   mask-position-x: 0;
 }
 
 /* Translate the dropmarker to give illusion of increasing width of the recommendation  */
 #urlbar[cfr-recommendation-state] .urlbar-history-dropmarker {
   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));
 }
+#urlbar[cfr-recommendation-state="expanded"] .urlbar-history-dropmarker:-moz-locale-dir(rtl) {
+  transform: translateX(calc(var(--cfr-label-width)));
+}
 
 /* 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] html|input.urlbar-input:-moz-locale-dir(rtl) {
+  mask-image: linear-gradient(to right, transparent, black 3ch);
+}
 #urlbar[cfr-recommendation-state="expanded"] html|input.urlbar-input {
   mask-position-x: calc(var(--cfr-label-width) * -1);
 }
+#urlbar[cfr-recommendation-state="expanded"] html|input.urlbar-input:-moz-locale-dir(rtl) {
+  mask-position-x: calc(var(--cfr-label-width));
+}
 
 /* Reader mode icon */
 
 #reader-mode-button {
   list-style-image: url(chrome://browser/skin/readerMode.svg);
 }
 
 #reader-mode-button[readeractive] {