Bug 1595326 - Add auto-direction to the tags in Pocket r=Gijs
authorItiel <itiel_yn8@walla.com>
Sat, 16 Nov 2019 17:02:00 +0000
changeset 502323 05f4ac2d6dd6beb54482ce138d36cf3226f2464c
parent 502322 2909f92bb59434929217c1510b991ef7ed88314c
child 502324 e6bc09bed1cf8e008b4b67a562154d53251812b8
push id114172
push userdluca@mozilla.com
push dateTue, 19 Nov 2019 11:31:10 +0000
treeherdermozilla-inbound@b5c5ba07d3db [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1595326
milestone72.0a1
first release with
nightly linux32
05f4ac2d6dd6 / 72.0a1 / 20191116213557 / files
nightly linux64
05f4ac2d6dd6 / 72.0a1 / 20191116213557 / files
nightly mac
05f4ac2d6dd6 / 72.0a1 / 20191116213557 / files
nightly win32
05f4ac2d6dd6 / 72.0a1 / 20191116213557 / files
nightly win64
05f4ac2d6dd6 / 72.0a1 / 20191116213557 / files
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
releases
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1595326 - Add auto-direction to the tags in Pocket r=Gijs Differential Revision: https://phabricator.services.mozilla.com/D52457
browser/components/pocket/content/panels/css/saved.css
browser/components/pocket/content/panels/js/saved.js
--- a/browser/components/pocket/content/panels/css/saved.css
+++ b/browser/components/pocket/content/panels/css/saved.css
@@ -369,17 +369,16 @@
     width: 14em;
     padding-inline: 0.5em;
 }
 .pkt_ext_containersaved .pkt_ext_tag_error .pkt_ext_tag_input_wrapper {
     border: 1px solid #d74345;
 }
 .pkt_ext_containersaved .pkt_ext_tag_input_wrapper .token-input-list {
     display: block;
-    inset-inline-start: 0;
     height: 1.7em;
     overflow: hidden;
     position: relative;
     width: 60em;
 }
 .pkt_ext_containersaved .pkt_ext_tag_input_wrapper .token-input-list,
 .pkt_ext_containersaved .pkt_ext_tag_input_wrapper li {
     font-size: 14px;
@@ -704,16 +703,17 @@
     font-weight: normal;
     line-height: inherit;
     letter-spacing: normal;
     padding: 0;
     margin: 0;
     text-transform: none;
     vertical-align: top;
     width: auto;
+    unicode-bidi: plaintext;
 }
 .pkt_ext_containersaved .token-input-token p:before {
     content: none;
     width: 0;
 }
 .pkt_ext_containersaved .token-input-token span {
     background: url(../img/tag_close@1x.png) center center no-repeat;
     cursor: pointer;
--- a/browser/components/pocket/content/panels/js/saved.js
+++ b/browser/components/pocket/content/panels/js/saved.js
@@ -143,29 +143,35 @@ var PKT_SAVED_OVERLAY = function(options
     } else {
       $(".pkt_ext_containersaved")
         .find(".pkt_ext_btn")
         .addClass("pkt_ext_btn_disabled");
     }
     myself.updateSlidingTagList();
   };
   this.updateSlidingTagList = function() {
-    var inputleft = $(".token-input-input-token input").position().left;
-    var listleft = $(".token-input-list").position().left;
-    var listleftmanual = parseInt($(".token-input-list").css("left"));
+    var cssDir;
+    if (document.dir == "ltr") {
+      cssDir = "left";
+    } else {
+      cssDir = "right";
+    }
+    var inputleft = $(".token-input-input-token input").position()[cssDir];
+    var listleft = $(".token-input-list").position()[cssDir];
+    var listleftmanual = parseInt($(".token-input-list").css(cssDir));
     var listleftnatural = listleft - listleftmanual;
     var leftwidth = $(".pkt_ext_tag_input_wrapper").outerWidth();
 
     if (inputleft + listleft + 20 > leftwidth) {
       $(".token-input-list").css(
-        "left",
+        cssDir,
         Math.min((inputleft + listleftnatural - leftwidth + 20) * -1, 0) + "px"
       );
     } else {
-      $(".token-input-list").css("left", "0");
+      $(".token-input-list").css(cssDir, "0");
     }
   };
   this.checkPlaceholderStatus = function() {
     if (
       this.wrapper.find(".pkt_ext_tag_input_wrapper").find(".token-input-token")
         .length
     ) {
       this.wrapper