Bug 1459646 - Always flip the resizer with CSS transform r=dao
authorTimothy Guan-tin Chien <timdream@gmail.com>
Mon, 07 May 2018 15:05:26 -0700
changeset 417476 3b84be9ee9e6a19d8e49aa86b71c9d60b5eaec8b
parent 417475 83fb6c53e740cd7d3f8125a684cb5851c5ef4dd8
child 417477 8e9fc4d911cfa88f81c05b741d96dad68bd5d3ce
push id33968
push userebalazs@mozilla.com
push dateWed, 09 May 2018 09:32:53 +0000
treeherdermozilla-central@a2eccfbeb0ae [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1459646
milestone62.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 1459646 - Always flip the resizer with CSS transform r=dao Having the native theme widget to flip its own direction turned out to be something not needed anymore, and it interfere with the CSS rule we set to flip non-native SVG background. This patch turned that off and always flips the resizer with CSS transform. MozReview-Commit-ID: EbjTfFpJpZ0
layout/reftests/forms/textarea/reftest.list
layout/reftests/forms/textarea/resize-rtl-ref.html
layout/reftests/forms/textarea/resize-rtl.html
layout/reftests/xul/reftest.list
toolkit/content/minimal-xul.css
toolkit/themes/shared/icons/resizer-rtl.svg
toolkit/themes/shared/jar.inc.mn
--- a/layout/reftests/forms/textarea/reftest.list
+++ b/layout/reftests/forms/textarea/reftest.list
@@ -1,9 +1,10 @@
 skip-if(Android) == resize.html resize-ref.html
+skip-if(Android) == resize-rtl.html resize-rtl-ref.html
 # an offset seems to apply to the native resizer on windows so skip this test for now
 skip-if(Android) skip-if(winWidget) fuzzy-if(cocoaWidget,1,33) fuzzy-if(skiaContent&&!winWidget&&!Android,5,10) == resize-background.html resize-background-ref.html
 skip-if(Android) != ltr.html rtl.html
 skip-if(Android) != ltr-scrollbar.html rtl-scrollbar.html
 skip-if(Android) != in-ltr-doc-scrollbar.html in-rtl-doc-scrollbar.html
 skip-if(Android) != ltr.html no-resize.html
 skip-if(Android) != rtl.html no-resize.html # bug 834724
 fuzzy-if(skiaContent,1,1) == rtl.html rtl-dynamic-attr.html
copy from layout/reftests/forms/textarea/resize-ref.html
copy to layout/reftests/forms/textarea/resize-rtl-ref.html
--- a/layout/reftests/forms/textarea/resize-ref.html
+++ b/layout/reftests/forms/textarea/resize-rtl-ref.html
@@ -1,3 +1,3 @@
 <html><body>
-<div style="overflow: auto; resize: both; background: white; -moz-appearance: none; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;"></div>
+<div style="transform: scaleX(-1); overflow: auto; resize: both; background: white; -moz-appearance: none; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;"></div>
 </body></html>
copy from layout/reftests/forms/textarea/resize.html
copy to layout/reftests/forms/textarea/resize-rtl.html
--- a/layout/reftests/forms/textarea/resize.html
+++ b/layout/reftests/forms/textarea/resize-rtl.html
@@ -1,3 +1,3 @@
 <html><body>
-<textarea style="-moz-appearance: none; background: white; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;" resizable="false" multiline="true" width="100" height="100"></textarea>
+<textarea dir="rtl" style="-moz-appearance: none; background: white; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;" resizable="false" multiline="true" width="100" height="100"></textarea>
 </body></html>
--- a/layout/reftests/xul/reftest.list
+++ b/layout/reftests/xul/reftest.list
@@ -80,22 +80,18 @@ skip == treecell-image-svg-1b.xul treece
 test-pref(svg.context-properties.content.enabled,true) == treetwisty-svg-context-paint-1.xul treetwisty-svg-context-paint-1-ref.xul
 
 # resizer (non-native-themed)
 
 != resizer-bottomend.xul blank-window.xul
 == resizer-bottomend.xul resizer-bottomright.xul
 != resizer-bottomend.xul resizer-bottomend-rtl.xul
 != resizer-bottomend-rtl.xul blank-window.xul
-# fuzzy for comparing SVG image flipped by CSS with a flipped SVG image.
-# See bug 1450017 comment 79.
-fuzzy(43,98) == resizer-bottomend-rtl.xul resizer-bottomend-flipped.xul
-fuzzy(43,98) == resizer-bottomleft-rtl.xul resizer-bottomleft.xul
-fuzzy(43,98) == resizer-bottomright-rtl.xul resizer-bottomright.xul
+== resizer-bottomend-rtl.xul resizer-bottomend-flipped.xul
+== resizer-bottomleft-rtl.xul resizer-bottomleft.xul
+== resizer-bottomright-rtl.xul resizer-bottomright.xul
 
 != resizer-bottomstart.xul blank-window.xul
 == resizer-bottomstart.xul resizer-bottomleft.xul
 == resizer-bottomstart.xul resizer-left.xul
 != resizer-bottomstart.xul resizer-bottomstart-rtl.xul
 != resizer-bottomstart-rtl.xul blank-window.xul
-# fuzzy for comparing SVG image flipped by CSS to a flipped SVG image.
-# See bug 1450017 comment 79.
-fuzzy(43,98) == resizer-bottomstart-rtl.xul resizer-bottomend.xul
+== resizer-bottomstart-rtl.xul resizer-bottomend.xul
--- a/toolkit/content/minimal-xul.css
+++ b/toolkit/content/minimal-xul.css
@@ -71,50 +71,49 @@ label html|span.accesskey {
   text-decoration: underline;
 }
 
 /********** resizer **********/
 
 resizer {
   position: relative;
   z-index: 2147483647;
+  /* Widget gets decide on its own whether or not the native theme should apply,
+     based on the context/OS theme. If it does not, SVG background will kick in. */
   -moz-appearance: resizer;
+
+  /* native resizer should never flip on its own;
+     we will flip it (or the SVG background) with CSS transform below. */
+  direction: ltr;
+  writing-mode: initial;
+
   background: url("chrome://global/skin/icons/resizer.svg") no-repeat;
   background-size: 100% 100%;
   cursor: se-resize;
   width: 15px;
   height: 15px;
 }
 
-/* Do not try to remove the RTL asset and flip it with CSS transform;
-   native theme style rely on CSS transfrom below to flip too, when
-   replacing the background image. */
-resizer:-moz-locale-dir(rtl) {
-  background: url("chrome://global/skin/icons/resizer-rtl.svg") no-repeat;
-}
-
-resizer[dir="left"]:-moz-locale-dir(ltr),
-resizer[dir="right"]:-moz-locale-dir(rtl),
-resizer[dir="bottomleft"]:-moz-locale-dir(ltr),
-resizer[dir="bottomright"]:-moz-locale-dir(rtl),
-resizer[dir="bottomstart"] {
-  transform: scaleX(-1);
-}
-
+/* bottomstart/bottomend is supported in XUL window only */
 resizer[dir="bottomleft"],
 resizer[dir="bottomstart"]:-moz-locale-dir(ltr),
 resizer[dir="bottomend"]:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
   cursor: sw-resize;
 }
 
 resizer[dir="top"],
 resizer[dir="bottom"] {
   cursor: ns-resize;
 }
 
