Bug 1322542 - Display user-typed text in the urlbar according to its direction r=mak
authorItiel <itiel_yn8@walla.com>
Mon, 16 Dec 2019 09:54:39 +0000
changeset 507062 d98ef30b82f7afbe50122ba5e259a01000d94980
parent 507061 c9c256a84d8de828e6af4f04183ee8d0eb039a20
child 507063 3f46d4a4341cc315fd9d4b2c73a29eb830ae547a
push id36922
push userncsoregi@mozilla.com
push dateMon, 16 Dec 2019 17:21:47 +0000
treeherdermozilla-central@27d0d6cc2131 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmak
bugs1322542
milestone73.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 1322542 - Display user-typed text in the urlbar according to its direction r=mak Also fix the fading effect on RTL typed text. Differential Revision: https://phabricator.services.mozilla.com/D54195
browser/base/content/browser.css
browser/components/urlbar/UrlbarInput.jsm
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -560,29 +560,32 @@ toolbar:not(#TabsToolbar) > #personal-bo
 #urlbar,
 #searchbar {
   /* Setting a width and min-width to let the location & search bars maintain
      a constant width in case they haven't be resized manually. (bug 965772) */
   width: 1px;
   min-width: 1px;
 }
 
-/* Display URLs left-to-right but right aligned in RTL mode. */
+/* Align URLs to the right in RTL mode. */
 #urlbar-input:-moz-locale-dir(rtl) {
-  direction: ltr !important;
   text-align: right !important;
 }
 
-/* Make sure that the location bar's alignment in RTL mode changes according
+/* Make sure that the location bar's alignment changes according
    to the input box direction if the user switches the text direction using
    cmd_switchTextDirection (which applies a dir attribute to the <input>). */
 #urlbar-input[dir=ltr]:-moz-locale-dir(rtl) {
   text-align: left !important;
 }
 
+#urlbar-input[dir=rtl]:-moz-locale-dir(ltr) {
+  text-align: right !important;
+}
+
 /*
  * Display visual cue that browser is under remote control.
  * This is to help users visually distinguish a user agent session that
  * is under remote control from those used for normal browsing sessions.
  *
  * Attribute is controlled by browser.js:/gRemoteControl.
  */
 :root[remotecontrol] #urlbar:not(.megabar),
@@ -618,22 +621,28 @@ toolbar:not(#TabsToolbar) > #personal-bo
 
 /* Fade out URL on overflow
    This mask may be overriden when a Contextual Feature Recommendation is shown,
    see browser/themes/shared/urlbar-searchbar.inc.css for details */
 #urlbar[textoverflow="end"]:not([focused]) > #urlbar-input-container > .urlbar-input-box > #urlbar-input {
   mask-image: linear-gradient(to left, transparent, black 3ch);
 }
 
+#urlbar[textoverflow="end"][rtltext]:not([focused]) > #urlbar-input-container > .urlbar-input-box > #urlbar-input {
+  mask-image: linear-gradient(to right, transparent, black 3ch);
+}
+
 #urlbar[textoverflow="start"][hasrtldomain]:not([focused]) > #urlbar-input-container > .urlbar-input-box > #urlbar-input {
   mask-image: linear-gradient(to right, transparent var(--urlbar-scheme-size), black calc(var(--urlbar-scheme-size) + 3ch));
 }
 
 #urlbar-input {
   mask-repeat: no-repeat;
+  unicode-bidi: plaintext;
+  text-align: match-parent;
 }
 
 /* Apply crisp rendering for favicons at exactly 2dppx resolution */
 @media (resolution: 2dppx) {
   .searchbar-engine-image {
     image-rendering: -moz-crisp-edges;
   }
 }
--- a/browser/components/urlbar/UrlbarInput.jsm
+++ b/browser/components/urlbar/UrlbarInput.jsm
@@ -1154,22 +1154,33 @@ class UrlbarInput {
       let autofillValue =
         value + this._autofillPlaceholder.substring(value.length);
       this._autofillValue(autofillValue, value.length, autofillValue.length);
     }
 
     return allowAutofill;
   }
 
+  _checkForRtlText(value) {
+    let directionality = this.window.windowUtils.getDirectionFromText(value);
+    if (directionality == this.window.windowUtils.DIRECTION_RTL) {
+      this.setAttribute("rtltext", "true");
+    } else {
+      this.removeAttribute("rtltext");
+    }
+  }
+
   _updateTextOverflow() {
     if (!this._overflowing) {
       this.removeAttribute("textoverflow");
       return;
     }
 
+    this._checkForRtlText(this.value);
+
     this.window.promiseDocumentFlushed(() => {
       // Check overflow again to ensure it didn't change in the meantime.
       let input = this.inputField;
       if (input && this._overflowing) {
         let side =
           input.scrollLeft && input.scrollLeft == input.scrollLeftMax
             ? "start"
             : "end";
@@ -1861,16 +1872,17 @@ class UrlbarInput {
     // Clear composition values if we're no more composing.
     if (this._compositionState != UrlbarUtils.COMPOSITION.COMPOSING) {
       this._compositionState = UrlbarUtils.COMPOSITION.NONE;
       this._compositionClosedPopup = false;
     }
 
     if (value) {
       this.setAttribute("usertyping", "true");
+      this._checkForRtlText(value);
     } else {
       this.removeAttribute("usertyping");
     }
     this.removeAttribute("actiontype");
 
     if (!this.view.isOpen || !value) {
       this.view.clear();
     }