[DevicePage] Turn "Swap primary mouse button" into a dropdown

Turns the swap mouse button toggle into a dropdown with Left button and
Right button as options, as per the bug.

String screenshots:
https://storage.cloud.google.com/chromium-translation-screenshots/0de32bdc0a9e5c95680629877c323c11d242cf03
https://storage.cloud.google.com/chromium-translation-screenshots/037c4cf7a5c655f6e15a4ca3c906230359440d50

Fixed: 1132518
Change-Id: I55836c82115a2fc1473d4863b2f96ed9b94f4a05
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2436750
Commit-Queue: Daniel Classon <dclasson@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#813034}

chrome/app/os_settings_strings.grdp

@@ -1637,6 +1637,12 @@
   <message name="IDS_SETTINGS_MOUSE_SWAP_BUTTONS_LABEL" desc="In Device Settings, the text next to the checkbox to set the primary mouse button to the right button instead of the left button.">
     Swap primary mouse button
   </message>
+  <message name="IDS_SETTINGS_PRIMARY_MOUSE_BUTTON_LEFT_LABEL" desc="In Device Settings, the text labelling the dropdown menu item for the left mouse button.">
+    Left button
+  </message>
+  <message name="IDS_SETTINGS_PRIMARY_MOUSE_BUTTON_RIGHT_LABEL" desc="In Device Settings, the text labelling the dropdown menu item for the right mouse button.">
+    Right button
+  </message>
   <message name="IDS_SETTINGS_MOUSE_REVERSE_SCROLL_LABEL" desc="In Device Settings, the text next to the checkbox to set reverse scrolling.">
     Enable reverse scrolling. <ph name="LINK_BEGIN">&lt;a&gt;</ph>Learn more<ph name="LINK_END">&lt;/a&gt;</ph>
   </message>

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_PRIMARY_MOUSE_BUTTON_LEFT_LABEL.png.sha1

+0de32bdc0a9e5c95680629877c323c11d242cf03
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_PRIMARY_MOUSE_BUTTON_RIGHT_LABEL.png.sha1

+037c4cf7a5c655f6e15a4ca3c906230359440d50
\ No newline at end of file

chrome/browser/resources/settings/chromeos/device_page/pointers.html

@@ -5,6 +5,7 @@
 <link rel="import" href="../deep_linking_behavior.html">
 <link rel="import" href="../localized_link/localized_link.html">
 <link rel="import" href="../../controls/settings_radio_group.html">
+<link rel="import" href="../../controls/settings_dropdown_menu.html">
 <link rel="import" href="../../controls/settings_slider.html">
 <link rel="import" href="../../controls/settings_toggle_button.html">
 <link rel="import" href="../../prefs/prefs_behavior.html">
@@ -40,14 +41,16 @@
       <div class$="[[getSubsectionClass_(showMouseSection_, hasTouchpad)]]">
         <!-- Do not change the mouse button pref before the mouse is released.
              See crbug.com/686949 -->
-        <settings-toggle-button id="mouseSwapButton"
-            pref="{{prefs.settings.mouse.primary_right}}"
-            label="$i18n{mouseSwapButtons}"
-            on-settings-boolean-control-change="onMouseSwapButtonsChange_"
-            on-down="onMouseSwapButtonsDown_" on-up="onMouseSwapButtonsUp_"
-            deep-link-focus-id$="[[Setting.kMouseSwapPrimaryButtons]]"
-            no-set-pref>
-        </settings-toggle-button>
+        <div class="settings-box">
+          <div class="start settings-box-text" id="mouseSwapButtonLabel">
+            $i18n{mouseSwapButtons}
+          </div>
+          <settings-dropdown-menu aria-labeledby="mouseSwapButtonLabel"
+              pref="{{prefs.settings.mouse.primary_right}}"
+              menu-options="[[swapPrimaryOptions]]"
+              deep-link-focus-id$="[[Setting.kMouseSwapPrimaryButtons]]">
+          </settings-dropdown-menu>
+        </div>
         <template is="dom-if" if="[[allowDisableAcceleration_]]">
           <settings-toggle-button id="mouseAcceleration"
               class="hr"

chrome/browser/resources/settings/chromeos/device_page/pointers.js

@@ -27,6 +27,23 @@ Polymer({
 
     hasTouchpad: Boolean,
 
+    swapPrimaryOptions: {
+      readOnly: true,
+      type: Array,
+      value() {
+        return [
+          {
+            value: false,
+            name: loadTimeData.getString('primaryMouseButtonLeft')
+          },
+          {
+            value: true,
+            name: loadTimeData.getString('primaryMouseButtonRight')
+          },
+        ];
+      },
+    },
+
     /**
      * Interim property for use until we have a separate subsection for pointing
      * sticks. (See crbug.com/1114828)
@@ -101,10 +118,6 @@ Polymer({
     return hasMouse || hasPointingStick;
   },
 
-  // Used to correctly identify when the mouse button has been released.
-  // crbug.com/686949.
-  receivedMouseSwapButtonsDown_: false,
-
   /**
    * @param {!settings.Route} route
    * @param {settings.Route} oldRoute
@@ -129,26 +142,6 @@ Polymer({
     return showMouseSection && hasTouchpad ? 'subsection' : '';
   },
 
-  /** @private */
-  onMouseSwapButtonsDown_() {
-    this.receivedMouseSwapButtonsDown_ = true;
-  },
-
-  /** @private */
-  onMouseSwapButtonsUp_() {
-    this.receivedMouseSwapButtonsDown_ = false;
-    /** @type {!SettingsToggleButtonElement} */ (this.$.mouseSwapButton)
-        .sendPrefChange();
-  },
-
-  /** @private */
-  onMouseSwapButtonsChange_() {
-    if (!this.receivedMouseSwapButtonsDown_) {
-      /** @type {!SettingsToggleButtonElement} */ (this.$.mouseSwapButton)
-          .sendPrefChange();
-    }
-  },
-
   /**
    * @param {!Event} event
    * @private

chrome/browser/ui/webui/settings/chromeos/device_section.cc

@@ -1118,6 +1118,9 @@ void DeviceSection::AddDevicePointersStrings(
       {"mouseScrollSpeed", IDS_SETTINGS_MOUSE_SCROLL_SPEED_LABEL},
       {"mouseSpeed", IDS_SETTINGS_MOUSE_SPEED_LABEL},
       {"mouseSwapButtons", IDS_SETTINGS_MOUSE_SWAP_BUTTONS_LABEL},
+      {"primaryMouseButtonLeft", IDS_SETTINGS_PRIMARY_MOUSE_BUTTON_LEFT_LABEL},
+      {"primaryMouseButtonRight",
+       IDS_SETTINGS_PRIMARY_MOUSE_BUTTON_RIGHT_LABEL},
       {"mouseReverseScroll", IDS_SETTINGS_MOUSE_REVERSE_SCROLL_LABEL},
       {"mouseAccelerationLabel", IDS_SETTINGS_MOUSE_ACCELERATION_LABEL},
       {"mouseScrollAccelerationLabel",

chrome/test/data/webui/settings/chromeos/device_page_tests.js

@@ -667,8 +667,6 @@ cr.define('device_page_tests', function() {
       test('mouse', function() {
         expectLT(0, pointersPage.$$('#mouse').offsetHeight);
 
-        expectFalse(pointersPage.$$('#mouse settings-toggle-button').checked);
-
         const slider = assert(pointersPage.$$('#mouse settings-slider'));
         expectEquals(4, slider.pref.value);
         MockInteractions.pressAndReleaseKeyOn(