Bug 124363 - Web Inspector: "data detectors" menu on hover for actionable tokens
Summary: Web Inspector: "data detectors" menu on hover for actionable tokens
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Antoine Quint
Keywords: InRadar
Depends on: 124747
  Show dependency treegraph
Reported: 2013-11-14 09:01 PST by Antoine Quint
Modified: 2013-12-04 15:18 PST (History)
5 users (show)

See Also:

Patch (18.35 KB, patch)
2013-12-04 14:24 PST, Antoine Quint
no flags Details | Formatted Diff | Diff
Patch for landing (18.35 KB, patch)
2013-12-04 15:04 PST, Antoine Quint
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Antoine Quint 2013-11-14 09:01:48 PST
We support or will support a series of actions on tokens which are not always discoverable via the combination of a keyboard modifier and mouse interaction alone. For instance, a CSS color token should allow both jump to definition and editing via a popover. On OS X, Data Detectors offer a pretty clean UI to provide actions of this type for various data mined in text. We should explore supporting a similar type of UI.
Comment 1 Radar WebKit Bug Importer 2013-11-14 09:02:20 PST
Comment 2 Timothy Hatcher 2013-11-15 11:47:06 PST
Right now the color picker is a single click away on the swatch, and we likely can't change that. This will be needed more when we have other popover editors.
Comment 3 Antoine Quint 2013-12-04 14:24:23 PST
Created attachment 218448 [details]
Comment 4 WebKit Commit Bot 2013-12-04 14:25:00 PST
Attachment 218448 [details] did not pass style-queue:

Failed to run "['Tools/Scripts/check-webkit-style', '--diff-files', u'Source/WebInspectorUI/ChangeLog', u'Source/WebInspectorUI/UserInterface/HoverMenu.css', u'Source/WebInspectorUI/UserInterface/HoverMenu.js', u'Source/WebInspectorUI/UserInterface/Images/HoverMenuButton.png', u'Source/WebInspectorUI/UserInterface/Images/HoverMenuButton@2x.png', u'Source/WebInspectorUI/UserInterface/Main.html', '--commit-queue']" exit_code: 1
Traceback (most recent call last):
  File "Tools/Scripts/check-webkit-style", line 48, in <module>
  File "/Volumes/Data/StyleQueue/WebKit/Tools/Scripts/webkitpy/style/main.py", line 154, in main
  File "/Volumes/Data/StyleQueue/WebKit/Tools/Scripts/webkitpy/style/patchreader.py", line 71, in check
    self._text_file_reader.process_file(file_path=path, line_numbers=None)
  File "/Volumes/Data/StyleQueue/WebKit/Tools/Scripts/webkitpy/style/filereader.py", line 118, in process_file
    lines = self._read_lines(file_path)
  File "/Volumes/Data/StyleQueue/WebKit/Tools/Scripts/webkitpy/style/filereader.py", line 86, in _read_lines
    contents = file.read()
  File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/codecs.py", line 671, in read
    return self.reader.read(size)
  File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/codecs.py", line 477, in read
    newchars, decodedbytes = self.decode(data, self.errors)
UnicodeDecodeError: 'utf8' codec can't decode byte 0x89 in position 0: invalid start byte

If any of these errors are false positives, please file a bug against check-webkit-style.
Comment 5 Timothy Hatcher 2013-12-04 14:44:19 PST
Comment on attachment 218448 [details]

View in context: https://bugs.webkit.org/attachment.cgi?id=218448&action=review

> Source/WebInspectorUI/UserInterface/HoverMenu.css:47
> +    -webkit-transform: translate3d(-3px, -5px, 0);

Does this need to be 3D? Just translate() should work. Maybe I am old school, but negative margin-left and margin-right would work too.

> Source/WebInspectorUI/UserInterface/HoverMenu.css:62
> +    -webkit-transform: translateX(14px);

I'd use margin for this.

> Source/WebInspectorUI/UserInterface/HoverMenu.js:46
> +    constructor: WebInspector.HoverMenu,
> +
> +    __proto__: WebInspector.Object.prototype,

Now blank line.

> Source/WebInspectorUI/UserInterface/HoverMenu.js:67
> +        setTimeout(function() {
> +            element.classList.add(WebInspector.HoverMenu.VisibleClassName);
> +        });

Should explicitly say 0 here. I've also been wanting to use one-off requestAnimationFrame to sync better with the display for things like this.

requestAnimationFrame(function() { element.classList.add(WebInspector.HoverMenu.VisibleClassName); });

> Source/WebInspectorUI/UserInterface/HoverMenu.js:69
> +        window.addEventListener("scroll", this, true);

Do scroll events in overflows bubble? I'm not sure if this will catch any scrolling.
Comment 6 Antoine Quint 2013-12-04 15:04:24 PST
Created attachment 218460 [details]
Patch for landing
Comment 7 Antoine Quint 2013-12-04 15:18:58 PST