MD Settings: Fix paper/iron dropdown alignment

MD Settings: Fix paper/iron dropdown alignment

Default alignment for both paper-dropdown-menu and iron-dropdown
is top/left. The top align behavior is pretty much always undesirable,
especially on laptops with smaller screens.

BUG=624303
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Committed: https://crrev.com/5ee39ec3164fa909ef8209ad33e841cbc632c20d
Cr-Commit-Position: refs/heads/master@{#406332}

[stevenjb, 2016-07-18 19:25:38]

Description was changed from

==========
MD Settins: Fix paper/iron dropdown alignment

Default alignment for both paper-dropdown-menu and iron-dropdown
is top/left. The top align behavior is pretty much always undesirable,
especially on laptops with smaller screens.

BUG=624303
==========

to

==========
MD Settins: Fix paper/iron dropdown alignment

Default alignment for both paper-dropdown-menu and iron-dropdown
is top/left. The top align behavior is pretty much always undesirable,
especially on laptops with smaller screens.

BUG=624303
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

[stevenjb, 2016-07-18 19:27:06]

stevenjb@chromium.org changed reviewers:
+ dpapad@chromium.org, michaelpg@chromium.org

[stevenjb, 2016-07-18 19:27:20]

Description was changed from

==========
MD Settins: Fix paper/iron dropdown alignment

Default alignment for both paper-dropdown-menu and iron-dropdown
is top/left. The top align behavior is pretty much always undesirable,
especially on laptops with smaller screens.

BUG=624303
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

to

==========
MD Settings: Fix paper/iron dropdown alignment

Default alignment for both paper-dropdown-menu and iron-dropdown
is top/left. The top align behavior is pretty much always undesirable,
especially on laptops with smaller screens.

BUG=624303
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

[dpapad, 2016-07-18 19:42:51]

Can you post an example screenshot? Also could you briefly explain what does
"auto" do differently than "top". I thought that for the case of popup menus, we
want top/right alignment (for example the "dots" menu in
search_engine_entry.html).

https://codereview.chromium.org/2161743002/diff/1/chrome/browser/resources/se...
File
chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html
(right):

https://codereview.chromium.org/2161743002/diff/1/chrome/browser/resources/se...
chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html:41:
vertical-align="auto" horizontal-align="right">
Did you try this in RTL? Using "right" does not seem RTL friendly. Is there an
option to use "end" instead of "right"? Given that we already use "right" in
several existing menus, should probably addressed separately (if indeed is
causing an issue).

[stevenjb, 2016-07-18 20:43:46]

https://codereview.chromium.org/2161743002/diff/1/chrome/browser/resources/se...
File
chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html
(right):

https://codereview.chromium.org/2161743002/diff/1/chrome/browser/resources/se...
chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html:41:
vertical-align="auto" horizontal-align="right">
On 2016/07/18 19:42:51, dpapad wrote:
> Did you try this in RTL? Using "right" does not seem RTL friendly. Is there an
> option to use "end" instead of "right"? Given that we already use "right" in
> several existing menus, should probably addressed separately (if indeed is
> causing an issue).

Just tested with 'ar' and right/left get swapped. It does not recognize
start/end.

[Dan Beam, 2016-07-18 20:58:52]

https://codereview.chromium.org/2161743002/diff/1/chrome/browser/resources/se...
File
chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html
(right):

https://codereview.chromium.org/2161743002/diff/1/chrome/browser/resources/se...
chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html:41:
vertical-align="auto" horizontal-align="right">
On 2016/07/18 20:43:46, stevenjb wrote:
> On 2016/07/18 19:42:51, dpapad wrote:
> > Did you try this in RTL? Using "right" does not seem RTL friendly. Is there
an
> > option to use "end" instead of "right"? Given that we already use "right" in
> > several existing menus, should probably addressed separately (if indeed is
> > causing an issue).
> 
> Just tested with 'ar' and right/left get swapped. It does not recognize
> start/end.

yeah, the swapping is fairly unintuitive, but Polymer takes LTR-based
positioning and flips the value based on getComputedStyle(this).dir or
:host-context([dir=rtl]) (one or the other, don't remember)

[stevenjb, 2016-07-18 21:00:03]

On 2016/07/18 19:42:51, dpapad wrote:
> Can you post an example screenshot? Also could you briefly explain what does
> "auto" do differently than "top". I thought that for the case of popup menus,
we
> want top/right alignment (for example the "dots" menu in
> search_engine_entry.html).
> 
>
https://codereview.chromium.org/2161743002/diff/1/chrome/browser/resources/se...
> File
>
chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html
> (right):
> 
>
https://codereview.chromium.org/2161743002/diff/1/chrome/browser/resources/se...
>
chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html:41:
> vertical-align="auto" horizontal-align="right">
> Did you try this in RTL? Using "right" does not seem RTL friendly. Is there an
> option to use "end" instead of "right"? Given that we already use "right" in
> several existing menus, should probably addressed separately (if indeed is
> causing an issue).

'top' always aligns the dropdown with the top of the menu button. 'auto' will
use top if there is more space below and bottom if there is no space above. This
is not as nice as the builtin behavior, but considerably better than what we
have now:

Before: https://screenshot.googleplex.com/3Xkmj9tiVFe
After: https://screenshot.googleplex.com/QykuPudoPYm

[stevenjb, 2016-07-18 21:01:24]

On 2016/07/18 20:58:52, Dan Beam wrote:
>
https://codereview.chromium.org/2161743002/diff/1/chrome/browser/resources/se...
> File
>
chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html
> (right):
> 
>
https://codereview.chromium.org/2161743002/diff/1/chrome/browser/resources/se...
>
chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html:41:
> vertical-align="auto" horizontal-align="right">
> On 2016/07/18 20:43:46, stevenjb wrote:
> > On 2016/07/18 19:42:51, dpapad wrote:
> > > Did you try this in RTL? Using "right" does not seem RTL friendly. Is
there
> an
> > > option to use "end" instead of "right"? Given that we already use "right"
in
> > > several existing menus, should probably addressed separately (if indeed is
> > > causing an issue).
> > 
> > Just tested with 'ar' and right/left get swapped. It does not recognize
> > start/end.
> 
> yeah, the swapping is fairly unintuitive, but Polymer takes LTR-based
> positioning and flips the value based on getComputedStyle(this).dir or
> :host-context([dir=rtl]) (one or the other, don't remember)

this._isRTL = window.getComputedStyle(this).direction == 'rtl';

[dpapad, 2016-07-18 21:04:53]

lgtm

[stevenjb, 2016-07-18 21:09:27]

The CQ bit was checked by stevenjb@chromium.org

[commit-bot: I haz the power, 2016-07-18 21:10:39]

CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2016-07-18 22:56:14]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-07-18 22:56:15]

Try jobs failed on following builders:
  win_chromium_x64_rel_ng on master.tryserver.chromium.win (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.win/builders/win_chromium_x64_...)

[stevenjb, 2016-07-19 17:02:15]

The CQ bit was checked by stevenjb@chromium.org

[commit-bot: I haz the power, 2016-07-19 17:04:26]

CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2016-07-19 18:43:24]

