MD Settings: make <paper-drawer-panel> flip in RTL

R=michaelpg@chromium.org
BUG=586579

Review URL: https://codereview.chromium.org/1700273003

Cr-Commit-Position: refs/heads/master@{#376071}

chrome/browser/resources/settings/compiled_resources2.gyp

@@ -10,5 +10,14 @@
         'reset_page/compiled_resources2.gyp:*',
       ],
     },
+    {
+      'target_name': 'direction_delegate',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
+      ],
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
   ],
 }

chrome/browser/resources/settings/direction_delegate.html

+<link rel="import" href="chrome://md-settings/i18n_setup.html">
+<link rel="import" href="chrome://resources/html/assert.html">
+<link rel="import" href="chrome://resources/html/cr.html">
+<script src="chrome://md-settings/direction_delegate.js"></script>

chrome/browser/resources/settings/direction_delegate.js

+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+cr.exportPath('settings');
+
+/** @interface */
+settings.DirectionDelegate = function() {};
+
+settings.DirectionDelegate.prototype = {
+  /**
+   * @return {boolean} Whether the direction of the settings UI is
+   *     right-to-left.
+   */
+  isRtl: assertNotReached,
+};
+
+/**
+ * @implements {settings.DirectionDelegate}
+ * @constructor
+ */
+settings.DirectionDelegateImpl = function() {};
+
+settings.DirectionDelegateImpl.prototype = {
+  /** @override */
+  isRtl: function() {
+    return loadTimeData.getString('textdirection') == 'rtl';
+  },
+};

chrome/browser/resources/settings/settings.html

@@ -7,6 +7,7 @@
   <link rel="import" href="chrome://resources/html/polymer_config.html">
   <link rel="import" href="chrome://md-settings/i18n_setup.html">
   <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+  <link rel="import" href="chrome://md-settings/direction_delegate.html">
   <link rel="import" href="chrome://md-settings/settings_ui/settings_ui.html">
   <link rel="import" href="chrome://md-settings/prefs/prefs.html">
 </head>
@@ -15,12 +16,12 @@
   <dom-module id="cr-settings">
     <template>
       <settings-prefs id="prefs" prefs="{{prefs_}}"></settings-prefs>
-      <settings-ui prefs="{{prefs_}}"></settings-ui>
+      <settings-ui id="ui" prefs="{{prefs_}}"></settings-ui>
     </template>
     <script src="settings.js"></script>
   </dom-module>
 
   <cr-settings></cr-settings>
-  <script src="chrome://resources/js/i18n_template.js"></script>
+  <link rel="import" href="chrome://resources/html/i18n_template.html">
 </body>
 </html>

chrome/browser/resources/settings/settings.js

@@ -13,4 +13,10 @@
  * @group Chrome Settings Elements
  * @element cr-settings
  */
-Polymer({is: 'cr-settings'});
+Polymer({
+  is: 'cr-settings',
+
+  ready: function() {
+    this.$.ui.directionDelegate = new settings.DirectionDelegateImpl;
+  },
+});

chrome/browser/resources/settings/settings_resources.grd

@@ -220,6 +220,12 @@
                    file="default_browser_page/default_browser_page.js"
                    type="chrome_html" />
       </if>
+      <structure name="IDR_SETTINGS_DIRECTION_DELEGATE_HTML"
+                 file="direction_delegate.html"
+                 type="chrome_html" />
+      <structure name="IDR_SETTINGS_DIRECTION_DELEGATE_JS"
+                 file="direction_delegate.js"
+                 type="chrome_html" />
       <structure name="IDR_SETTINGS_DOWNLOADS_PAGE_CSS"
                  file="downloads_page/downloads_page.css"
                  type="chrome_html" />

chrome/browser/resources/settings/settings_ui/compiled_resources2.gyp

+# Copyright 2016 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+{
+  'targets': [
+    {
+      'target_name': 'settings_ui',
+      'dependencies': ['../compiled_resources2.gyp:direction_delegate'],
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+  ],
+}

chrome/browser/resources/settings/settings_ui/settings_ui.html

+<link rel="import" href="chrome://resources/html/polymer_config.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-drawer-panel/paper-drawer-panel.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
@@ -5,6 +6,8 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/typography.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toolbar/paper-toolbar.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="chrome://md-settings/direction_delegate.html">
+<link rel="import" href="chrome://md-settings/i18n_setup.html">
 <link rel="import" href="chrome://md-settings/settings_main/settings_main.html">
 <link rel="import" href="chrome://md-settings/settings_menu/settings_menu.html">
 <link rel="import" href="chrome://md-settings/settings_page/settings_router.html">
