Bug 1262755 - Enlarge caret touch target by 59% for Fennec. r=capella,snorp
authorTing-Yu Lin <tlin@mozilla.com>
Fri, 22 Apr 2016 18:23:47 +0800
changeset 332410 4280881aae807f48d82d2cdce810220b68a7c3ff
parent 332409 a2bf3ca6cc2a3bc69133aa562bfbe446a927fd5f
child 332411 7600273fa9a96bfb1a6c30a95bd0951f696081c6
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 <br> elements to testAccessibleCarets.html to separate these test fields. 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
@@ -354,17 +354,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,26 +20,26 @@
       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"
       value="09876543210 .-.)(wp#*1034103410341034X">
     <br>
     <input id="RTLphone" style="direction: rtl;" size="40"
       value="התקשר +972 3 7347514 במשך זמן טוב">
-    <br>
+    <br><br><br>
     <div><input value="DDs12">3 45<em id="bug1265750"> 678</em> 90</div>
 
   </body>
 </html>
--- 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");