Description was changed from

==========
MD Settings: Fix paper/iron dropdown alignment

Default alignment for both paper-dropdown-menu and iron-dropdown
is top/left. The top align behavior is pretty much always undesirable,
especially on laptops with smaller screens.

BUG=624303
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

to

==========
MD Settings: Fix paper/iron dropdown alignment

Default alignment for both paper-dropdown-menu and iron-dropdown
is top/left. The top align behavior is pretty much always undesirable,
especially on laptops with smaller screens.

BUG=624303
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

[commit-bot: I haz the power, 2016-07-19 18:43:25]

Committed patchset #1 (id:1)

[commit-bot: I haz the power, 2016-07-19 18:46:23]

Description was changed from

==========
MD Settings: Fix paper/iron dropdown alignment

Default alignment for both paper-dropdown-menu and iron-dropdown
is top/left. The top align behavior is pretty much always undesirable,
especially on laptops with smaller screens.

BUG=624303
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

to

==========
MD Settings: Fix paper/iron dropdown alignment

Default alignment for both paper-dropdown-menu and iron-dropdown
is top/left. The top align behavior is pretty much always undesirable,
especially on laptops with smaller screens.

BUG=624303
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Committed: https://crrev.com/5ee39ec3164fa909ef8209ad33e841cbc632c20d
Cr-Commit-Position: refs/heads/master@{#406332}
==========

[commit-bot: I haz the power, 2016-07-19 18:46:24]

Patchset 1 (id:??) landed as
https://crrev.com/5ee39ec3164fa909ef8209ad33e841cbc632c20d
Cr-Commit-Position: refs/heads/master@{#406332}