Closed Bug 1531370 Opened 5 years ago Closed 3 years ago

devTools settings - listed items expand over the full available width

Categories

(DevTools :: General, defect, P3)

defect

Tracking

(firefox-esr60 wontfix, firefox-esr78 wontfix, firefox65 wontfix, firefox66 wontfix, firefox67 wontfix, firefox68 wontfix, firefox70 wontfix, firefox71 wontfix, firefox72 wontfix, firefox88 wontfix, firefox89 wontfix, firefox90 fixed)

RESOLVED FIXED
90 Branch
Tracking Status
firefox-esr60 --- wontfix
firefox-esr78 --- wontfix
firefox65 --- wontfix
firefox66 --- wontfix
firefox67 --- wontfix
firefox68 --- wontfix
firefox70 --- wontfix
firefox71 --- wontfix
firefox72 --- wontfix
firefox88 --- wontfix
firefox89 --- wontfix
firefox90 --- fixed

People

(Reporter: cfogel, Assigned: manuelalejandrosac)

References

Details

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

Attachments

(5 files, 2 obsolete files)

Affected versions

  • 65.0.1, 66.0b10, 67.0a1 (2019-02-28);

Affected platforms

  • Windows 10, macOS 10.12, Ubuntu 18.04;

Steps to reproduce

  1. Launch Firefox, devTools(F12);
  2. Access the settings menu (F1);
  3. Hover over any listed tool name - whitespace;

Expected result

  • hover registered over listed elements;

Actual result

  • hover registered over the whole row; which expands all the way to the next section/edge;

Regression range

  • First bad: 2016-03-19;
  • Last good: 2016-03-18;
  • Pushlog: link;

Additional notes

  • attached recording with the issue;
Has Regression Range: --- → yes
Has STR: --- → yes
Attached image devT_li.gif
Component: Inspector: Layout → General
Priority: -- → P2

Bulk change for all regression bugs with status-firefox67 as 'fix-optional' to be marked 'affected' for status-firefox68.

No need to track older versions of Firefox for this regression. A fix would be nice, but this is still a minor issue, so no need to try to uplift it anywhere.

I think part of the fix could be:

/* options-panel.css */

.options-groupbox label {
  float: left;
  clear: left;
}

This isn't enough as this breaks some parts of the options panel, but it's a start.
I think this is an easy enough bug for someone who wants to attempt it, so I'll mark the bug as a good-first-bug.
If this is you, then please make sure you go through our contribution guide first: http://docs.firefox-dev.tools/ so you have the code ready and you can make changes and test them.

Once you've got that ready, please take a look at the Browser Toolbox (this is basically devtools for devtools). This will be super useful to quickly test fixes.
And then open the options-panel.css file in your editor and try to actually create the fix for this issue.

Please free free to add comments in this issue should you have any question at all.

Keywords: good-first-bug
Priority: P2 → P3
Whiteboard: [lang=css]

Hi,

I might have solved this. Submitted the changes code to mercurial, waiting for revision. This is my first contribution, hopefully I have done it right!

Is this fixed?

Flags: needinfo?(cristian.fogel)

Hello, I would like to be assigned to this bug if it's not yet taken.

The issue still persists on the current builds.

Flags: needinfo?(cristian.fogel)

Hi,

I looked into the issue and I think I found out why this issue occurs. When playing around with the css file: devtools/client/framework/options-panel.css I noticed that the input[checkbox] element is inside a label element instead of a div. There is also a span element, which should be the actual label element in order for this issue to be resolved.

I tried editing the xhtml file devtools/client/framework/toolbox-options.xhtml but when I add elements inside a fieldset they do not appear, which leads me to believe this is a js issue.

The way the js generates the html? Might be wrong. Thought someone more experienced could have a look in devtools/client/framework/toolbox-options.js.

The element with white background is the label element and the element with black background is the span element.
The way it should be: white bg = div, black bg = label.

Hey
I want to work on this bug.
I tried reproducing it.
As mentioned in comment 9 one can click on the entire row to check/uncheck the specific function.
Whereas it should only be restricted to the checkbox and it's description itself.
Can I be assigned this issue. Also am I understanding it correct?
Thanks in advance :)

