Bug 190114 - Web Inspector: Styles: start editing property name/value on mouseup instead of mousedown
Summary: Web Inspector: Styles: start editing property name/value on mouseup instead o...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nikita Vasilyev
URL:
Keywords: InRadar
Depends on: 190053
Blocks:
  Show dependency tree / graph
 
Reported: 2018-09-29 20:00 PDT by Nikita Vasilyev
Modified: 2018-10-02 17:29 PDT (History)
4 users (show)

See Also:

Attachments
Patch (4.04 KB, patch)
2018-10-02 11:53 PDT, Nikita Vasilyev 		no flags Details | Formatted Diff | Diff
[Animated GIF] With patch applied (50.56 KB, image/gif)
2018-10-02 12:02 PDT, Nikita Vasilyev 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Nikita Vasilyev 2018-09-29 20:00:07 PDT 
To enable multi-property selection, I suggest entering editing mode for property names and values on mouseup:

Example:

    color: black;
    font-size: 14px;

1. mousedown on "color"
2. Move the mouse cursor to "font-size"
3. mouseup on "font-size" (or anywhere on the second line)

Expected:
Both properties are selected.

---

This is NOT the matter of replacing "mousedown" to "mouseup" somewhere in the code. This is far more complex.

SpreadsheetTextField, which is used by property names and values, enters editing mode on focus. Since name & value fields have tabIndex=0,
mousedown on them triggers the focus event. Focusing on an element via the keyboard (e.g. by pressing Tab key) triggers the focus event as well - great,
we have the same code path for keyboard and mouse navigation! It's VoiceOver-friendly, too!

It was all great until now. Focus change always happens on mousedown, which means I can no longer rely on it for mouse navigation.
Comment 1 Radar WebKit Bug Importer 2018-09-29 20:33:26 PDT 
<rdar://problem/44891030>
Comment 2 Nikita Vasilyev 2018-10-02 11:53:48 PDT 
Created attachment 351425 [details]
Patch
Comment 3 Nikita Vasilyev 2018-10-02 12:00:25 PDT 
(In reply to Nikita Vasilyev from comment #0)
> SpreadsheetTextField, which is used by property names and values, enters
> editing mode on focus. Since name & value fields have tabIndex=0,
> mousedown on them triggers the focus event. Focusing on an element via the
> keyboard (e.g. by pressing Tab key) triggers the focus event as well - great,
> we have the same code path for keyboard and mouse navigation! It's
> VoiceOver-friendly, too!
> 
> It was all great until now. Focus change always happens on mousedown, which
> means I can no longer rely on it for mouse navigation.

The current version of the style editor doesn't rely on tabIndex for keyboard navigation between property names and values - it's already a separate code path.
Comment 4 Nikita Vasilyev 2018-10-02 12:02:38 PDT 
Created attachment 351427 [details]
[Animated GIF] With patch applied
Comment 5 Matt Baker 2018-10-02 17:04:46 PDT 
Comment on attachment 351425 [details]
Patch

r=me
Comment 6 WebKit Commit Bot 2018-10-02 17:29:49 PDT 
Comment on attachment 351425 [details]
Patch

Clearing flags on attachment: 351425

Committed r236780: <https://trac.webkit.org/changeset/236780>
Comment 7 WebKit Commit Bot 2018-10-02 17:29:51 PDT 
All reviewed patches have been landed.  Closing bug.