Devtools UI: Behavior and UI update to tooltips

Devtools UI: Behavior and UI update to tooltips

This change removes the arrow from tooltips and changes the color from black to a light grey.

This change also hides all tooltips while the mouse is pressed down. Tooltips are also left-aligned with anchor element. They also now default to the bottom instead of the top for consistency.

BUG=513066
Committed: https://src.chromium.org/viewvc/blink?view=rev&revision=200290

[samli, 2015-08-05 07:34:06]

samli@chromium.org changed reviewers:
+ dgozman@chromium.org, maxwalker@chromium.org, paulirish@chromium.org

[samli, 2015-08-05 07:34:06]

PTAL.

Screenshot: http://i.imgur.com/C6zzB9c.png

This change matches Max's prototype. No arrow & light grey.

I changed opacity duration to 150ms and I think it could be even faster since it
is such a small animation in terms of size (100ms).

[maxwalker, 2015-08-05 09:46:24]

I think showing the tooltip on the right (left aligned with anchor element or
mouse pointer) would be better than centering so you always know where to begin
reading. (When the anchor element is close to the right the tooltip can be
shifted to the left as much as necessary.)

Instant tooltips should appear quicker in my opinion. Comparison with the
prototype version (duration 200ms, delay 100ms):
http://cl.ly/3d0y1D1Q0R2K?_ga=1.22383612.638205970.1426526728

Tooltips should disappear on click so they don't cover the content longer than
necessary.

Generally I think the tooltips are very helpful while feeling light and not
adding much noise to the UI!

Thanks, Sam!

[samli, 2015-08-06 03:27:28]

On 2015/08/05 at 09:46:24, maxwalker wrote:
> I think showing the tooltip on the right (left aligned with anchor element or
mouse pointer) would be better than centering so you always know where to begin
reading. (When the anchor element is close to the right the tooltip can be
shifted to the left as much as necessary.)

Yes, I like left aligned with anchor element a lot better.
> 
> Instant tooltips should appear quicker in my opinion. Comparison with the
prototype version (duration 200ms, delay 100ms):
> http://cl.ly/3d0y1D1Q0R2K?_ga=1.22383612.638205970.1426526728

As I said offline, we only have one type of tooltip at the moment.

> 
> Tooltips should disappear on click so they don't cover the content longer than
necessary.

Good point. See description for updated behavior.

> 
> Generally I think the tooltips are very helpful while feeling light and not
adding much noise to the UI!
> 
> Thanks, Sam!

[maxwalker, 2015-08-06 08:59:45]

LGTM!

[paulirish, 2015-08-07 00:13:11]

IMO needs a touch more shadow contrast, especially as much of our UI is gray

    -webkit-filter: drop-shadow(0 1px 2px hsla(0, 0%, 0%, 0.3));

gives bigger blur and less opaqueness.

otherwise, i like it. looks AMAZING with the kbd shortcut.

lgtm

[samli, 2015-08-07 03:26:49]

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

[samli, 2015-08-07 03:27:37]

On 2015/08/07 at 00:13:11, paulirish wrote:
> IMO needs a touch more shadow contrast, especially as much of our UI is gray
> 
>     -webkit-filter: drop-shadow(0 1px 2px hsla(0, 0%, 0%, 0.3));
> 
> gives bigger blur and less opaqueness.
Agree/done.
> 
> otherwise, i like it. looks AMAZING with the kbd shortcut.
> 
> lgtm

PTAL pfeldman or dgozman

[paulirish, 2015-08-11 00:16:29]

Feedback after review with dgozman & pfeldman:

1. z-index for tooltip must be higher than that for soft-menu (dock icon
hovering)
2. Tooltip showing above cursor sometimes and below cursor othertimes is
confusing. Intentional? Can we keep it under the cursor all/most of the time?

[dgozman, 2015-08-11 00:18:00]

lgtm

https://codereview.chromium.org/1271193002/diff/60001/Source/devtools/front_e...
File Source/devtools/front_end/ui/Tooltip.js (right):

https://codereview.chromium.org/1271193002/diff/60001/Source/devtools/front_e...
Source/devtools/front_end/ui/Tooltip.js:39: if (!path || this._mouseIsDown)
Just check |event.buttons !== 0| and remove the flag.

[samli, 2015-08-11 01:50:47]

https://codereview.chromium.org/1271193002/diff/60001/Source/devtools/front_e...
File Source/devtools/front_end/ui/Tooltip.js (right):

https://codereview.chromium.org/1271193002/diff/60001/Source/devtools/front_e...
Source/devtools/front_end/ui/Tooltip.js:39: if (!path || this._mouseIsDown)
On 2015/08/11 at 00:18:00, dgozman wrote:
> Just check |event.buttons !== 0| and remove the flag.

Done.

[samli, 2015-08-11 01:51:14]

The CQ bit was checked by samli@chromium.org

[samli, 2015-08-11 01:51:15]

The patchset sent to the CQ was uploaded after l-g-t-m from
paulirish@chromium.org, maxwalker@chromium.org, dgozman@chromium.org
Link to the patchset: https://codereview.chromium.org/1271193002/#ps80001
(title: " ")

[samli, 2015-08-11 01:51:24]

The CQ bit was unchecked by samli@chromium.org

[samli, 2015-08-11 01:56:41]

The CQ bit was checked by samli@chromium.org

[samli, 2015-08-11 01:56:42]

The patchset sent to the CQ was uploaded after l-g-t-m from
paulirish@chromium.org, dgozman@chromium.org, maxwalker@chromium.org
Link to the patchset: https://codereview.chromium.org/1271193002/#ps100001
(title: " ")

[commit-bot: I haz the power, 2015-08-11 01:57:01]

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

[commit-bot: I haz the power, 2015-08-11 03:18:43]

Committed patchset #6 (id:100001) as
https://src.chromium.org/viewvc/blink?view=rev&revision=200290