Bug 1262755 - Enlarge caret touch target by 59% for Fennec. r=capella,snorp
☠☠ backed out by 738b1eb6043a ☠ ☠
authorTing-Yu Lin <tlin@mozilla.com>
Fri, 15 Apr 2016 17:10:02 +0800
changeset 332303 637e80ab4fca8d6fe9d1c0ef471c75c338334bcd
parent 332302 479e9cb32dc93bb6cbfc343f97468c6e46b4035d
child 332304 029ff9fb258a6403ca6528b812cdf434c31d7775
push id6048
push userkmoir@mozilla.com
push dateMon, 06 Jun 2016 19:02:08 +0000
treeherdermozilla-beta@46d72a56c57d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerscapella, snorp
bugs1262755
milestone48.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 1262755 - Enlarge caret touch target by 59% for Fennec. r=capella,snorp Enlarge the touch target of the caret to the left, bottom, and right by 59% (13px) per bug 1262755 comment 7. Since the touch target becomes larger, the carets on the <input> in previous test might cause the next test to fail on <textarea> because it will press on the caret when trying to focus on <textarea>. Add two <br> to testAccessibleCarets.html to separate the <input> and <textarea>. MozReview-Commit-ID: JIwmuHJ2QsQ
layout/style/res/ua.css
mobile/android/tests/browser/robocop/testAccessibleCarets.html
mobile/android/themes/core/content.css
--- a/layout/style/res/ua.css
+++ b/layout/style/res/ua.css
@@ -348,17 +348,18 @@ div:-moz-native-anonymous.moz-accessible
   position: absolute;
   z-index: 2147483647;
 }
 
 div:-moz-native-anonymous.moz-accessiblecaret > div.image {
   background-position: center bottom;
   background-size: 100%;
   background-repeat: no-repeat;
-  bottom: 0;
+  background-origin: content-box;
+  top: 0;
   width: 100%;
   height: 100%;
 
   /* Override this property in moz-custom-content-container to make dummy touch
    * listener work. */
   pointer-events: auto;
 }
 
--- a/mobile/android/tests/browser/robocop/testAccessibleCarets.html
+++ b/mobile/android/tests/browser/robocop/testAccessibleCarets.html
@@ -20,17 +20,17 @@
       style="direction: ltr; width: 10em; height: 2em; word-wrap: break-word;
       overflow: auto; -moz-user-select:text">Open the door</div>
     <div id="RTLtextContent"
       style="direction: rtl; width: 10em; height: 2em; word-wrap: break-word;
       overflow: auto; -moz-user-select:text">תן לי מים</div>
 
     <input id="LTRinput" style="direction: ltr;" value="Type something">
     <input id="RTLinput" style="direction: rtl;" value="לרוץ במעלה הגבעה">
-    <br>
+    <br><br><br>
 
     <textarea id="LTRtextarea" style="direction: ltr;"
       rows="3" cols="8">Words in a box</textarea>
     <textarea id="RTLtextarea" style="direction: rtl;"
       rows="3" cols="8">הספר הוא טוב</textarea>
 
     <br>
     <input id="LTRphone" style="direction: ltr;" size="40"
--- a/mobile/android/themes/core/content.css
+++ b/mobile/android/themes/core/content.css
@@ -331,16 +331,24 @@ input[type="submit"]:active:hover {
   -moz-padding-start: 7px;
 }
 
 input[type=number] > div > div, /* work around bug 946184 */
 input[type=number]::-moz-number-spin-box {
   display: none;
 }
 
+div:-moz-native-anonymous.moz-accessiblecaret > div.image {
+  /* border: 0.1px solid red; */ /* Uncomment border to see the touch target. */
+  padding-left: 59%;    /* ((48-22)/2)px / 22px ~= 59% */
+  padding-bottom: 59%;
+  padding-right: 59%;
+  left: -59%;
+}
+
 /* Override accessiblecaret css in layout/style/ua.css */
 div:-moz-native-anonymous.moz-accessiblecaret.normal > div.image {
   background-image: url("chrome://browser/skin/images/accessiblecaret-normal-hdpi.png");
   bottom: -11%; /* space between the blinking cursor and the caret */
 }
 
 div:-moz-native-anonymous.moz-accessiblecaret.left > div.image {
   background-image: url("chrome://browser/skin/images/accessiblecaret-tilt-left-hdpi.png");