MD Settings: create a global "action button" style (blue, flat)

MD Settings: create a global "action button" style (blue, flat)

This is very similar to "action-button" style in the dialogs CSS, but
is shared globally to be used from top-level sections/pages as well.

I considered using [raised] (as this is basically what we're borrowing
from in Material Design terms), but it didn't make much sense as the
button is styled as flat (bettes didn't like the shadow).

R=dpapad@chromium.org
BUG=589630
Committed: https://crrev.com/eae390680af54972d954b9c4bcd724ec1a701d6c
Cr-Commit-Position: refs/heads/master@{#378566}

[Dan Beam, 2016-03-01 02:00:02]

Patchset #2 (id:20001) has been deleted

[Dan Beam, 2016-03-01 02:05:09]

Description was changed from

==========
MD Settings: create a global "call to action" button style (blue, flat)

This is very similar to "action-button" style in the dialogs CSS, but
is shared globally to be used from top-level sections/pages as well.

R=dpapad@chromium.org
BUG=589630
==========

to

==========
MD Settings: create a global "call to action" button style (blue, flat)

This is very similar to "action-button" style in the dialogs CSS, but
is shared globally to be used from top-level sections/pages as well.

I considered using [raised] (as this is basically what we're borrowing
from in Material Design terms), but it didn't make much sense as the
button is styled as flat (bettes didn't like the shadow).

R=dpapad@chromium.org
BUG=589630
==========

[Dan Beam, 2016-03-01 02:05:18]

https://codereview.chromium.org/1754473002/diff/1/chrome/browser/resources/se...
File chrome/browser/resources/settings/on_startup_page/startup_urls_page.html
(right):

https://codereview.chromium.org/1754473002/diff/1/chrome/browser/resources/se...
chrome/browser/resources/settings/on_startup_page/startup_urls_page.html:50: is
empty. -->
https://codereview.chromium.org/1752633002/

https://codereview.chromium.org/1754473002/diff/1/chrome/browser/resources/se...
File chrome/browser/resources/settings/people_page/people_page.html (right):

https://codereview.chromium.org/1754473002/diff/1/chrome/browser/resources/se...
chrome/browser/resources/settings/people_page/people_page.html:53: <paper-button
class="secondary-button" on-tap="onDisconnectTap_"
before you ask: yes, secondary-button and secondary-action probably need to both
exist for now

[Dan Beam, 2016-03-01 02:07:28]

screenshots: http://imgur.com/a/Ag7SK

[dpapad, 2016-03-01 02:18:03]

https://codereview.chromium.org/1754473002/diff/1/chrome/browser/resources/se...
File
chrome/browser/resources/settings/search_engines_page/search_engine_dialog.html
(right):

https://codereview.chromium.org/1754473002/diff/1/chrome/browser/resources/se...
chrome/browser/resources/settings/search_engines_page/search_engine_dialog.html:15:
<style include="settings-shared"></style>
Are you planning to split settings-shared more in the future (like
settings-buttons)? As of this change, this dialog includes 95% of unused rules
from settings-shared, to use the remaining 5%. Not sure if this is notice-able
performance-wise but it seems wasteful at first glance.

https://codereview.chromium.org/1754473002/diff/1/chrome/browser/resources/se...
File chrome/browser/resources/settings/settings_shared_css.html (right):

https://codereview.chromium.org/1754473002/diff/1/chrome/browser/resources/se...
chrome/browser/resources/settings/settings_shared_css.html:43:
paper-button.call-to-action {
Can we keep the "action-button" name? Seems much more intuitive than the
proposed naming
1) makes it clear that it refers to a button.
2) Sounds like a CSS class name (unlike new naming which without context I would
have never guessed it is a CSS class name)

[Dan Beam, 2016-03-01 17:44:04]

https://codereview.chromium.org/1754473002/diff/1/chrome/browser/resources/se...
File
chrome/browser/resources/settings/search_engines_page/search_engine_dialog.html
(right):

https://codereview.chromium.org/1754473002/diff/1/chrome/browser/resources/se...
chrome/browser/resources/settings/search_engines_page/search_engine_dialog.html:15:
<style include="settings-shared"></style>
On 2016/03/01 02:18:03, dpapad wrote:
> Are you planning to split settings-shared more in the future (like
> settings-buttons)? As of this change, this dialog includes 95% of unused rules
> from settings-shared, to use the remaining 5%. Not sure if this is notice-able
> performance-wise but it seems wasteful at first glance.

not until performance or maintainability fail to scale

https://codereview.chromium.org/1754473002/diff/1/chrome/browser/resources/se...
File chrome/browser/resources/settings/settings_shared_css.html (right):

https://codereview.chromium.org/1754473002/diff/1/chrome/browser/resources/se...
chrome/browser/resources/settings/settings_shared_css.html:43:
paper-button.call-to-action {
On 2016/03/01 02:18:03, dpapad wrote:
> Can we keep the "action-button" name? Seems much more intuitive than the
> proposed naming
> 1) makes it clear that it refers to a button.
> 2) Sounds like a CSS class name (unlike new naming which without context I
would
> have never guessed it is a CSS class name)

Done. (though for future reference, I don't agree with either of your points I
just don't care -- <button> is also a tag [which this is not], there was already
a "paper-button" in the selector so you know it only affects those things, and
there's no "sounds like a class name" unless you mean presentational -- which is
a bad idea. with these ideas combined we end up with bad class names like
.red-div which are brittle and too specific.  I also thought about .important or
.recommended [which is what Alan said these buttons are in some cases, like
"Sign in"], but it didn't always match)

[dpapad, 2016-03-01 17:56:11]

LGTM

https://codereview.chromium.org/1754473002/diff/1/chrome/browser/resources/se...
File chrome/browser/resources/settings/settings_shared_css.html (right):

https://codereview.chromium.org/1754473002/diff/1/chrome/browser/resources/se...
chrome/browser/resources/settings/settings_shared_css.html:43:
paper-button.call-to-action {
On 2016/03/01 at 17:44:04, Dan Beam wrote:
> On 2016/03/01 02:18:03, dpapad wrote:
> > Can we keep the "action-button" name? Seems much more intuitive than the
> > proposed naming
> > 1) makes it clear that it refers to a button.
> > 2) Sounds like a CSS class name (unlike new naming which without context I
would
> > have never guessed it is a CSS class name)
> 
> Done. (though for future reference, I don't agree with either of your points I
just don't care -- <button> is also a tag [which this is not], there was already
a "paper-button" in the selector so you know it only affects those things, and
there's no "sounds like a class name" unless you mean presentational -- which is
a bad idea. with these ideas combined we end up with bad class names like
.red-div which are brittle and too specific.  I also thought about .important or
.recommended [which is what Alan said these buttons are in some cases, like
"Sign in"], but it didn't always match)

For future reference, I think is better if we discuss about things we don't
agree about, instead of doing them and then adding a huge "I don't agree with
this." note. I have found myself doing the same in previous CLs, and I don't
think it is helping us in the long run.

Regarding the "-button" suffix, I am fine with just "action" as the CSS class
name, dropping the suffix completely. call-for-action sounded weird to me (and
still does), but because we never had the discussion (the one I am referring in
previous paragraph) I was never exposed to your thinking of choosing that name.

[Dan Beam, 2016-03-01 20:33:46]

The CQ bit was checked by dbeam@chromium.org

[commit-bot: I haz the power, 2016-03-01 20:34:24]

CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/1754473002/40001
View timeline at
 https://chromium-cq-status.appspot.com/patch-timeline/1754473002/40001

[Dan Beam, 2016-03-01 20:35:58]

Description was changed from

==========
MD Settings: create a global "call to action" button style (blue, flat)

This is very similar to "action-button" style in the dialogs CSS, but
is shared globally to be used from top-level sections/pages as well.

I considered using [raised] (as this is basically what we're borrowing
from in Material Design terms), but it didn't make much sense as the
button is styled as flat (bettes didn't like the shadow).

R=dpapad@chromium.org
BUG=589630
==========

to

==========
MD Settings: create a global "action button" style (blue, flat)

This is very similar to "action-button" style in the dialogs CSS, but
is shared globally to be used from top-level sections/pages as well.

I considered using [raised] (as this is basically what we're borrowing
from in Material Design terms), but it didn't make much sense as the
button is styled as flat (bettes didn't like the shadow).

R=dpapad@chromium.org
BUG=589630
==========

[commit-bot: I haz the power, 2016-03-01 21:45:50]

Description was changed from

==========
MD Settings: create a global "action button" style (blue, flat)

This is very similar to "action-button" style in the dialogs CSS, but
is shared globally to be used from top-level sections/pages as well.

I considered using [raised] (as this is basically what we're borrowing
from in Material Design terms), but it didn't make much sense as the
button is styled as flat (bettes didn't like the shadow).

R=dpapad@chromium.org
BUG=589630
==========

to

==========
MD Settings: create a global "action button" style (blue, flat)

This is very similar to "action-button" style in the dialogs CSS, but
is shared globally to be used from top-level sections/pages as well.

I considered using [raised] (as this is basically what we're borrowing
from in Material Design terms), but it didn't make much sense as the
button is styled as flat (bettes didn't like the shadow).

R=dpapad@chromium.org
BUG=589630
==========

[commit-bot: I haz the power, 2016-03-01 21:45:51]

Committed patchset #2 (id:40001)

[commit-bot: I haz the power, 2016-03-01 21:47:37]

Description was changed from

==========
MD Settings: create a global "action button" style (blue, flat)

This is very similar to "action-button" style in the dialogs CSS, but
is shared globally to be used from top-level sections/pages as well.

I considered using [raised] (as this is basically what we're borrowing
from in Material Design terms), but it didn't make much sense as the
button is styled as flat (bettes didn't like the shadow).

R=dpapad@chromium.org
BUG=589630
==========

to

==========
MD Settings: create a global "action button" style (blue, flat)

This is very similar to "action-button" style in the dialogs CSS, but
is shared globally to be used from top-level sections/pages as well.

I considered using [raised] (as this is basically what we're borrowing
from in Material Design terms), but it didn't make much sense as the
button is styled as flat (bettes didn't like the shadow).

R=dpapad@chromium.org
BUG=589630

Committed: https://crrev.com/eae390680af54972d954b9c4bcd724ec1a701d6c
Cr-Commit-Position: refs/heads/master@{#378566}
==========

[commit-bot: I haz the power, 2016-03-01 21:47:38]

Patchset 2 (id:??) landed as
https://crrev.com/eae390680af54972d954b9c4bcd724ec1a701d6c
Cr-Commit-Position: refs/heads/master@{#378566}