MD Settings: Adjusting reset-page dialogs styling.

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

Index: chrome/browser/resources/settings/reset_page/reset_page_dialog.css
diff --git a/chrome/browser/resources/settings/reset_page/reset_page_dialog.css b/chrome/browser/resources/settings/reset_page/reset_page_dialog.css
new file mode 100644
index 0000000000000000000000000000000000000000..1a32e5ff480d9664a0d240fde3f6a752425cf9fc
--- /dev/null
+++ b/chrome/browser/resources/settings/reset_page/reset_page_dialog.css
@@ -0,0 +1,53 @@
+/* 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. */
+
+#dialog-content {
+  -webkit-padding-end: 0;
+  -webkit-padding-start: 0;
+  margin-top: 0;
+}
+
+.dialog-title {

[dschuyler, 2015/12/02 01:02:01]

Would .settings-box work here?

[dpapad, 2015/12/02 03:07:49]

I thought about this but it seems that settings-box and dialog-title share very
little. Basically they only share the fact that there is a border (either top or
bottom), but everything else is different (margin/padding/min-height). Moreover,
having a settings-box class within a modal dialog seemed more confusing than
it's worth.

[Dan Beam, 2015/12/02 03:26:43]

agreed ^

we could compose out a "top-border" or "separator" class for the common
functionality, but I don't see a point.  if we really care, we could use a
--css-var for the color or border, but this may have performance issues.

+  border-bottom: 1px solid gainsboro;
+  font-size: 1.13em;
+  padding-bottom: 14px;
+  padding-top: 14px;
+}
+
+.dialog-body {
+  font-size: 1em;
+  margin: 20px 0;
+}
+
+.dialog-title,
+.dialog-body {
+  -webkit-padding-end: 24px;
+  -webkit-padding-start: 24px;

[Dan Beam, 2015/12/02 03:26:43]

FYI: I don't disagree with what you're doing, but padding-left/right work fine
when these are equal (i.e. directionality agnostic)

+}
+
+.action-button {
+  -webkit-margin-start: 10px;
+  background-color: rgb(66, 133, 244);
+  color: white;
+  font-weight: 500;
+}
+
+.cancel-button {

[dschuyler, 2015/12/02 01:02:01]

Let's change this to something like .highlight-button or .default-button and
move it into settings_page.css.  It would be cool to have this set across all MD
settings pages consistently.

[dpapad, 2015/12/02 03:07:49]

I am not opposed to this, but I believe it is better done as a CSS refactoring
when we have concrete examples of buttons across different UIs that we know
should be styled the same. Looked through the mocks and I do see some candidates
(People-Cros section has some "Done" buttons), but those sections have not been
implemented yet. Also when that time comes, we might want to have greater
granularity by having something like checkbox.css, button.css, dropdown.css,
instead of dumping things to settings_page.css.

[Dan Beam, 2015/12/02 03:26:43]

fine with per-component css files, also fine with deferring until meta-patterns
emerge (2+ users of code)

[dschuyler, 2015/12/02 21:45:22]

Nit: I feel that "cancel" is a bit over-specific -- even if it's kept in this
file.

[dpapad, 2015/12/02 22:21:59]

I am a bit confused by the suggested naming (highlight/default button). The
"cancel" button is not
highlighted or default in any way. I have named the highlighted button (the one
having blue background)
as "action-button" to make it generic, and it is the "reset" in the reset dialog
and "restart" in the
powerwash dialog.

The cancel-button class always refers to a button with text "Cancel" in both
dialogs where it is currently used.
Also the dialogs which will reuse this CSS file very soon are the ones at
https://folio.googleplex.com/chrome-ux-specs-and-sources/Chrome%20Inner%20Pag...,
which both have a "Cancel" button. Can you suggest a name that you think it
would be better? other-button?

[Dan Beam, 2015/12/02 23:12:09]

why not just action-button or default-button for the one that we want users to
click?  (note: some dialogs wont have a default)

also, I know webui hasn't been a great example to follow considering our tech
debt, but this particular argument could probably just be solved by following an
existing example:
https://code.google.com/p/chromium/codesearch#chromium/src/ui/webui/resources...
https://code.google.com/p/chromium/codesearch#chromium/src/ui/webui/resources...

+  color: rgb(66, 133, 244);
+  font-weight: 500;
+}
+
+paper-button {
+  margin: 0;
+}
+
+.explanation {
+  margin-bottom: 35px;
+}
+
+.action-buttons {
+  display: flex;
+  flex: 1;
+  justify-content: flex-end;
+}