MD Settings: Creating a <settings-dialog> element.

MD Settings: Creating a <settings-dialog> element.

The new element uses the Light DOM to get populated. Example
<my-new-dialog>
  <settings-dialog>
    <div class='title'>Title goes here</div>
    <div class='body'>Dialog body goes here</div>
    <div class='button-container'>buttons go here</div>
    <div class='footer'>footer content goes here</div>
  <settings-dialog>
</my-new-dialog>

Using the new dialog achieves code re-use for
 1) Positioning title, body and button-container and footer.
 2) Providing an 'x' close button at the top right.

BUG=591585
Committed: https://crrev.com/c671afb138abe2e0c7e2bc69df1fb9da9e224c89
Cr-Commit-Position: refs/heads/master@{#379369}

[dpapad, 2016-03-03 01:35:22]

Description was changed from

==========
WIP, Creating a <settings-dialog> element.

BUG=
==========

to

==========
Creating a <settings-dialog> element.

BUG=591585
==========

[dpapad, 2016-03-03 01:56:41]

Patchset #3 (id:40001) has been deleted

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

Description was changed from

==========
Creating a <settings-dialog> element.

BUG=591585
==========

to

==========
MD Settings: Creating a <settings-dialog> element.

The new element uses the Light DOM to get populated. Example
<my-new-dialog>
  <settings-dialog>
    <div class='title'>Title goes here</div>
    <div class='explanation'>Main dialog body</div>
    <div class='button-container'>buttons go here</div>
  <settings-dialog>
</my-new-dialog>

BUG=591585
==========

[dpapad, 2016-03-03 02:07:17]

Description was changed from

==========
MD Settings: Creating a <settings-dialog> element.

The new element uses the Light DOM to get populated. Example
<my-new-dialog>
  <settings-dialog>
    <div class='title'>Title goes here</div>
    <div class='explanation'>Main dialog body</div>
    <div class='button-container'>buttons go here</div>
  <settings-dialog>
</my-new-dialog>

BUG=591585
==========

to

==========
MD Settings: Creating a <settings-dialog> element.

The new element uses the Light DOM to get populated. Example
<my-new-dialog>
  <settings-dialog>
    <div class='title'>Title goes here</div>
    <div class='body'>Dialog body goes here</div>
    <div class='button-container'>buttons go here</div>
  <settings-dialog>
</my-new-dialog>

Using the new dialog achieves code re-use for
 1) Positioning title,body and button-container.
 2) Providing an 'x' close button at the top right.

BUG=591585
==========

[dpapad, 2016-03-03 02:13:36]

dpapad@chromium.org changed reviewers:
+ dschuyler@chromium.org

[dpapad, 2016-03-03 02:13:36]

This change is a refactoring of all dialogs that used settings_dialog_css.html,
there should be no visual difference.

It opens the way for easily styling remaining dialogs (the ones that did not use
settings_dialog_css.html, see internet_page, people_page, bluetooth_page) and
increasing code-reuse even further.

[michaelpg, 2016-03-03 02:28:04]

michaelpg@chromium.org changed reviewers:
+ michaelpg@chromium.org

[michaelpg, 2016-03-03 02:28:05]

https://codereview.chromium.org/1758973002/diff/80001/chrome/browser/resource...
File chrome/browser/resources/settings/reset_page/reset_profile_dialog.html
(right):

https://codereview.chromium.org/1758973002/diff/80001/chrome/browser/resource...
chrome/browser/resources/settings/reset_page/reset_profile_dialog.html:14:
<settings-dialog id="dialog">
so now our dialogs will wrap a <settings-dialog> wrapping a <paper-dialog>?

to avoid having a dialog dialog dialog, can we perhaps use PaperDialogBehavior
instead of the comparatively useless <paper-dialog> element?

[dpapad, 2016-03-03 19:25:47]

https://codereview.chromium.org/1758973002/diff/80001/chrome/browser/resource...
File chrome/browser/resources/settings/reset_page/reset_profile_dialog.html
(right):

https://codereview.chromium.org/1758973002/diff/80001/chrome/browser/resource...
chrome/browser/resources/settings/reset_page/reset_profile_dialog.html:14:
<settings-dialog id="dialog">
On 2016/03/03 at 02:28:04, michaelpg wrote:
> so now our dialogs will wrap a <settings-dialog> wrapping a <paper-dialog>?
> 
> to avoid having a dialog dialog dialog, can we perhaps use PaperDialogBehavior
instead of the comparatively useless <paper-dialog> element?

Done, removed usage of paper-dialog, using PaperDialogBehavior instead, thanks
for the suggestion.

[dpapad, 2016-03-04 01:50:49]

Description was changed from

==========
MD Settings: Creating a <settings-dialog> element.

The new element uses the Light DOM to get populated. Example
<my-new-dialog>
  <settings-dialog>
    <div class='title'>Title goes here</div>
    <div class='body'>Dialog body goes here</div>
    <div class='button-container'>buttons go here</div>
  <settings-dialog>
</my-new-dialog>

Using the new dialog achieves code re-use for
 1) Positioning title,body and button-container.
 2) Providing an 'x' close button at the top right.

BUG=591585
==========

to

==========
MD Settings: Creating a <settings-dialog> element.

The new element uses the Light DOM to get populated. Example
<my-new-dialog>
  <settings-dialog>
    <div class='title'>Title goes here</div>
    <div class='body'>Dialog body goes here</div>
    <div class='button-container'>buttons go here</div>
    <div class='footer'>footer content goes here</div>
  <settings-dialog>
</my-new-dialog>

Using the new dialog achieves code re-use for
 1) Positioning title,body and button-container.
 2) Providing an 'x' close button at the top right.

