MD Settings: Display > Overscan: Update text and fix focus

While updating the text I discovered that changing the focus (e.g. by calling blur() on the focused button, or simply clicking or tabbing away from the dialog) would cause the keyboard event to not get triggered. This change was introduced in https://codereview.chromium.org/2180823004.

The simple fix is to call window.addEventListener instead of this.addEventListener.

BUG=660597
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

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

chrome/app/settings_strings.grdp

@@ -2658,14 +2658,17 @@
     <message name="IDS_SETTINGS_DISPLAY_OVERSCAN_TEXT" desc="Text explaining that this setting is used to adjust the boundaries of the selected display.">
       Adjust the boundaries of your desktop within the display
     </message>
-    <message name="IDS_SETTINGS_DISPLAY_OVERSCAN_TITLE" desc="Name of the settings subpage which adjusts display overscan.">
+    <message name="IDS_SETTINGS_DISPLAY_OVERSCAN_TITLE" desc="Title of the settings subpage which adjusts display overscan.">
       Overscan
     </message>
-    <message name="IDS_SETTINGS_DISPLAY_OVERSCAN_INSTRUCTIONS" desc="Instructions for changing the overscan calibration.">
-      Use arrow keys to adjust picture size and alignment.
+    <message name="IDS_SETTINGS_DISPLAY_OVERSCAN_SUBTITLE" desc="Subtitle for the display overscan settings subpage.">
+      Adjust the boundaries of your display.
+    </message>
+    <message name="IDS_SETTINGS_DISPLAY_OVERSCAN_INSTRUCTIONS" desc="Instructions for changing the display overscan calibration.">
+      Tap the following keys to adjust or move the cropping area.
     </message>
     <message name="IDS_SETTINGS_DISPLAY_OVERSCAN_RESIZE" desc="Label for resizing overscan calibration.">
-      Shrink/expand
+      Shrink / Expand
     </message>
     <message name="IDS_SETTINGS_DISPLAY_OVERSCAN_POSITION" desc="Label for positioning overscan calibration.">
       Move
@@ -2673,9 +2676,6 @@
     <message name="IDS_SETTINGS_DISPLAY_OVERSCAN_RESET" desc="Label for resetting overscan calibration.">
       Reset
     </message>
-    <message name="IDS_SETTINGS_DISPLAY_OVERSCAN_SAVE" desc="Label for saving overscan calibration.">
-      Save
-    </message>
     <message name="IDS_SETTINGS_DISPLAY_MIRRORING_ON" desc="Label indicating that the displays are currently mirrored">
       On
     </message>

chrome/browser/resources/settings/device_page/display_overscan_dialog.html

@@ -10,21 +10,30 @@
 <dom-module id="settings-display-overscan-dialog">
   <template>
     <style include="settings-shared">
-     .label {
-       margin: 10px 0;
+     .subtitle {
+       margin-top: 10px;
      }
+
+     .instructions {
+       color: var(--paper-grey-600);
+       margin-top: 4px;
+     }
+
      .details {
        margin: 40px;
      }
+
      iron-icon {
        --iron-icon-fill-color: white;
        background: black;
-       margin: 2px;
+       margin: 5px;
      }
+
      #move > div {
        color: grey;
        font-size: 150%;
      }
+
      #move > div.shift {
        background: black;
        color: white;
@@ -36,7 +45,8 @@
     <dialog is="cr-dialog" id="dialog" on-close="close">
       <div class="title">$i18n{displayOverscanPageTitle}</div>
       <div class="body">
-        <div class="label self-start" >$i18n{displayOverscanInstructions}</div>
+        <div class="subtitle" >$i18n{displayOverscanSubtitle}</div>
+        <div class="instructions" >$i18n{displayOverscanInstructions}</div>
         <div class="details layout horizontal around-justified self-stretch">
           <div class="layout vertical center">
             <div class="layout horizontal">
@@ -62,11 +72,11 @@
         </div>
       </div>
       <div class="button-container">
-        <paper-button class="secondary-button" on-tap="onResetTap_">
+        <paper-button id="reset" class="secondary-button" on-tap="onResetTap_">
           $i18n{displayOverscanReset}
         </paper-button>
-        <paper-button class="primary-button"  on-tap="onSaveTap_">
-          $i18n{displayOverscanSave}
+        <paper-button class="primary-button" on-tap="onSaveTap_">
+          $i18n{ok}
         </paper-button>
       </div>
     </dialog>

chrome/browser/resources/settings/device_page/display_overscan_dialog.js

@@ -32,13 +32,17 @@ Polymer({
 
   open: function() {
     this.keyHandler_ = this.handleKeyEvent_.bind(this);
-    this.addEventListener('keydown', this.keyHandler_);
+    // We need to attach the event listener to |window|, not |this| so that
+    // changing focus does not prevent key events from occuring.
+    window.addEventListener('keydown', this.keyHandler_);
     this.comitted_ = false;
     this.$.dialog.showModal();
+    // Don't focus 'reset' by default. 'Tab' will focus 'OK'.
+    this.$$('#reset').blur();
   },
 
   close: function() {
-    this.removeEventListener('keydown', this.keyHandler_);
+    window.removeEventListener('keydown', this.keyHandler_);
 
     this.displayId = '';  // Will trigger displayIdChanged_.
 

chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc

@@ -602,12 +602,12 @@ void AddDeviceStrings(content::WebUIDataSource* html_source) {
       {"displayOrientationStandard", IDS_SETTINGS_DISPLAY_ORIENTATION_STANDARD},
       {"displayOverscanPageText", IDS_SETTINGS_DISPLAY_OVERSCAN_TEXT},
       {"displayOverscanPageTitle", IDS_SETTINGS_DISPLAY_OVERSCAN_TITLE},
+      {"displayOverscanSubtitle", IDS_SETTINGS_DISPLAY_OVERSCAN_SUBTITLE},
       {"displayOverscanInstructions",
        IDS_SETTINGS_DISPLAY_OVERSCAN_INSTRUCTIONS},
       {"displayOverscanResize", IDS_SETTINGS_DISPLAY_OVERSCAN_RESIZE},
       {"displayOverscanPosition", IDS_SETTINGS_DISPLAY_OVERSCAN_POSITION},
       {"displayOverscanReset", IDS_SETTINGS_DISPLAY_OVERSCAN_RESET},
-      {"displayOverscanSave", IDS_SETTINGS_DISPLAY_OVERSCAN_SAVE},
   };
   AddLocalizedStringsBulk(html_source, display_strings,
                           arraysize(display_strings));