Sticky grid line numbers for the CSS Grid Inspector

NEW
Unassigned

Status

enhancement
P3
normal
2 years ago
11 months ago

People

(Reporter: micah, Unassigned)

Tracking

(Blocks 1 bug, {DevAdvocacy})

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [devRel:P1])

Attachments

(1 attachment)

(Reporter)

Description

2 years ago
We want to display grid line numbers as sticky headers or footers for positive and negative numbers (respectively) for grid containers larger than the viewport. We will break this bug down into two patches: 

1. Implementing a sticky header for positive numbers.
2. Implementing a sticky footer for negative numbers.
Keywords: DevAdvocacy
Whiteboard: [devRel:P1]
(Reporter)

Comment 1

2 years ago
I've been playing around with sticky header/footer for grid line numbers. It definitely needs more testing to make sure the overall UI isn't compromised. I uploaded some screenshots that demonstrate the sticky line header/footer.

Sticky line numbers with Positives:
https://github.com/TigleyM/firefox-devtools-patches/blob/master/demos/StickyLineNumbers_Postives.png?raw=true

Sticky line numbers with Negatives:
https://github.com/TigleyM/firefox-devtools-patches/blob/master/demos/StickyLineNumbers_Negatives.png?raw=true
Attachment #8895250 - Flags: feedback?(zer0)
@micah I like what I'm seeing in these screenshots. There are no UX problems that jump out at me — although I'd love to get my hands on it to see what it feels like with a range of different examples. Can I turn it on in my Nightly with a flag yet? 

Why don't we jump on a Vidyo call together? It'd be great to chat with you anyway, and tell you in person how impressed I am with everything you are doing!
(Reporter)

Comment 3

2 years ago
(In reply to Jen Simmons [:jensimmons] from comment #2)
> @micah I like what I'm seeing in these screenshots. There are no UX problems
> that jump out at me — although I'd love to get my hands on it to see what it
> feels like with a range of different examples. Can I turn it on in my
> Nightly with a flag yet? 
> 
> Why don't we jump on a Vidyo call together? It'd be great to chat with you
> anyway, and tell you in person how impressed I am with everything you are
> doing!

Unfortunately it's not available in Nightly yet :(

I got your message in my inbox yesterday! I can drop another message just in case it got lost.
Comment on attachment 8895250 [details] [diff] [review]
Bug1382284_v1.patch

Review of attachment 8895250 [details] [diff] [review]:
-----------------------------------------------------------------

Thanks for working on this Micah!

It looks good, but I'm a bit concerned about the performance of updating the whole canvas every time we scroll; it feels a lot more junky.
There is also the lag given by APZ that it doesn't help much – since the lag is not consistent all the time, otherwise it could be also be considered a kind of nice effect.

We might considering as alternative approach having a second canvas that is positioned fixed and cover just the viewport, and it's used only for display the numbers – so we don't have to update the canvas grid's every scroll, and the fixed position "fixes" the APZ lag.

I'm not suggesting to go in that direction, but that it's worthy to investigate this or other options like that; something that avoids to update and recalculate everything each scroll.

Also, I was kind of expecting that we implemented the sticky numbers for grid like those: http://labs.jensimmons.com/2017/01-003.html

(However, I would make the sticky numbers only if both infinite lines and show numbers options are checked)
Attachment #8895250 - Flags: feedback?(zer0) → feedback+
(Reporter)

Comment 5

2 years ago
(In reply to Matteo Ferretti [:zer0] [:matteo] from comment #4)
> Comment on attachment 8895250 [details] [diff] [review]
> Bug1382284_v1.patch
> 
> Review of attachment 8895250 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> Thanks for working on this Micah!
> 
> It looks good, but I'm a bit concerned about the performance of updating the
> whole canvas every time we scroll; it feels a lot more junky.
> There is also the lag given by APZ that it doesn't help much – since the lag
> is not consistent all the time, otherwise it could be also be considered a
> kind of nice effect.
> 
> We might considering as alternative approach having a second canvas that is
> positioned fixed and cover just the viewport, and it's used only for display
> the numbers – so we don't have to update the canvas grid's every scroll, and
> the fixed position "fixes" the APZ lag.
> 
> I'm not suggesting to go in that direction, but that it's worthy to
> investigate this or other options like that; something that avoids to update
> and recalculate everything each scroll.
> 
> Also, I was kind of expecting that we implemented the sticky numbers for
> grid like those: http://labs.jensimmons.com/2017/01-003.html
> 
> (However, I would make the sticky numbers only if both infinite lines and
> show numbers options are checked)

Thanks for the feedback! 

I think a second canvas would definitely be worth looking into. I will try to play around with that for the next few days as it is probably the most straightforward approach to emulate http://labs.jensimmons.com/2017/01-003.html . I wonder how significantly it would affect performance once we are able to show multiple grids on the page though, but perhaps that is a concern for another time.
(In reply to Micah Tigley [:micah] from comment #5)

> Thanks for the feedback! 
> 
> I think a second canvas would definitely be worth looking into. I will try
> to play around with that for the next few days as it is probably the most
> straightforward approach to emulate
> http://labs.jensimmons.com/2017/01-003.html .

I'm working on a document similar to the negative numbers I did, to have mockups that highlights all the scenarios and how we could handle them; did you found the one about negative numbers useful?

Also, I'm also working to try – I'm sort of investigating right now to see how it's worth to spend time on that or not – to decoupling the virtual canvas approach from the css grid highlighter; it might help you. But I won't block you from investigating about using two canvas, I would suggest to play a bit even with code not ready for production.

> I wonder how significantly it
> would affect performance once we are able to show multiple grids on the page
> though,

Ideally, we should have only one highlighter at the time, and all the grids will be drawn to the same canvas(es); instead of creating multiple instances o the grid highlighter; but this is definitely for another time. :)
I saw a regression about grid line numbers displayed outside of the document. Happens with the example project used for the previous hacks post on the grid inspector (https://github.com/slightlyoffbeat/css-grid-test)

STRs:
- go to https://juliandescottes.github.io/css-grid-test 
- show grid overlay
- enable line number 

AR: the line numbers are displayed outside of the document
ER: the line numbers should be visible. Testing the same STRs on Firefox 56 works fine. 

Micah: I was not sure if this issue would be addressed by this bug. Let me know if I should file a separate bug.
Flags: needinfo?(tigleym)
(Reporter)

Comment 8

2 years ago
(In reply to Julian Descottes [:jdescottes] from comment #7)
> I saw a regression about grid line numbers displayed outside of the
> document. Happens with the example project used for the previous hacks post
> on the grid inspector (https://github.com/slightlyoffbeat/css-grid-test)
> 
> STRs:
> - go to https://juliandescottes.github.io/css-grid-test 
> - show grid overlay
> - enable line number 
> 
> AR: the line numbers are displayed outside of the document
> ER: the line numbers should be visible. Testing the same STRs on Firefox 56
> works fine. 
> 
> Micah: I was not sure if this issue would be addressed by this bug. Let me
> know if I should file a separate bug.

Hi Julian, this issue is being addressed by bug 1396666 .
(Reporter)

Comment 9

2 years ago
Clearing needinfo due to comment above ^
Flags: needinfo?(tigleym)
Severity: normal → enhancement
Priority: -- → P3

Updated

11 months ago
Assignee: tigleym → nobody
Status: ASSIGNED → NEW

Updated

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