MD Settings: Adding reset page Material UI dialog.

chrome/browser/resources/settings/reset_page/reset_page.css

Index: chrome/browser/resources/settings/reset_page/reset_page.css
diff --git a/chrome/browser/resources/settings/reset_page/reset_page.css b/chrome/browser/resources/settings/reset_page/reset_page.css
new file mode 100644
index 0000000000000000000000000000000000000000..7dc488faf38006928b08dea2a17f2fdbf3767124
--- /dev/null
+++ b/chrome/browser/resources/settings/reset_page/reset_page.css
@@ -0,0 +1,41 @@
+/* Copyright 2015 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. */
+
+#resetDialog {
+  max-width: 500px;
+  min-width: 300px;

[Dan Beam, 2015/10/29 00:46:10]

i think internet settings also shows dialogs.  can we share some styles?

[dpapad, 2015/10/29 01:33:09]

I 'll look into this tomorrow. Even if sharing CSS styles is possible, maybe
better to do it
on a separate CL though to keep this CL focused on adding the new dialog.

+}
+
+#resetButton {
+  background-color: rgb(120, 120, 120);
+  color: white;
+  margin-left: 10px;

[Dan Beam, 2015/10/29 00:46:10]

RTL

[dpapad, 2015/10/29 01:33:09]

Are you suggesting using -webkit-margin-start instead? I had the impression
(don't remember how though), that these
are obsolete and left/right is properly reversed for RTL without the use of
-webkit-foo-{start|end}. Is that not so?

[Dan Beam, 2015/10/29 02:20:25]

yes
not so

margin-left: http://fiddle.jshell.net/8nn6t5sp/1/
-webkit-margin-start: http://fiddle.jshell.net/8nn6t5sp/2/

[dpapad, 2015/10/29 17:59:19]

Done.

+}
+
+a,
+#cancelButton {
+  color: rgb(94, 94, 94);
+}
+
+
+#explanation {
+  margin: 10px 0;
+}
+
+#buttonContainer {
+  margin-bottom: 15px;
+}
+
+a {
+  margin: auto;
+  text-decoration: none;
+  text-transform: uppercase;

[Dan Beam, 2015/10/29 00:46:10]

should we be using paper-button instead then?

[dpapad, 2015/10/29 01:33:09]

I tried this, but makes things more complicated. If I don't wrap the
paper-button with an extra div, then I
end up with a very long button that opens a new window even when user clicks
very far from the "Learn more" text.
--------------------------------------- ------
Learn more                  | Cancel  | Reset|
----------------------------------------------

The link does not have this issue (and does not require an extra div wrapper).
BTW we are already using both methods, at
https://code.google.com/p/chromium/codesearch#chromium/src/chrome/browser/res...
and
https://code.google.com/p/chromium/codesearch#chromium/src/chrome/browser/res....
So I prefer to keep it as is.

[Dan Beam, 2015/10/29 02:20:25]

an <a> tag with text-transform uppercase is very very different than a
<paper-button>.  what about the ripple?  what about focus behavior?  keyboard
shortcuts?  we should act the same way if we're gonna attempt to look the same.

here's what I think you should do: http://jsfiddle.net/o0r0azk9/

[dpapad, 2015/10/29 17:59:19]

Done.

+  width: 100%;
+}
+
+#sendSettings {
+  background-color: rgb(236, 236, 236);
+  margin: 0;
+  padding: 20px;
+}