Hello,
I think I have resolved the bug
Can I put it up for review since presently no one is assigned to it?

Hi Aarushi,

You can post your bug :) Someone from the team will review your patch.

Thanks

Hello, as a beginner in the open source world, I would love to attempt to fix this bug. Could someone assign this to me? Thank you.

hey,

we fixed this issue and put in a pull request: https://github.com/mozilla/gecko-dev/pull/511

are you able to check it out and let us know if there are any problems.

Thanks.

Flags: needinfo?(cristian.fogel)

Hi v.yathan, I assigned the bug to you. Sorry for the late reply to others as well, the General component isn't as well monitored.

v.yathan, please follow https://docs.firefox-dev.tools/contributing/code-reviews.html to attach the bug here (via phabricator).

Assignee: nobody → v.yathan
Flags: needinfo?(cristian.fogel)
Flags: needinfo?(hkirschner)

Sorry for the delay, v.yathan. I will leave the review to the people who already commented. Today you got some feedback in phabricator.

Flags: needinfo?(hkirschner)

Depends on D67424

Hello, it seems the reviewers wanted a CSS fix, so here is my attempt. Please ignore D67425 and D67426 as I was changing one line to resolve Mercurial issues.

Attachment #9134321 - Attachment is obsolete: true
Attachment #9134320 - Attachment is obsolete: true

I'd like to take this bug.

I used the code snippet that Patrick Brosset and added a case for the theme selector so it doesn't break the layout. The devtools UI is handling it beautifully. I'll attach a gif and to my PR once the bug is assigned to me.

Also, looking forward to getting this in. It'll be my first bug fix for an OSS project.

Thanks!

-- I was not sure how to "tag" Patrick here, even after a search on the interwebs -- is something one can do on bugzilla?

Oh, i feel like a jerk. I didn’t read the issue very closely, it had an assignee - apologies for wasting everyone’s time.

I’ll add the filter unassigned to my search next time

This good-first-bug hasn't had any activity for 6 months, it is automatically unassigned.
For more information, please visit auto_nag documentation.

Assignee: v.yathan → nobody

Is this bug still available for me to work on ?
It doesn't had an activity for 6 months

Flags: needinfo?(cristian.fogel)

Honza or Nicolas might be better suited to answer here. Redirecting the needinfo towards them.

Flags: needinfo?(odvarko)
Flags: needinfo?(nchevobbe)
Flags: needinfo?(cristian.fogel)

(In reply to osamamagdy174 from comment #25)

Is this bug still available for me to work on ?

Yes, I am assigning it to you.
Thank you for helping.

Honza

Assignee: nobody → osamamagdy174
Severity: minor → S4
Status: NEW → ASSIGNED
Flags: needinfo?(odvarko)

(In reply to Jan Honza Odvarko [:Honza] (always need-info? me) from comment #27)

(In reply to osamamagdy174 from comment #25)

Is this bug still available for me to work on ?

Yes, I am assigning it to you.
Thank you for helping.

Honza

Thank you, i am trying to fix this now but as this is my first contribution with mozilla.
I need to ask you how to submit my solution. Should i open a pull request or submit the css file in here ?

Flags: needinfo?(odvarko)
Flags: needinfo?(nchevobbe)

This good-first-bug hasn't had any activity for 2 months, it is automatically unassigned.
For more information, please visit auto_nag documentation.

Assignee: osamamagdy174 → nobody
Status: ASSIGNED → NEW

Hello, is this bug still available? If so, can I work on it?

Flags: needinfo?(odvarko)

Great, assigned to you.
Honza

Assignee: nobody → manuelalejandrosac
Status: NEW → ASSIGNED
Flags: needinfo?(odvarko)
Attachment #9219066 - Attachment description: Bug 1531370 - Replaced labels for divs in toolbox options. r=Honza → Bug 1531370 - Added flexbox model to vertical panel fieldsets, removed radio input indentation. r=Honza
Attachment #9219066 - Attachment description: Bug 1531370 - Added flexbox model to vertical panel fieldsets, removed radio input indentation. r=Honza → Bug 1531370 - Fixed label width and fieldset inline size. r=nchevobbe
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/c40f2546698a
Fixed label width and fieldset inline size. r=Honza,nchevobbe
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → 90 Branch
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: