1418351 - Link computed styles to Rules tab in Inspector

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

[mail]

Attachment: Screen Shot 2017-11-17 at 9.10.35 AM.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36

Steps to reproduce:

Open the inspector, inspect an element, go to the "Computed" tab and expand a CSS attribute (one for which there is a defined style), click on the style (not the filename reference to the right).


Actual results:

Nothing.


Expected results:

Link to the style in the "Rules" tab within the Inspector.

This is not a bug obviously, but a feature in Chrome that I find very useful when editing CSS.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Here's how it looks in Chrome

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1418351 - [devtools] Add button to jump to Rules view declaration in computed panel. r=#devtools.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/2e6b27302701
https://hg.mozilla.org/integration/autoland/rev/5978e3147cdf
[devtools] Add button to jump to Rules view declaration in computed panel. r=devtools-reviewers,ochameau.

Comment 5

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/5978e3147cdf

Comment 6

[Sebastian Zartner [:sebo]]

I believe this is something worth mentioning in the release notes. So requesting to add a note.

[Why is this notable]: New DevTools feature
[Affects Firefox for Android]: no
[Suggested wording]: Besides each CSS declaration related to a computed value shown in the Computed view there's now an icon to jump to it in the Rules view.
[Links (documentation, blog post, etc)]:
Documentation for the view is at https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html#page-inspector-how-to-examine-and-edit-css-examine-computed-css, though it didn't get updated yet.

Sebastian

Comment 7

[Pascal Chevrel (relman team) -> :pascalc|PTO until Sept 2]

Note added to our beta release notes with this wording:

Besides each CSS declaration related to a computed value shown in the Computed view there's now an icon to jump to it in the Rules view.

(I put the link even though the content is not updated yet)

This is also added to our internal document for the final release notes.