BUG=591585
==========

[dpapad, 2016-03-04 01:57:38]

Description was changed from

==========
MD Settings: Creating a <settings-dialog> element.

The new element uses the Light DOM to get populated. Example
<my-new-dialog>
  <settings-dialog>
    <div class='title'>Title goes here</div>
    <div class='body'>Dialog body goes here</div>
    <div class='button-container'>buttons go here</div>
    <div class='footer'>footer content goes here</div>
  <settings-dialog>
</my-new-dialog>

Using the new dialog achieves code re-use for
 1) Positioning title,body and button-container.
 2) Providing an 'x' close button at the top right.

BUG=591585
==========

to

==========
MD Settings: Creating a <settings-dialog> element.

The new element uses the Light DOM to get populated. Example
<my-new-dialog>
  <settings-dialog>
    <div class='title'>Title goes here</div>
    <div class='body'>Dialog body goes here</div>
    <div class='button-container'>buttons go here</div>
    <div class='footer'>footer content goes here</div>
  <settings-dialog>
</my-new-dialog>

Using the new dialog achieves code re-use for
 1) Positioning title, body and button-container and footer.
 2) Providing an 'x' close button at the top right.

BUG=591585
==========

[dschuyler, 2016-03-04 02:29:48]

This new dialog may already work with 
dialog-dismiss and dialog-confirm.  Please
give them a try and if they don't work, maybe
whether it would be worth supporting them.

https://codereview.chromium.org/1758973002/diff/140001/chrome/browser/resourc...
File chrome/browser/resources/settings/settings_dialog.html (right):

https://codereview.chromium.org/1758973002/diff/140001/chrome/browser/resourc...
chrome/browser/resources/settings/settings_dialog.html:12: <style
include="settings-dialog-css"></style>
If this is the only place that should use settings-dialog-css
let's pull that content here and remove that file.

[dpapad, 2016-03-04 02:45:58]

I just tried dialog-dismiss, dialog-confirm and they work as expected (as
documented).

Clicking on a dialog-dismiss button
 1) closes the dialog
 2) iron-overlay-closed is fired with {canceled: false, confirmed: false}
(no iron-overlay-canceled is fired)

Clicking on a dialog-confirm button
 1) closes the dialog
 2) iron-overlay-closed is fired with {canceled: false, confirmed: true}

I am not using those, in this CL, because I am interested in the
iron-overlay-canceled event, but they can be used by other users of
<settings-dialog> if needed.

https://codereview.chromium.org/1758973002/diff/140001/chrome/browser/resourc...
File chrome/browser/resources/settings/settings_dialog.html (right):

https://codereview.chromium.org/1758973002/diff/140001/chrome/browser/resourc...
chrome/browser/resources/settings/settings_dialog.html:12: <style
include="settings-dialog-css"></style>
On 2016/03/04 at 02:29:48, dschuyler wrote:
> If this is the only place that should use settings-dialog-css
> let's pull that content here and remove that file.

Done.

[dschuyler, 2016-03-04 19:25:58]

LGTM with a nit about an extra blank line.

https://codereview.chromium.org/1758973002/diff/180001/chrome/browser/resourc...
File chrome/browser/resources/settings/settings_dialog.html (right):

https://codereview.chromium.org/1758973002/diff/180001/chrome/browser/resourc...
chrome/browser/resources/settings/settings_dialog.html:62: 
There is an extra blank line here.

[dpapad, 2016-03-04 20:08:58]

https://codereview.chromium.org/1758973002/diff/180001/chrome/browser/resourc...
File chrome/browser/resources/settings/settings_dialog.html (right):

https://codereview.chromium.org/1758973002/diff/180001/chrome/browser/resourc...
chrome/browser/resources/settings/settings_dialog.html:62: 
On 2016/03/04 at 19:25:58, dschuyler wrote:
> There is an extra blank line here.

Done.

[dpapad, 2016-03-04 20:10:20]

The CQ bit was checked by dpapad@chromium.org

[dpapad, 2016-03-04 20:10:20]

The patchset sent to the CQ was uploaded after l-g-t-m from
dschuyler@chromium.org
Link to the patchset: https://codereview.chromium.org/1758973002/#ps200001
(title: "Remove extra blank line")

[commit-bot: I haz the power, 2016-03-04 20:10:37]

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

[commit-bot: I haz the power, 2016-03-04 21:50:59]

Committed patchset #10 (id:200001)

[commit-bot: I haz the power, 2016-03-04 21:52:20]

Description was changed from

==========
MD Settings: Creating a <settings-dialog> element.

The new element uses the Light DOM to get populated. Example
<my-new-dialog>
  <settings-dialog>
    <div class='title'>Title goes here</div>
    <div class='body'>Dialog body goes here</div>
    <div class='button-container'>buttons go here</div>
    <div class='footer'>footer content goes here</div>
  <settings-dialog>
</my-new-dialog>

Using the new dialog achieves code re-use for
 1) Positioning title, body and button-container and footer.
 2) Providing an 'x' close button at the top right.

BUG=591585
==========

to

==========
MD Settings: Creating a <settings-dialog> element.

The new element uses the Light DOM to get populated. Example
<my-new-dialog>
  <settings-dialog>
    <div class='title'>Title goes here</div>
    <div class='body'>Dialog body goes here</div>
    <div class='button-container'>buttons go here</div>
    <div class='footer'>footer content goes here</div>
  <settings-dialog>
</my-new-dialog>

Using the new dialog achieves code re-use for
 1) Positioning title, body and button-container and footer.
 2) Providing an 'x' close button at the top right.

BUG=591585

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

[commit-bot: I haz the power, 2016-03-04 21:52:21]

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