Closed Bug 1436496 Opened 6 years ago Closed 6 years ago

Useless horizontal scrollbar randomly shows up in inspector markup view at certain window sizes

Categories

(DevTools :: Inspector, defect, P3)

defect

Tracking

(firefox61 verified)

VERIFIED FIXED
Firefox 61
Tracking Status
firefox61 --- verified

People

(Reporter: victoria, Assigned: ewright)

Details

Attachments

(2 files)

When the DOM view is wider than the breakpoint at which horizontal scrolling is necessitated, an unwanted horizontal scrollbar appears at certain sizes. Seems like there's some spacing on certain kinds of nodes that needs to be fixed.
Priority: -- → P3
Summary: Useless horizontal scrollbar randomly shows up in inspector DOM view at certain window sizes → Useless horizontal scrollbar randomly shows up in inspector markup view at certain window sizes
So, this is being caused by the .newattr which is an inline block element, but pretty much invisible, and it doesn't overflow with the content if the newattr element is at the right most edge  of the view. So, you get an overflow and see this horizontal scrollbar.
Assignee: nobody → ewright
Comment on attachment 8958527 [details]
Bug 1436496 - Remove overflow caused by the new attribute element in the inspector.

Clearing review because of the issues we discussed on slack
Attachment #8958527 - Flags: review?(gl)
Comment on attachment 8958527 [details]
Bug 1436496 - Remove overflow caused by the new attribute element in the inspector.

https://reviewboard.mozilla.org/r/227448/#review233636

::: devtools/client/themes/markup.css:247
(Diff revision 2)
>  .closing-bracket {
>    pointer-events: none;
>  }
>  
>  .newattr {
> -  display: inline-block;
> +  margin-right: -12px;

Change this to be -13px.
Attachment #8958527 - Flags: review?(gl) → review+
Comment on attachment 8958527 [details]
Bug 1436496 - Remove overflow caused by the new attribute element in the inspector.

https://reviewboard.mozilla.org/r/227448/#review233638

::: commit-message-8f1b2:1
(Diff revision 2)
> +Bug 1436496 - Remove useless horizontal scrollbar from inspector. r?gl

We also need a better commit message than stating the problem.
Something like remove overflow caused by the new attribute element in the markup view.
Keywords: checkin-needed
Pushed by rgurzau@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/c1e67066d437
Remove overflow caused by the new attribute element in the inspector. r=gl
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/c1e67066d437
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 61
Product: Firefox → DevTools
I managed to reproduce the initial issue on 60.0.1.  I can confirm that the issue is fixed on 61.0a1 (2018-04-01) after testing over Win 10x64, macOS 10.13.4 and Ubuntu 16.04LTS.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.