Bug 1322542 - part 2 - fix textoverflow attribute. r=Itiel
authorMarco Bonardo <mbonardo@mozilla.com>
Mon, 16 Dec 2019 09:54:47 +0000
changeset 507063 3f46d4a4341cc315fd9d4b2c73a29eb830ae547a
parent 507062 d98ef30b82f7afbe50122ba5e259a01000d94980
child 507064 c698a04edbe168ddaa33600dcaa908b9a26e95ff
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)
reviewersItiel
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 - part 2 - fix textoverflow attribute. r=Itiel Differential Revision: https://phabricator.services.mozilla.com/D57097
browser/base/content/browser.css
browser/components/urlbar/UrlbarInput.jsm
browser/components/urlbar/tests/browser/browser_UrlbarInput_overflow.js
browser/components/urlbar/tests/browser/browser_UrlbarInput_overflow_resize.js
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -610,32 +610,32 @@ toolbar:not(#TabsToolbar) > #personal-bo
   height: 100%;
   visibility: hidden;
   direction: ltr;
   pointer-events: none;
 }
 
 /* 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));
 }
 
 #urlbar-input {
   mask-repeat: no-repeat;
   unicode-bidi: plaintext;
   text-align: match-parent;
 }
--- a/browser/components/urlbar/UrlbarInput.jsm
+++ b/browser/components/urlbar/UrlbarInput.jsm
@@ -1158,37 +1158,39 @@ class UrlbarInput {
 
     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");
+      return true;
     }
+    this.removeAttribute("rtltext");
+    return false;
   }
 
   _updateTextOverflow() {
     if (!this._overflowing) {
       this.removeAttribute("textoverflow");
       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.
           if (this._overflowing) {
             this.setAttribute("textoverflow", side);
           }
         });
       }
--- a/browser/components/urlbar/tests/browser/browser_UrlbarInput_overflow.js
+++ b/browser/components/urlbar/tests/browser/browser_UrlbarInput_overflow.js
@@ -54,21 +54,24 @@ async function testVal(aExpected, overfl
     gURLBar.inputField.scrollWidth > gURLBar.inputField.clientWidth;
   Assert.equal(isOverflowed, !!overflowSide, "Check The input field overflow");
   Assert.equal(
     gURLBar.getAttribute("textoverflow"),
     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"
     );
   }
 }
 
 add_task(async function() {
   // We use a new tab for the test to be sure all the tab switching and loading
   // is complete before starting, otherwise onLocationChange for this tab could
@@ -82,35 +85,35 @@ add_task(async function() {
   let lotsOfSpaces = "%20".repeat(200);
 
   // اسماء.شبكة
   let rtlDomain =
     "\u0627\u0633\u0645\u0627\u0621\u002e\u0634\u0628\u0643\u0629";
 
   // 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({
     set: [
       ["browser.urlbar.formatting.enabled", false],
       ["browser.urlbar.trimURLs", false],
     ],
   });
 
   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");
 });
--- a/browser/components/urlbar/tests/browser/browser_UrlbarInput_overflow_resize.js
+++ b/browser/components/urlbar/tests/browser/browser_UrlbarInput_overflow_resize.js
@@ -17,17 +17,17 @@ async function testVal(win, url) {
       "Check The input field overflows"
     );
     // Resize is handled on a timer, so we must wait for it.
     await TestUtils.waitForCondition(
       () => urlbar.inputField.scrollLeft == urlbar.inputField.scrollLeftMax,
       "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"
     );
   }
 }
 
 add_task(async function() {
   // We use a new tab for the test to be sure all the tab switching and loading
   // is complete before starting, otherwise onLocationChange for this tab could