Devtools: Cut color picker off at bottom instead of the top

Devtools: Cut color picker off at bottom instead of the top

When there is insufficent vertical space, the color picker is cut off at
the top. This change fixes it at the top in these situations, allowing
better usability of the color picker in these states.

BUG=572101
Committed: https://crrev.com/acc1963c73bc1e4dabf926d5f99d9323d2918016
Cr-Commit-Position: refs/heads/master@{#386581}

[samli, 2016-03-21 00:58:00]

samli@chromium.org changed reviewers:
+ lushnikov@chromium.org

[samli, 2016-03-21 00:58:00]

PTAL.

[lushnikov, 2016-03-21 19:24:07]

https://codereview.chromium.org/1816933002/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/elements/spectrum.css (right):

https://codereview.chromium.org/1816933002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/elements/spectrum.css:7: display:
block !important;
why is this needed?

[samli, 2016-03-22 02:51:42]

https://codereview.chromium.org/1816933002/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/elements/spectrum.css (right):

https://codereview.chromium.org/1816933002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/elements/spectrum.css:7: display:
block !important;
On 2016/03/21 at 19:24:06, lushnikov wrote:
> why is this needed?

For some reason, with display: flex on the popover element, when Node.focus() is
called, it seems to move the element, cutting off the top again.

You can remove this line and observe the same repro in the bug.

[samli, 2016-04-11 04:31:05]

ping

[lushnikov, 2016-04-12 01:02:16]

https://codereview.chromium.org/1816933002/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/elements/spectrum.css (right):

https://codereview.chromium.org/1816933002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/elements/spectrum.css:7: display:
block !important;
On 2016/03/22 02:51:42, samli wrote:
> On 2016/03/21 at 19:24:06, lushnikov wrote:
> > why is this needed?
> 
> For some reason, with display: flex on the popover element, when Node.focus()
is
> called, it seems to move the element, cutting off the top again.
> 
> You can remove this line and observe the same repro in the bug.

I failed to reproduce it. Can you please tell me the exact steps to try? I just
remove this line, and the popover works fine for me:
http://i.imgur.com/Dbp0x0j.png

[samli, 2016-04-12 01:03:45]

On 2016/04/12 at 01:02:16, lushnikov wrote:
>
https://codereview.chromium.org/1816933002/diff/1/third_party/WebKit/Source/d...
> File third_party/WebKit/Source/devtools/front_end/elements/spectrum.css
(right):
> 
>
https://codereview.chromium.org/1816933002/diff/1/third_party/WebKit/Source/d...
> third_party/WebKit/Source/devtools/front_end/elements/spectrum.css:7: display:
block !important;
> On 2016/03/22 02:51:42, samli wrote:
> > On 2016/03/21 at 19:24:06, lushnikov wrote:
> > > why is this needed?
> > 
> > For some reason, with display: flex on the popover element, when
Node.focus() is
> > called, it seems to move the element, cutting off the top again.
> > 
> > You can remove this line and observe the same repro in the bug.
> 
> I failed to reproduce it. Can you please tell me the exact steps to try? I
just remove this line, and the popover works fine for me:
http://i.imgur.com/Dbp0x0j.png

Try dock to bottom?

[lushnikov, 2016-04-12 03:12:10]

nice, thanks.
lgtm

[samli, 2016-04-12 03:15:22]

The CQ bit was checked by samli@chromium.org

[commit-bot: I haz the power, 2016-04-12 03:15:50]

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

[commit-bot: I haz the power, 2016-04-12 04:22:23]

Committed patchset #1 (id:1)

[commit-bot: I haz the power, 2016-04-12 04:23:43]

Description was changed from

==========
Devtools: Cut color picker off at bottom instead of the top

When there is insufficent vertical space, the color picker is cut off at
the top. This change fixes it at the top in these situations, allowing
better usability of the color picker in these states.

BUG=572101
==========

to

==========
Devtools: Cut color picker off at bottom instead of the top

When there is insufficent vertical space, the color picker is cut off at
the top. This change fixes it at the top in these situations, allowing
better usability of the color picker in these states.

BUG=572101

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

[commit-bot: I haz the power, 2016-04-12 04:23:45]

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

[samli, 2016-04-19 02:24:32]

A revert of this CL (patchset #1 id:1) has been created in
https://codereview.chromium.org/1900033002/ by samli@chromium.org.

The reason for reverting is: Breaks color picker with no easy fix:
crbug.com/603811.