CrOS Settings: Add skeleton page for multidevice section.

chrome/browser/resources/settings/multidevice_page/multidevice_page.html

Index: chrome/browser/resources/settings/multidevice_page/multidevice_page.html
diff --git a/chrome/browser/resources/settings/multidevice_page/multidevice_page.html b/chrome/browser/resources/settings/multidevice_page/multidevice_page.html
new file mode 100644
index 0000000000000000000000000000000000000000..591c9f6e4f310c3695c5f64f54647c351c0fb668
--- /dev/null
+++ b/chrome/browser/resources/settings/multidevice_page/multidevice_page.html
@@ -0,0 +1,35 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">

[dpapad, 2017/07/06 01:26:50]

Probably copy pasted from elsewhere? Let's remove dependencies that are not
currently being used in this file.

[Oren Blasberg, 2017/07/06 18:17:59]

Done.

+<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
+<link rel="import" href="../i18n_setup.html">
+<link rel="import" href="../icons.html">
+<link rel="import" href="../prefs/prefs.html">
+<link rel="import" href="../settings_page/settings_animated_pages.html">
+<link rel="import" href="../settings_page/settings_subpage.html">
+<link rel="import" href="../settings_shared_css.html">
+
+<dom-module id="settings-multidevice-page">
+  <template>
+    <style include="settings-shared">
+    </style>

[dpapad, 2017/07/06 01:26:50]

Nit: Can fit in previous line.

[Oren Blasberg, 2017/07/06 18:17:58]

Done.

+    <settings-animated-pages id="pages" section="multidevice">
+      <neon-animatable route-path="default">

[dpapad, 2017/07/06 01:26:50]

I am a bit torn on how to review this file. A lot of the HTML markup is
currently unused. Can we make this as minimal as possible to serve its current
purpose (being a dummy placeholder)?

Specifically, how about removing all IDs and CSS classes that are not used. They
can be added when this UI component gets more fleshed out.

[Oren Blasberg, 2017/07/06 18:17:59]

Sure. Can you point out which IDs and classes are ok to keep and which to
remove?
I've removed  id="enableSmsConnect" on the paper-toggle-button since no one is
referencing that. 
The rest of the css classes seem to be just styling it so the setting looks
visually consistent with Material. Is it OK to leave those?

+        <div id="multidevice" class="settings-box two-line">
+          <iron-icon icon="settings:sync"></iron-icon>
+          <div id="smsConnectToggleLabel" class="middle">
+            $i18n{smsConnect}
+          </div>
+          <div class="separator"></div>
+          <paper-toggle-button id="enableSmsConnect"

[dpapad, 2017/07/06 01:26:50]

Related to the comment above, this is unlikely to stay as is, as this file gets
more concrete.

For example, if you want a toggle button that automatically flips a pref, there
is already an element for that, called settings-toggle-button, see examples at
[1] below. Using that element instead, eliminates the need for the TODO you are
adding in multidevice_page.js, or to be more precise, the code that propagates
the pref change to the appropriate app would probably reside in C++ instead.

Not sure if that element throws errors if hooked up to a non-existing (for now)
pref though. If you want to keep this code as is, then I suggest to at least
update the TODO in the JS file to mention that a settings-toggle-button should
be used eventually. 

[1]
https://cs.chromium.org/search/?q=settings-toggle-button+file:%5Esrc/chrome/b...

[Oren Blasberg, 2017/07/06 18:17:59]

Yes exactly, I can't use settings-toggle-button until there is an actual pref
there. It throws errors without a pref= attribute specified.

Updated the TODO in the js accordingly.
Thanks :)

+              checked="{{smsConnectToggleState_}}"
+              aria-labelledby="smsConnectToggleLabel">
+          </paper-toggle-button>
+        </div>
+      </neon-animatable>
+    </settings-animated-pages>
+  </template>
+  <script src="multidevice_page.js"></script>
+</dom-module>