Flex line highlighter isn't displayed correctly when justify-content is highlighted

RESOLVED FIXED in Firefox 60

Status

defect
RESOLVED FIXED
a year ago
11 months ago

People

(Reporter: pbro, Assigned: pbro)

Tracking

(Blocks 1 bug)

unspecified
Firefox 60

Firefox Tracking Flags

(firefox60 fixed)

Details

Attachments

(3 attachments)

(Assignee)

Description

a year ago
Posted file flex-line.html
STR:
- open the attached test case
- open the inspector
- select the flex container and click in the rule-view to highlight the flexbox layout

--> Notice that the line that is normally displayed to indicate the existence of a flex line is partly hidden because of the justify-content areas.
(Assignee)

Comment 1

a year ago
Posted image missing-line.PNG
See the screenshot. I've highlighted in yellow where the line is missing.
(Assignee)

Comment 2

a year ago
This can most probably be addressed simply by making reordering how we draw to the canvas. Indeed, we draw everything to just one canvas, and we clear some areas at times. So drawing in the right order should help.
The other option is to just never clear. Clear once before redrawing everything, and then just draw where needed.
The renderJustifyContent function can probably be changed to avoid clearing.
Comment hidden (mozreview-request)
(Assignee)

Updated

a year ago
Assignee: nobody → pbrosset
Status: NEW → ASSIGNED

Comment 4

a year ago
mozreview-review
Comment on attachment 8957157 [details]
Bug 1444032 - Avoid clearing canvas when drawing justify-content areas;

https://reviewboard.mozilla.org/r/226092/#review232076

::: devtools/server/actors/highlighters/flexbox.js
(Diff revision 1)
> -    }
> -
> -    // Then, cut all the items out of this content area.
> -    for (let flexLine of flexLines) {
>        let flexItems = flexLine.getItems();
> -

Don't remove this new line. I prefer to keep the new lines to separate new if/for statement blocks.

::: devtools/server/actors/highlighters/flexbox.js
(Diff revision 1)
> -
>        for (let flexItem of flexItems) {
>          let { node } = flexItem;
>  
>          let quads = getAdjustedQuads(this.win, node, "margin");
> -

Don't remove this new line
Attachment #8957157 - Flags: review?(gl) → review+

Comment 5

a year ago
Pushed by gabriel.luong@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/91b5d3f7409f
Avoid clearing canvas when drawing justify-content areas; r=gl

Comment 6

a year ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/91b5d3f7409f
Status: ASSIGNED → RESOLVED
Last Resolved: a year ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 60

Updated

11 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.