+resizer[dir="left"] {
+  transform: scaleX(-1);
+}
+
 resizer[dir="left"],
 resizer[dir="right"] {
   cursor: ew-resize;
 }
 
 resizer[dir="topleft"] {
   cursor: nw-resize;
 }
deleted file mode 100644
--- a/toolkit/themes/shared/icons/resizer-rtl.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
-  <path d="M 0.658,2.129 1.14,1.646 a 0.5,0.5 0 0 0 0,0.708 L 12.646,13.86 a 0.5,0.5 0 0 0 0.708,0 l -0.483,0.482 a 0.5,0.5 0 0 1 -0.707,0 L 0.658,2.836 a 0.5,0.5 0 0 1 0,-0.707 z" fill="#f9f9fa" opacity=".4"/>
-  <path d="m 0.644,5.649 0.5,-0.5 a 0.5,0.5 0 0 0 0,0.707 l 8,8 a 0.5,0.5 0 0 0 0.707,0 l -0.5,0.5 a 0.5,0.5 0 0 1 -0.707,0 l -8,-8 a 0.5,0.5 0 0 1 0,-0.707 z" fill="#f9f9fa" opacity=".4"/>
-  <path d="M 0.637,9.158 1.148,8.647 a 0.5,0.5 0 0 0 0,0.707 l 4.5,4.5 a 0.5,0.5 0 0 0 0.707,0 l -0.511,0.511 a 0.5,0.5 0 0 1 -0.707,0 l -4.5,-4.5 a 0.5,0.5 0 0 1 0,-0.707 z" fill="#f9f9fa" opacity=".4"/>
-  <path d="m 0.685,12.621 0.468,-0.468 a 0.5,0.5 0 0 0 0,0.707 l 0.993,0.993 a 0.5,0.5 0 0 0 0.707,0 l -0.468,0.468 a 0.5,0.5 0 0 1 -0.707,0 L 0.685,13.328 a 0.5,0.5 0 0 1 0,-0.707 z" fill="#f9f9fa" opacity=".4"/>
-  <path d="m 1.14,1.646 a 0.5,0.5 0 0 1 0.708,0 L 13.354,13.152 A 0.5006316,0.5006316 0 1 1 12.646,13.86 L 1.14,2.354 a 0.5,0.5 0 0 1 0,-0.708 z" fill="#0c0c0d" opacity=".4"/>
-  <path d="m 1.146,5.146 a 0.5,0.5 0 0 1 0.707,0 l 8,8 a 0.5,0.5 0 0 1 -0.707,0.707 l -8,-8 a 0.5,0.5 0 0 1 0,-0.707 z" fill="#0c0c0d" opacity=".4"/>
-  <path d="m 1.148,8.647 a 0.5,0.5 0 0 1 0.707,0 l 4.5,4.5 a 0.5,0.5 0 0 1 -0.707,0.707 l -4.5,-4.5 a 0.5,0.5 0 0 1 0,-0.707 z" fill="#0c0c0d" opacity=".4"/>
-  <path d="m 1.153,12.153 a 0.5,0.5 0 0 1 0.707,0 l 0.993,0.993 A 0.5,0.5 0 1 1 2.146,13.853 L 1.153,12.86 a 0.5,0.5 0 0 1 0,-0.707 z" fill="#0c0c0d" opacity=".4"/>
-</svg>
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -35,17 +35,16 @@ toolkit.jar:
   skin/classic/global/icons/find-previous-arrow.svg        (../../shared/icons/find-previous-arrow.svg)
   skin/classic/global/icons/find-next-arrow.svg            (../../shared/icons/find-next-arrow.svg)
   skin/classic/global/icons/help.svg                       (../../shared/icons/help.svg)
   skin/classic/global/icons/info.svg                       (../../shared/incontent-icons/info.svg)
   skin/classic/global/icons/input-clear.svg                (../../shared/icons/input-clear.svg)
   skin/classic/global/icons/loading.png                    (../../shared/icons/loading.png)
   skin/classic/global/icons/loading@2x.png                 (../../shared/icons/loading@2x.png)
   skin/classic/global/icons/resizer.svg                    (../../shared/icons/resizer.svg)
-  skin/classic/global/icons/resizer-rtl.svg                (../../shared/icons/resizer-rtl.svg)
   skin/classic/global/icons/spinner-arrow-down.svg         (../../shared/icons/spinner-arrow-down.svg)
   skin/classic/global/icons/spinner-arrow-up.svg           (../../shared/icons/spinner-arrow-up.svg)
   skin/classic/global/icons/arrow-dropdown-12.svg          (../../shared/icons/arrow-dropdown-12.svg)
   skin/classic/global/icons/arrow-dropdown-16.svg          (../../shared/icons/arrow-dropdown-16.svg)
   skin/classic/global/icons/warning.svg                    (../../shared/icons/warning.svg)
   skin/classic/global/illustrations/about-rights.svg       (../../shared/illustrations/about-rights.svg)
   skin/classic/global/icons/blocked.svg                    (../../shared/incontent-icons/blocked.svg)
   skin/classic/global/illustrations/about-license.svg      (../../shared/illustrations/about-license.svg)