Bug 1322542 - part 2 - fix textoverflow attribute. r=Itiel

Differential Revision: https://phabricator.services.mozilla.com/D57097

--HG--
extra : moz-landing-system : lando

browser/base/content/browser.css

@@ -615,22 +615,22 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
 
 /* Visible if the urlbar is not focused and it overflows at the start.
    Uses the required-valid trick to check if it contains a value */
-#urlbar[textoverflow="start"][hasrtldomain]:not([focused]) > #urlbar-input-container > .urlbar-input-box > #urlbar-scheme:valid {
+#urlbar[textoverflow="left"][hasrtldomain]:not([focused]) > #urlbar-input-container > .urlbar-input-box > #urlbar-scheme:valid {
   visibility: visible;
 }
 
 /* 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 {
+#urlbar[textoverflow="right"]: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 {
+#urlbar[textoverflow="left"][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 {
+#urlbar[textoverflow="left"][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));
 }
 

browser/components/urlbar/UrlbarInput.jsm

@@ -1163,9 +1163,10 @@ class UrlbarInput {
     let directionality = this.window.windowUtils.getDirectionFromText(value);
     if (directionality == this.window.windowUtils.DIRECTION_RTL) {
       this.setAttribute("rtltext", "true");
-    } else {
-      this.removeAttribute("rtltext");
+      return true;
     }
+    this.removeAttribute("rtltext");
+    return false;
   }
 
   _updateTextOverflow() {
@@ -1174,16 +1175,17 @@ class UrlbarInput {
       return;
     }
 
-    this._checkForRtlText(this.value);
+    let isRTL = 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";
+        let side = isRTL ? "left" : "right";
+        if (input.scrollLeft == input.scrollLeftMax) {
+          side = isRTL == !input.scrollLeft ? "left" : "right";
+        }
+
         this.window.requestAnimationFrame(() => {
           // And check once again, since we might have stopped overflowing
           // since the promiseDocumentFlushed callback fired.

browser/components/urlbar/tests/browser/browser_UrlbarInput_overflow.js

@@ -59,11 +59,14 @@ async function testVal(aExpected, overflowSide = "") {
     "Check the textoverflow attribute"
   );
   if (overflowSide) {
-    let side = gURLBar.inputField.scrollLeft == 0 ? "end" : "start";
+    let side =
+      gURLBar.inputField.scrollLeft == 0 && !gURLBar.hasAttribute("rtltext")
+        ? "right"
+        : "left";
     Assert.equal(side, overflowSide, "Check the overflow side");
     Assert.equal(
       getComputedStyle(gURLBar.valueFormatter.scheme).visibility,
-      scheme && isOverflowed && overflowSide == "start" ? "visible" : "hidden",
+      scheme && isOverflowed && overflowSide == "left" ? "visible" : "hidden",
       "Check the scheme box visibility"
     );
   }
@@ -87,17 +90,17 @@ add_task(async function() {
 
   // Mix the direction of the tests to cover more cases, and to ensure the
   // textoverflow attribute changes every time, because tewtVal waits for that.
-  await testVal(`https://mozilla.org/${lotsOfSpaces}/test/`, "end");
+  await testVal(`https://mozilla.org/${lotsOfSpaces}/test/`, "right");
   await testVal(`https://mozilla.org/`);
-  await testVal(`https://${rtlDomain}/${lotsOfSpaces}/test/`, "start");
+  await testVal(`https://${rtlDomain}/${lotsOfSpaces}/test/`, "left");
 
-  await testVal(`ftp://mozilla.org/${lotsOfSpaces}/test/`, "end");
-  await testVal(`ftp://${rtlDomain}/${lotsOfSpaces}/test/`, "start");
+  await testVal(`ftp://mozilla.org/${lotsOfSpaces}/test/`, "right");
+  await testVal(`ftp://${rtlDomain}/${lotsOfSpaces}/test/`, "left");
   await testVal(`ftp://mozilla.org/`);
-  await testVal(`http://${rtlDomain}/${lotsOfSpaces}/test/`, "start");
+  await testVal(`http://${rtlDomain}/${lotsOfSpaces}/test/`, "left");
   await testVal(`http://mozilla.org/`);
-  await testVal(`http://mozilla.org/${lotsOfSpaces}/test/`, "end");
-  await testVal(`https://${rtlDomain}:80/${lotsOfSpaces}/test/`, "start");
+  await testVal(`http://mozilla.org/${lotsOfSpaces}/test/`, "right");
+  await testVal(`https://${rtlDomain}:80/${lotsOfSpaces}/test/`, "left");
 
   info("Test with formatting disabled");
   await SpecialPowers.pushPrefEnv({
@@ -108,9 +111,9 @@ add_task(async function() {
   });
 
   await testVal(`https://mozilla.org/`);
-  await testVal(`https://${rtlDomain}/${lotsOfSpaces}/test/`, "start");
-  await testVal(`https://mozilla.org/${lotsOfSpaces}/test/`, "end");
+  await testVal(`https://${rtlDomain}/${lotsOfSpaces}/test/`, "left");
+  await testVal(`https://mozilla.org/${lotsOfSpaces}/test/`, "right");
 
   info("Test with trimURLs disabled");
-  await testVal(`http://${rtlDomain}/${lotsOfSpaces}/test/`, "start");
+  await testVal(`http://${rtlDomain}/${lotsOfSpaces}/test/`, "left");
 });

browser/components/urlbar/tests/browser/browser_UrlbarInput_overflow_resize.js

@@ -22,7 +22,7 @@ async function testVal(win, url) {
       "The urlbar input field is completely scrolled to the end"
     );
     await TestUtils.waitForCondition(
-      () => urlbar.getAttribute("textoverflow") == "start",
+      () => urlbar.getAttribute("textoverflow") == "left",
       "Wait for the textoverflow attribute"
     );
   }