@@ -22,7 +25,7 @@
           current-route-titles="[[currentRouteTitles]]">
       </settings-breadcrumb>
     </paper-toolbar>
-    <paper-drawer-panel drawer-width="256px">
+    <paper-drawer-panel drawer-width="256px" id="panel">
       <settings-menu drawer class="flex" current-route="{{currentRoute}}">
       </settings-menu>
       <settings-main main prefs="{{prefs}}" current-route="{{currentRoute}}">

chrome/browser/resources/settings/settings_ui/settings_ui.js

@@ -22,5 +22,16 @@ Polymer({
      * @type {?CrSettingsPrefsElement}
      */
     prefs: Object,
+
+    /** @type {?settings.DirectionDelegate} */
+    directionDelegate: {
+      observer: 'directionDelegateChanged_',
+      type: Object,
+    },
+  },
+
+  /** @private */
+  directionDelegateChanged_: function() {
+    this.$.panel.rightDrawer = this.directionDelegate.isRtl();
   },
 });

chrome/test/data/webui/settings/cr_settings_browsertest.js

@@ -24,9 +24,10 @@ CrSettingsBrowserTest.prototype = {
   /** @override */
   browsePreload: 'chrome://md-settings/prefs/prefs.html',
 
-  commandLineSwitches: [{switchName: 'enable-md-settings'}],
-
-  /** @override */
+  /**
+   * TODO(dbeam): these should not be required monolithically.
+   * @override
+   */
   extraLibraries: PolymerTest.getLibraries(ROOT_PATH).concat([
     '../fake_chrome_event.js',
     'fake_settings_private.js',
@@ -53,9 +54,8 @@ GEN('#else');
 GEN('#define MAYBE_CrSettingsTest CrSettingsTest');
 GEN('#endif');
 
-// Runs all tests.
+// TODO(dbeam): these should be split into multiple TEST_F()s.
 TEST_F('CrSettingsBrowserTest', 'MAYBE_CrSettingsTest', function() {
-  // Register mocha tests for each element.
   settings_checkbox.registerTests();
   settings_dropdown_menu.registerTests();
   settings_prefUtil.registerTests();
@@ -69,9 +69,32 @@ TEST_F('CrSettingsBrowserTest', 'MAYBE_CrSettingsTest', function() {
   mocha.run();
 });
 
-
 TEST_F('CrSettingsBrowserTest', 'ResetPage', function() {
   settings_reset_page.registerDialogTests();
   settings_reset_page.registerBannerTests();
   mocha.run();
 });
+
+/**
+ * @constructor
+ * @extends {CrSettingsBrowserTest}
+ */
+function CrSettingsRtlTest() {}
+
+CrSettingsRtlTest.prototype = {
+  __proto__: CrSettingsBrowserTest.prototype,
+
+  /** @override */
+  browsePreload: 'chrome://md-settings/settings_ui/settings_ui.html',
+
+  /** @override */
+  extraLibraries: CrSettingsBrowserTest.prototype.extraLibraries.concat([
+    'rtl_tests.js',
+  ]),
+};
+
+TEST_F('CrSettingsRtlTest', 'DrawerPanelFlips', function() {
+  settingsHidePagesByDefaultForTest = true;
+  settings_rtl_tests.registerDrawerPanelTests();
+  mocha.run();
+});

chrome/test/data/webui/settings/rtl_tests.js

+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+cr.define('settings_rtl_tests', function() {
+  /** @implements {settings.DirectionDelegate} */
+  function TestDirectionDelegate(isRtl) {
+    /** @override */
+    this.isRtl = function() { return isRtl; };
+  }
+
+  function registerDrawerPanelTests() {
+    suite('settings drawer panel RTL tests', function() {
+      test('test i18n processing flips drawer panel', function() {
+        var ui = document.createElement('settings-ui');
+        assertFalse(ui.$.panel.rightDrawer);
+
+        ui.directionDelegate = new TestDirectionDelegate(true /* isRtl */);
+        assertTrue(ui.$.panel.rightDrawer);
+
+        ui.directionDelegate = new TestDirectionDelegate(false /* isRtl */);
+        assertFalse(ui.$.panel.rightDrawer);
+      });
+    });
+  }
+
+  return {
+    registerDrawerPanelTests: registerDrawerPanelTests,
+  };
+});