Devtools UI: Fix tooltip issues

Devtools UI: Fix tooltip issues

This change fixes several issues with tooltip UI:
 - Fixes overflow issue regressed in https://codereview.chromium.org/1300743002
 - Displays media queries tooltips on top and under the cursor instead of left
   aligned.
 - Closes tooltips when the mouse leaves devtools
 - Closes tooltips on any keyboard press
 - Aligns tooltips for palette colors above the anchor

This change also changes the default behaviour of tooltips to track the cursor except when used in the toolbars (buttons/labels).

BUG=525721, 525609, 521200, 524371, 526936, 526972
Committed: https://src.chromium.org/viewvc/blink?view=rev&revision=201683

[samli, 2015-08-27 23:01:37]

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

[dgozman, 2015-08-28 00:16:32]

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

[dgozman, 2015-08-28 00:16:32]

https://codereview.chromium.org/1318903007/diff/20001/Source/devtools/front_e...
File Source/devtools/front_end/elements/ElementsTreeElement.js (right):

https://codereview.chromium.org/1318903007/diff/20001/Source/devtools/front_e...
Source/devtools/front_end/elements/ElementsTreeElement.js:1138:
titles.createTextChild(decoration.title);
Should be div, or they would collapse.

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

https://codereview.chromium.org/1318903007/diff/20001/Source/devtools/front_e...
Source/devtools/front_end/ui/Tooltip.js:103: var tooltipX =
tooltip.options[WebInspector.Tooltip.Options.HorizontalAlignUnderCursor]
Should we make this a default? It does no harm.

[samli, 2015-08-28 01:32:14]

https://codereview.chromium.org/1318903007/diff/20001/Source/devtools/front_e...
File Source/devtools/front_end/elements/ElementsTreeElement.js (right):

https://codereview.chromium.org/1318903007/diff/20001/Source/devtools/front_e...
Source/devtools/front_end/elements/ElementsTreeElement.js:1138:
titles.createTextChild(decoration.title);
On 2015/08/28 at 00:16:32, dgozman wrote:
> Should be div, or they would collapse.

done.

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

https://codereview.chromium.org/1318903007/diff/20001/Source/devtools/front_e...
Source/devtools/front_end/ui/Tooltip.js:103: var tooltipX =
tooltip.options[WebInspector.Tooltip.Options.HorizontalAlignUnderCursor]
On 2015/08/28 at 00:16:32, dgozman wrote:
> Should we make this a default? It does no harm.

I don't think this looks nice and it is confusing in the toolbar. When you
switch between icons, the tooltip changes but barely moves (sometimes as little
as 1px), so the association between icon/tooltip isn't as strong.

[samli, 2015-08-28 22:07:28]

ping, we should merge this

[pfeldman, 2015-08-28 22:46:18]

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

https://codereview.chromium.org/1318903007/diff/50001/Source/devtools/front_e...
Source/devtools/front_end/ui/Tooltip.js:139: VerticalAlignmentTop:
"VerticalAlignmentTop",
Not a fan of this, what are you trying to configure here?

[samli, 2015-08-28 22:48:43]

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

https://codereview.chromium.org/1318903007/diff/50001/Source/devtools/front_e...
Source/devtools/front_end/ui/Tooltip.js:139: VerticalAlignmentTop:
"VerticalAlignmentTop",
On 2015/08/28 at 22:46:18, pfeldman wrote:
> Not a fan of this, what are you trying to configure here?

This fixes issue https://code.google.com/p/chromium/issues/detail?id=525721
We need to override the tooltip placement.

[pfeldman, 2015-08-28 23:04:47]

On 2015/08/28 22:48:43, samli wrote:
>
https://codereview.chromium.org/1318903007/diff/50001/Source/devtools/front_e...
> File Source/devtools/front_end/ui/Tooltip.js (right):
> 
>
https://codereview.chromium.org/1318903007/diff/50001/Source/devtools/front_e...
> Source/devtools/front_end/ui/Tooltip.js:139: VerticalAlignmentTop:
> "VerticalAlignmentTop",
> On 2015/08/28 at 22:46:18, pfeldman wrote:
> > Not a fan of this, what are you trying to configure here?
> 
> This fixes issue https://code.google.com/p/chromium/issues/detail?id=525721
> We need to override the tooltip placement.

But then there are not tooltips. You could not override the one for the
platform.

[pfeldman, 2015-08-31 18:55:00]

ping, lets make the ones to the left (MQ ones) native?

[samli, 2015-08-31 22:00:27]

On 2015/08/31 at 18:55:00, pfeldman wrote:
> ping, lets make the ones to the left (MQ ones) native?

PTAL, done.

MQ are set to use native via a defined container. Default is now under cursor +
buttons/labels are aligned to anchor.

[pfeldman, 2015-09-02 21:59:45]

lgtm

https://codereview.chromium.org/1318903007/diff/70001/Source/devtools/front_e...
File Source/devtools/front_end/emulation/ResponsiveDesignView.js (right):

https://codereview.chromium.org/1318903007/diff/70001/Source/devtools/front_e...
Source/devtools/front_end/emulation/ResponsiveDesignView.js:64:
WebInspector.Tooltip.setNativeOverrideContainer(this._mediaInspectorContainer);
.addNativeOverrideContainer

[samli, 2015-09-02 22:14:12]

https://codereview.chromium.org/1318903007/diff/70001/Source/devtools/front_e...
File Source/devtools/front_end/emulation/ResponsiveDesignView.js (right):

https://codereview.chromium.org/1318903007/diff/70001/Source/devtools/front_e...
Source/devtools/front_end/emulation/ResponsiveDesignView.js:64:
WebInspector.Tooltip.setNativeOverrideContainer(this._mediaInspectorContainer);
On 2015/09/02 at 21:59:45, pfeldman wrote:
> .addNativeOverrideContainer

Done.

[samli, 2015-09-02 22:14:14]

The CQ bit was checked by samli@chromium.org

[samli, 2015-09-02 22:14:14]

The patchset sent to the CQ was uploaded after l-g-t-m from
pfeldman@chromium.org
Link to the patchset: https://codereview.chromium.org/1318903007/#ps90001
(title: " ")

[commit-bot: I haz the power, 2015-09-02 22:14:33]

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

[commit-bot: I haz the power, 2015-09-02 23:46:22]

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