Bug 1021527 - Fix blurry carets by using svg image. r=roc
authorTing-Yu Lin <tlin@mozilla.com>
Mon, 14 Jul 2014 23:08:00 +0200
changeset 216073 f4b101378a0766f2412cdcad07fd21c0d5f01ee4
parent 216072 05547f6e8c03328c2027f34fedc3c8f2db463191
child 216074 7c238ae102ab89015046294d7c42f20ff3a1b294
push id515
push userraliiev@mozilla.com
push dateMon, 06 Oct 2014 12:51:51 +0000
treeherdermozilla-release@267c7a481bef [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersroc
bugs1021527
milestone33.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 1021527 - Fix blurry carets by using svg image. r=roc * Replace png images with svg images for touch caret and selection carets. * Fix touch caret is enlarged on high resolution device due to background-size was not set.
b2g/installer/package-manifest.in
editor/composer/moz.build
editor/composer/res/caret_left.svg
editor/composer/res/caret_middle.svg
editor/composer/res/caret_right.svg
layout/style/ua.css
--- a/b2g/installer/package-manifest.in
+++ b/b2g/installer/package-manifest.in
@@ -646,16 +646,19 @@
 ; Services (gre) prefs
 #ifdef MOZ_SERVICES_SYNC
 @BINPATH@/defaults/pref/services-sync.js
 #endif
 
 ; [Layout Engine Resources]
 ; Style Sheets, Graphics and other Resources used by the layout engine.
 @BINPATH@/res/EditorOverride.css
+@BINPATH@/res/caret_left.svg
+@BINPATH@/res/caret_middle.svg
+@BINPATH@/res/caret_right.svg
 @BINPATH@/res/contenteditable.css
 @BINPATH@/res/designmode.css
 @BINPATH@/res/ImageDocument.css
 @BINPATH@/res/TopLevelImageDocument.css
 @BINPATH@/res/TopLevelVideoDocument.css
 @BINPATH@/res/table-add-column-after-active.gif
 @BINPATH@/res/table-add-column-after-hover.gif
 @BINPATH@/res/table-add-column-after.gif
@@ -669,31 +672,16 @@
 @BINPATH@/res/table-add-row-before-hover.gif
 @BINPATH@/res/table-add-row-before.gif
 @BINPATH@/res/table-remove-column-active.gif
 @BINPATH@/res/table-remove-column-hover.gif
 @BINPATH@/res/table-remove-column.gif
 @BINPATH@/res/table-remove-row-active.gif
 @BINPATH@/res/table-remove-row-hover.gif
 @BINPATH@/res/table-remove-row.gif
-@BINPATH@/res/text_caret.png
-@BINPATH@/res/text_caret@1.5x.png
-@BINPATH@/res/text_caret@2.25x.png
-@BINPATH@/res/text_caret@2x.png
-@BINPATH@/res/text_caret_tilt_left.png
-@BINPATH@/res/text_caret_tilt_left@1.5x.png
-@BINPATH@/res/text_caret_tilt_left@2.25x.png
-@BINPATH@/res/text_caret_tilt_left@2x.png
-@BINPATH@/res/text_caret_tilt_right.png
-@BINPATH@/res/text_caret_tilt_right@1.5x.png
-@BINPATH@/res/text_caret_tilt_right@2.25x.png
-@BINPATH@/res/text_caret_tilt_right@2x.png
-@BINPATH@/res/text_selection_handle.png
-@BINPATH@/res/text_selection_handle@1.5.png
-@BINPATH@/res/text_selection_handle@2.png
 @BINPATH@/res/grabber.gif
 #ifdef XP_MACOSX
 @BINPATH@/res/cursors/*
 #endif
 @BINPATH@/res/fonts/*
 @BINPATH@/res/dtd/*
 @BINPATH@/res/html/*
 @BINPATH@/res/langGroups.properties
--- a/editor/composer/moz.build
+++ b/editor/composer/moz.build
@@ -22,16 +22,19 @@ UNIFIED_SOURCES += [
     'nsEditingSession.cpp',
     'nsEditorSpellCheck.cpp',
 ]
 
 FAIL_ON_WARNINGS = True
 
 FINAL_LIBRARY = 'xul'
 RESOURCE_FILES += [
+    'res/caret_left.svg',
+    'res/caret_middle.svg',
+    'res/caret_right.svg',
     'res/EditorOverride.css',
     'res/grabber.gif',
     'res/table-add-column-after-active.gif',
     'res/table-add-column-after-hover.gif',
     'res/table-add-column-after.gif',
     'res/table-add-column-before-active.gif',
     'res/table-add-column-before-hover.gif',
     'res/table-add-column-before.gif',
@@ -42,24 +45,9 @@ RESOURCE_FILES += [
     'res/table-add-row-before-hover.gif',
     'res/table-add-row-before.gif',
     'res/table-remove-column-active.gif',
     'res/table-remove-column-hover.gif',
     'res/table-remove-column.gif',
     'res/table-remove-row-active.gif',
     'res/table-remove-row-hover.gif',
     'res/table-remove-row.gif',
-    'res/text_caret.png',
-    'res/text_caret@1.5x.png',
-    'res/text_caret@2.25x.png',
-    'res/text_caret@2x.png',
-    'res/text_caret_tilt_left.png',
-    'res/text_caret_tilt_left@1.5x.png',
-    'res/text_caret_tilt_left@2.25x.png',
-    'res/text_caret_tilt_left@2x.png',
-    'res/text_caret_tilt_right.png',
-    'res/text_caret_tilt_right@1.5x.png',
-    'res/text_caret_tilt_right@2.25x.png',
-    'res/text_caret_tilt_right@2x.png',
-    'res/text_selection_handle.png',
-    'res/text_selection_handle@1.5.png',
-    'res/text_selection_handle@2.png',
 ]
new file mode 100644
--- /dev/null
+++ b/editor/composer/res/caret_left.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     width="29px" height="31px" viewBox="0 0 29 31" style="enable-background:new 0 0 29 31;" xml:space="preserve">
+  <!-- TODO: Enable shadow after bug 1015575 is resolved.
+  <defs>
+    <filter id="caretFilter">
+      <feOffset result="offsetOut" in="SourceAlpha" dx="1" dy="1" />
+      <feGaussianBlur result="blurOut" in="offsetOut" stdDeviation="0.5" />
+      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
+    </filter>
+  </defs>
+  <g fill="#2da9e3" filter="url(#caretFilter)">
+  -->
+  <g fill="#2da9e3">
+    <path d="M25.368,2.674c-0.049,0.104-0.09,0.209-0.134,0.314C25.304,2.893,25.347,2.786,25.368,2.674z"/>
+    <path d="M24.27,1.734c0.003-0.001,0.008-0.003,0.013-0.004C24.277,1.73,24.272,1.733,24.27,1.734z"/>
+    <path d="M24.583,8.574C24.25,6.7,24.478,4.755,25.234,2.989c0.044-0.105,0.085-0.21,0.134-0.314
+             c0.053-0.254-0.016-0.528-0.204-0.73c-0.232-0.249-0.581-0.322-0.882-0.215c-0.005,0.001-0.01,0.003-0.013,0.004
+             c-1.915,0.71-4.001,0.798-5.954,0.277C15.015,0.898,11.222,1.587,8.5,4.134c-3.947,3.691-4.155,9.882-0.464,13.828
+             c3.691,3.947,9.881,4.154,13.828,0.462C24.64,15.828,25.562,11.994,24.583,8.574z"/>
+  </g>
+</svg>
new file mode 100644
--- /dev/null
+++ b/editor/composer/res/caret_middle.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     width="29px" height="31px" style="enable-background:new 0 0 29 31;" xml:space="preserve">
+  <!-- TODO: Enable shadow after bug 1015575 is resolved.
+  <defs>
+    <filter id="caretFilter">
+      <feOffset result="offsetOut" in="SourceAlpha" dx="1" dy="1" />
+      <feGaussianBlur result="blurOut" in="offsetOut" stdDeviation="0.5" />
+      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
+    </filter>
+  </defs>
+  <g fill="#2da9e3" filter="url(#caretFilter)">
+  -->
+  <g fill="#2da9e3">
+    <path d="M15.174,1.374c0.042,0.106,0.091,0.208,0.138,0.312C15.288,1.57,15.239,1.466,15.174,1.374z"/>
+    <path d="M13.735,1.534c0.002-0.003,0.004-0.009,0.006-0.013C13.739,1.525,13.737,1.531,13.735,1.534z"/>
+    <path d="M18.945,5.978c-1.596-1.038-2.861-2.532-3.634-4.292c-0.047-0.104-0.096-0.206-0.138-0.312
+             c-0.15-0.212-0.396-0.349-0.674-0.349c-0.34,0-0.631,0.204-0.759,0.497c-0.002,0.004-0.004,0.009-0.006,0.013
+             c-0.789,1.883-2.149,3.467-3.864,4.538c-3.068,1.651-5.155,4.892-5.155,8.62c0,5.404,4.379,9.784,9.783,9.784
+             c5.403,0,9.783-4.38,9.783-9.784C24.283,10.891,22.113,7.598,18.945,5.978z"/>
+  </g>
+</svg>
new file mode 100644
--- /dev/null
+++ b/editor/composer/res/caret_right.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     width="29px" height="31px" viewBox="0 0 29 31" style="enable-background:new 0 0 29 31;" xml:space="preserve">
+  <!-- TODO: Enable shadow after bug 1015575 is resolved.
+  <defs>
+    <filter id="caretFilter">
+      <feOffset result="offsetOut" in="SourceAlpha" dx="1" dy="1" />
+      <feGaussianBlur result="blurOut" in="offsetOut" stdDeviation="0.5" />
+      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
+    </filter>
+  </defs>
+  <g fill="#2da9e3" filter="url(#caretFilter)">
+  -->
+  <g fill="#2da9e3">
+    <path fill="#2da9e3" d="M27.296,2.674c-0.049,0.104-0.09,0.209-0.134,0.314C27.231,2.893,27.274,2.786,27.296,2.674z"/>
+    <path fill="#2da9e3" d="M26.197,1.734C26.2,1.733,26.205,1.73,26.21,1.729C26.205,1.73,26.2,1.733,26.197,1.734z"/>
+    <path fill="#2da9e3" d="M4.299,8.574C4.632,6.7,4.404,4.755,3.647,2.989c-0.044-0.105-0.085-0.21-0.134-0.314C3.461,2.42,3.529,2.146,3.718,1.944
+                            C3.95,1.696,4.299,1.623,4.6,1.729c0.005,0.001,0.01,0.003,0.013,0.004c1.915,0.71,4.001,0.798,5.954,0.277
+                            c3.301-1.113,7.094-0.423,9.815,2.123c3.947,3.691,4.156,9.882,0.465,13.828c-3.691,3.947-9.881,4.154-13.828,0.462
+                            C4.242,15.828,3.319,11.994,4.299,8.574z"/>
+  </g>
+</svg>
--- a/layout/style/ua.css
+++ b/layout/style/ua.css
@@ -48,26 +48,26 @@
   -moz-backface-visibility: inherit;
   clip: inherit;
 }
 
 *|*::-moz-table-row {
   display: table-row !important;
 }
 
-/* The ::-moz-table-column pseudo-element is for extra columns at the end 
+/* The ::-moz-table-column pseudo-element is for extra columns at the end
    of a table. */
 *|*::-moz-table-column {
   display: table-column !important;
 }
 
 *|*::-moz-table-column-group {
   display: table-column-group !important;
 }
- 
+
 *|*::-moz-table-row-group {
   display: table-row-group !important;
 }
 
 *|*::-moz-table-cell {
   display: table-cell !important;
   white-space: inherit;
 }
@@ -162,17 +162,17 @@
 
 *|*::-moz-viewport-scroll {
   overflow: auto;
 %ifdef XP_WIN
   resize: both;
 %endif
 }
 
-*|*::-moz-column-content { 
+*|*::-moz-column-content {
   /* the column boxes inside a column-flowed block */
   /* make unicode-bidi inherit, otherwise it has no effect on column boxes */
   unicode-bidi: inherit;
   text-overflow: inherit;
   /* inherit the outer frame's display, otherwise we turn into an inline */
   display: inherit !important;
   /* Carry through our parent's height so that %-height children get
   their heights set */
@@ -283,112 +283,36 @@ parsererror|sourcetext {
   font-family: -moz-fixed;
   margin-top: 2em;
   margin-bottom: 1em;
   color: red;
   font-weight: bold;
   font-size: 12pt;
 }
 
-div[\_moz_anonclass="mozTouchCaret"].moz-touchcaret {
-  background-image: url("resource://gre/res/text_selection_handle.png");
-  position: absolute;
-  width: 19px;
-  height: 24px;
-  margin-left: -10px;
-  background-position: center center;
-  z-index: 2147483647;
-}
-
+div[\_moz_anonclass="mozTouchCaret"].moz-touchcaret,
 div[\_moz_anonclass="mozTouchCaret"].moz-selectioncaret-left,
 div[\_moz_anonclass="mozTouchCaret"].moz-selectioncaret-right {
-  background-image: url("resource://gre/res/text_caret.png");
+  background-image: url("resource://gre/res/caret_middle.svg");
   position: absolute;
-  width: 21px;
-  height: 26px;
-  margin-left: -11px;
+  width: 29px;
+  height: 31px;
+  margin-left: -15px;
   background-position: center center;
   background-size: 100% 100%;
   z-index: 2147483647;
 }
 
 div[\_moz_anonclass="mozTouchCaret"].moz-selectioncaret-left.tilt {
-  background-image: url("resource://gre/res/text_caret_tilt_left.png");
-  margin-left: -22px;
-  width: 22px;
+  background-image: url("resource://gre/res/caret_left.svg");
+  margin-left: -29px;
 }
 
 div[\_moz_anonclass="mozTouchCaret"].moz-selectioncaret-right.tilt {
-  background-image: url("resource://gre/res/text_caret_tilt_right.png");
+  background-image: url("resource://gre/res/caret_right.svg");
   margin-left: 0px;
-  width: 22px;
-}
-
-@media (min-resolution: 1.5dppx) {
-  div[\_moz_anonclass="mozTouchCaret"].moz-touchcaret {
-    background-image: url("resource://gre/res/text_selection_handle@1.5.png");
-    position: absolute;
-    width: 29px;
-    height: 36px;
-    margin-left: -15px;
-    background-position: center center;
-    z-index: 2147483647;
-  }
-
-  div[\_moz_anonclass="mozTouchCaret"].moz-selectioncaret-left,
-  div[\_moz_anonclass="mozTouchCaret"].moz-selectioncaret-right {
-    background-image: url("resource://gre/res/text_caret@1.5x.png");
-  }
-
-  div[\_moz_anonclass="mozTouchCaret"].moz-selectioncaret-left.tilt {
-    background-image: url("resource://gre/res/text_caret_tilt_left@1.5x.png");
-  }
-
-  div[\_moz_anonclass="mozTouchCaret"].moz-selectioncaret-right.tilt {
-    background-image: url("resource://gre/res/text_caret_tilt_right@1.5x.png");
-  }
-}
-
-@media (min-resolution: 2dppx) {
-  div[\_moz_anonclass="mozTouchCaret"].moz-touchcaret {
-    background-image: url("resource://gre/res/text_selection_handle@2.png");
-    position: absolute;
-    width: 38px;
-    height: 48px;
-    margin-left: -19px;
-    background-position: center center;
-    z-index: 2147483647;
-  }
-
-  div[\_moz_anonclass="mozTouchCaret"].moz-selectioncaret-left,
-  div[\_moz_anonclass="mozTouchCaret"].moz-selectioncaret-right {
-    background-image: url("resource://gre/res/text_caret@2x.png");
-  }
-
-  div[\_moz_anonclass="mozTouchCaret"].moz-selectioncaret-left.tilt {
-    background-image: url("resource://gre/res/text_caret_tilt_left@2x.png");
-  }
-
-  div[\_moz_anonclass="mozTouchCaret"].moz-selectioncaret-right.tilt {
-    background-image: url("resource://gre/res/text_caret_tilt_right@2x.png");
-  }
-}
-
-@media (min-resolution: 2.25dppx) {
-  div[\_moz_anonclass="mozTouchCaret"].moz-selectioncaret-left
-  div[\_moz_anonclass="mozTouchCaret"].moz-selectioncaret-right {
-    background-image: url("resource://gre/res/text_caret@2.25x.png");
-  }
-
-  div[\_moz_anonclass="mozTouchCaret"].moz-selectioncaret-left.tilt {
-    background-image: url("resource://gre/res/text_caret_tilt_left@2.25x.png");
-  }
-
-  div[\_moz_anonclass="mozTouchCaret"].moz-selectioncaret-right.tilt {
-    background-image: url("resource://gre/res/text_caret_tilt_right@2.25x.png");
-  }
 }
 
 div[\_moz_anonclass="mozTouchCaret"].moz-touchcaret.hidden,
 div[\_moz_anonclass="mozTouchCaret"].moz-selectioncaret-left.hidden,
 div[\_moz_anonclass="mozTouchCaret"].moz-selectioncaret-right.hidden {
   visibility: hidden;
 }