Bug 149521 – Web Inspector: Option-Click on a goto arrow in the Computed view should jump to resource view

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Nikita Vasilyev]

Option-Click on a CSS property in the "Styles — Rules" view jumps to the resource view.
Option-Click on a CSS property in the "Styles — Computed" view should do the same.

[Radar WebKit Bug Importer]

<rdar://problem/22837357>

[Devin Rousso]

Created attachment 262001 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 262001 [details]
Patch

Clearing flags on attachment: 262001

Committed r190521: <http://trac.webkit.org/changeset/190521>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Joseph Pecoraro]

Comment on attachment 262001 [details]
Patch

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

> Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js:970
> +            let arrowElement = WebInspector.createGoToArrowButton();
> +            arrowElement.title = "Option-click to show source";

This should be a localized string (WebInspector.UIString(...)).

[Devin Rousso]

(In reply to comment #5)
> Comment on attachment 262001 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=262001&action=review
> 
> > Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js:970
> > +            let arrowElement = WebInspector.createGoToArrowButton();
> > +            arrowElement.title = "Option-click to show source";
> 
> This should be a localized string (WebInspector.UIString(...)).

Ah whoops.  Totally forgot about that.  I'll make another bug and fix it.

[Nikita Vasilyev]

Created attachment 267711 [details]
[Video] Option-Click on a property name in the Computed view doesn't do anything

The landed patch doesn't do what the title of this bug says:
Option-Click on a property NAME in the Computed view should
jump to resource view.

Also, note how in the Styles view while Option key is held,
hovering over property names and values changes them to blue
and adds underline (although, it seems to not work that well
for "-webkit-" and other browser vendor properties, for some
reason).

I'm sorry I haven't replied earlier.

[Nikita Vasilyev]

Reopening.

[Nikita Vasilyev]

I've decided to close this bug. The go-to arrows implemented
by Devin are easier to discover.

In "Styles — Rules", Option-clicking on a property name isn't
a very common action. CSS rule's source links (on the right
to CSS selectors) allow navigating to the corresponding line
in CSS resource already.

With CSS variables gaining popularity, we may want to
repurpose Option-Click. In the following example,

    .title {
      color: var(--theme-text-color)
    }

Option-clicking on "--theme-text-color" would jump to the variable's
definition, e.g.:

    body {
      --theme-text-color: black
    }

[Timothy Hatcher]

Please file a bug about variable jumping.

[Nikita Vasilyev]

https://bugs.webkit.org/show_bug.cgi?id=154082