Bug 1307027 - Fix vertical position for caret images. r=mtseng
authorTing-Yu Lin <tlin@mozilla.com>
Mon, 03 Oct 2016 15:26:40 +0800
changeset 316382 b27a34720a752030be59e3fb2c84cc846d6d0b05
parent 316381 1ebe25b02ffe62f641963e6877e3bba9f133ef91
child 316383 1bb61a26fb376b8b8fc08ee686eaaa46c7e32469
push id30770
push userkwierso@gmail.com
push dateWed, 05 Oct 2016 00:00:48 +0000
treeherdermozilla-central@3470e326025c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmtseng
bugs1307027
milestone52.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 1307027 - Fix vertical position for caret images. r=mtseng After the splitting of text overlay and the caret images, the caret image should be placed from the top of #image div. Delete those "top" style for Fennec since they're not needed anymore in current setup. MozReview-Commit-ID: Dn6jgqaFfek
layout/style/res/ua.css
mobile/android/themes/core/content.css
--- a/layout/style/res/ua.css
+++ b/layout/style/res/ua.css
@@ -367,17 +367,17 @@ div:-moz-native-anonymous.moz-accessible
   width: 100%;
 
   /* Override this property in moz-custom-content-container to make dummy touch
    * listener work. */
   pointer-events: auto;
 }
 
 div:-moz-native-anonymous.moz-accessiblecaret > #image {
-  background-position: center bottom;
+  background-position: center top;
   background-size: 100%;
   background-repeat: no-repeat;
   background-origin: content-box;
   height: 100%;
 }
 
 div:-moz-native-anonymous.moz-accessiblecaret > #bar {
   margin-left: 49%;
--- a/mobile/android/themes/core/content.css
+++ b/mobile/android/themes/core/content.css
@@ -331,44 +331,49 @@ input[type="submit"]:active:hover {
   padding-inline-start: 7px;
 }
 
 input[type=number] > div > div, /* work around bug 946184 */
 input[type=number]::-moz-number-spin-box {
   display: none;
 }
 
+/* Override accessiblecaret css in layout/style/ua.css */
 div:-moz-native-anonymous.moz-accessiblecaret > #text-overlay,
 div:-moz-native-anonymous.moz-accessiblecaret > #image {
   /* border: 0.1px solid red; */ /* Uncomment border to see the touch target. */
-  padding-left: 59%;    /* ((48-22)/2)px / 22px ~= 59% */
-  padding-right: 59%;
+  padding-left: 59%; /* Enlarge the touch area. ((48-22)/2)px / 22px ~= 59% */
+  padding-right: 59%; /* Enlarge the touch area. */
   left: -59%;
 }
 
 div:-moz-native-anonymous.moz-accessiblecaret > #image {
-  padding-bottom: 59%;
+  padding-bottom: 59%; /* Enlarge the touch area. */
 }
 
-/* Override accessiblecaret css in layout/style/ua.css */
 div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
   background-image: url("chrome://browser/skin/images/accessiblecaret-normal-hdpi.png");
-  top: 11%; /* space between the blinking cursor and the caret */
+}
+
+div:-moz-native-anonymous.moz-accessiblecaret.left > #text-overlay,
+div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
+  margin-left: -50%;
 }
 
 div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
   background-image: url("chrome://browser/skin/images/accessiblecaret-tilt-left-hdpi.png");
-  margin-left: -50%;
-  top: 1%; /* space between the selection highlight and the caret */
+}
+
+div:-moz-native-anonymous.moz-accessiblecaret.right > #text-overlay,
+div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
+  margin-left: 47%;
 }
 
 div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
   background-image: url("chrome://browser/skin/images/accessiblecaret-tilt-right-hdpi.png");
-  margin-left: 47%;
-  top: 1%; /* space between the selection highlight and the caret */
 }
 
 @media (min-resolution: 1.5dppx) {
   div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
     background-image: url("chrome://browser/skin/images/accessiblecaret-normal-hdpi.png");
   }
 
   div:-moz-native-anonymous.moz-accessiblecaret.left > #image {