Web Inspector: "data detectors" menu on hover for actionable tokens

• Component: Web Inspector
• Status: RESOLVED FIXED

[Antoine Quint]

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.

[Radar WebKit Bug Importer]

<rdar://problem/15470024>

[Timothy Hatcher]

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.

[Antoine Quint]

Created attachment 218448 [details]
Patch

[WebKit Commit Bot]

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/[e-mail]', 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>
    sys.exit(CheckWebKitStyle().main())
  File "/Volumes/Data/StyleQueue/WebKit/Tools/Scripts/webkitpy/style/main.py", line 154, in main
    patch_checker.check(patch)
  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.

[Timothy Hatcher]

Comment on attachment 218448 [details]
Patch

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.

[Antoine Quint]

Created attachment 218460 [details]
Patch for landing

[Antoine Quint]

http://trac.webkit.org/changeset/160134