Adds animated touch point and the hint box for touch calibration UX

 - Adds the circular throbbing touch point view that the user interacts
   with during touch calibration.
 - Adds the hint box view that contains the hint message as given in the
   UX specs.
   (https://drive.google.com/file/d/0B_2Uyb2Rhx2OU0FIbXUyMkhMZlE/view)
 - Adds required resource strings for hint box messages.

Working protottpe(The video is the entire prototype. This change only
involves adding the touch point and hint box.):
https://drive.google.com/a/google.com/file/d/0B_WkX8bSkoT1QVR0WFJYdUY2SmZTdWdUVFNSM0F5WDF4YlBn/view

Screenshot of how it looks on different DPI screens:
https://screenshot.googleplex.com/ND5d9v0799y.png

Screenshot for RTL:
https://screenshot.googleplex.com/Xd3PyAYbDTV.png

BUG=634166
COMPONENT=Touch Calibration, ChromeOS, UI Strings

Review-Url: https://codereview.chromium.org/2600213002
Cr-Commit-Position: refs/heads/master@{#443000}

chrome/browser/chromeos/display/touch_calibrator/touch_calibrator_view.h

@@ -22,6 +22,8 @@ class LinearAnimation;
 
 namespace chromeos {
 
+class CircularThrobberView;
+
 // An overlay view used during touch calibration. This view is responsible for
 // all animations and UX during touch calibration on all displays currently
 // active on the device. The view on the display being calibrated is the primary
@@ -112,6 +114,18 @@ class TouchCalibratorView : public views::View, public gfx::AnimationDelegate {
   // and view translation.
   std::unique_ptr<gfx::LinearAnimation> animator_;
 
+  // View responsible for displaying the animated circular icon that the user
+  // touches to calibrate the screen.
+  CircularThrobberView* throbber_circle_;
+
+  // A hint box displayed next to the first touch point to assist user with
+  // information about the next step.
+  views::View* hint_box_view_;
+
+  // View that contains the animated throbber circle and a text label informing
+  // the user to tap the circle to continue calibration.
+  views::View* touch_point_view_;
+
   State state_ = UNKNOWN;
 
   DISALLOW_COPY_AND_ASSIGN(TouchCalibratorView);

ui/strings/ui_strings.grd

@@ -661,6 +661,12 @@ need to be translated for each locale.-->
       <message name="IDS_DISPLAY_TOUCH_CALIBRATION_EXIT_LABEL" desc="A message to notify the user about using the escape key to exit the calibration mode.">
         To exit calibration press Esc.
       </message>
+      <message name="IDS_DISPLAY_TOUCH_CALIBRATION_HINT_LABEL_TEXT" desc="Title of the hint message to inform the user what the next step is in touch calibration is">
+        Define your touchscreen
+      </message>
+      <message name="IDS_DISPLAY_TOUCH_CALIBRATION_HINT_SUBLABEL_TEXT" desc="Message to inform the user what the next step is in touch calibration is">
+        Tap the touch targets on your screen.
+      </message>
       
       <!-- Display names -->
       <message name="IDS_DISPLAY_NAME_UNKNOWN" desc="The name used for a display whose name is unknown, which is shown in the display settings and ash tray.">