Closed Bug 1567859 Opened 1 year ago Closed 10 months ago

Add separator after computed style filter

Categories

(DevTools :: Inspector: Computed, defect, P3)

Desktop
All
defect

Tracking

(firefox68 wontfix, firefox69 wontfix, firefox70 wontfix, firefox71 verified)

VERIFIED FIXED
Firefox 71
Tracking Status
firefox68 --- wontfix
firefox69 --- wontfix
firefox70 --- wontfix
firefox71 --- verified

People

(Reporter: cfogel, Assigned: mv, Mentored)

Details

(Keywords: good-first-bug, Whiteboard: [lang=css])

Attachments

(4 files)

Affected versions

  • 68.0, 69.0b6, 70.0a1(2019.07.19);

Affected platforms

  • Windows 10, macOS 10.13, ubuntu 16.04;

Steps to reproduce

  1. Lanch Firefox, open the DevTools inspector;
  2. Swap to 3pane view;
  3. Click on the Changes tab;
  4. [optional] Type anything in the filter for Rules/Html/Changes.

Actual result

  • the Html and Rules filter are separated with a " | " line

Enhancement suggestion

  • For consistency, a separator can be added in this section as well.

Regression range

  • not a regression, might have been overlooked when the current styling was implemented;
  • old format had the filters encased in brackets so it wasn't any issue with this;

Additional notes

  • attached screenshot with the mentioned areas.

Thanks for catching this!

This is probably a good bug for anyone with CSS knowledge who want their first experience contributing to Firefox DevTools.
If that's you, please check our contribution docs over at https://docs.firefox-dev.tools/ and then feel free to ask any questions here if you need help.
Using the Browser Toolbox to inspect how the other toolbars are done would definitely help. So I recommend reading about how to do this first: https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox

Type: enhancement → defect
Keywords: good-first-bug
Priority: -- → P3
Whiteboard: [lang=css]

The relevant file is index.xhtml. You will see the DOM markup for the computed view starting at line 119. We typically add the following markup for separator:

<div class="devtools-separator"></div>

An example can be seen on line 99 for the Rules view.

Mentor: gl

Add missing separator after computed style filter

Hello, I'm a first timer here. I would like to take this issue.
I'll start to review the documentation provided here and come back with questions.
Thanks!

Hello,
I think I have fixed the issue by following your instructions. I have compiled the Firefox code, found the file and added the corresponding line of code.
I recompiled the code and the issue seems to be fixed now, please check the attached image.

Should I submit the fix as a pull request over the gecko-dev repository? (Please provide / suggest instructions.)
https://github.com/mozilla/gecko-dev/tree/master/devtools/client/inspector/index.xhtml

Btw, I validated the issue hasn't been fixed in Firefox Nightly yet. Check attached image.

Thanks!

(In reply to brianasz from comment #6)

Hello,
I think I have fixed the issue by following your instructions. I have compiled the Firefox code, found the file and added the corresponding line of code.
I recompiled the code and the issue seems to be fixed now, please check the attached image.

Should I submit the fix as a pull request over the gecko-dev repository? (Please provide / suggest instructions.)
https://github.com/mozilla/gecko-dev/tree/master/devtools/client/inspector/index.xhtml

Btw, I validated the issue hasn't been fixed in Firefox Nightly yet. Check attached image.

Thanks!

Hey brianasz, thanks for taking this on. We already have a patch ready to land from Maxime.

Pushed by gluong@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/b7ea56ef7c1c
Add missing separator after computed style filter. r=gl
Status: NEW → RESOLVED
Closed: 10 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 71

(In reply to Gabriel [:gl] (ΦωΦ) from comment #9)

(In reply to brianasz from comment #6)

Hello,
I think I have fixed the issue by following your instructions. I have compiled the Firefox code, found the file and added the corresponding line of code.
I recompiled the code and the issue seems to be fixed now, please check the attached image.

Should I submit the fix as a pull request over the gecko-dev repository? (Please provide / suggest instructions.)
https://github.com/mozilla/gecko-dev/tree/master/devtools/client/inspector/index.xhtml

Btw, I validated the issue hasn't been fixed in Firefox Nightly yet. Check attached image.

Thanks!

Hey brianasz, thanks for taking this on. We already have a patch ready to land from Maxime.

Sure no problem. Thanks for letting me know!

I'm assuming this can ride the trains, but feel free to request uplift to beta if you think it's worth it.

Verified with 71.0a1 (2019-10-06).

Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.