1826409 - Show dimension overlay by default while window is resizing

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

[Martín González Gómez]

Attachment: Captura de pantalla 2023-04-04 a las 15.11.50.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/111.0

Steps to reproduce:

Resize the browser window while devtools are open.

Actual results:

Nothing.

Expected results:

A dimension overlay showing window width and height in pixels should appear on the top right corner. This small overlay should get hidden a few seconds after the resize is done.

The "RulersHighlighter" class already implements this but obviously it also overlays a full-screen ruler on top of the page. This is not optimal because first, you need to find the option on the devtool settings, and second, you need to click on the rulers button to see the dimensions while resizing.

Window dimensions are so important while developing that they should be shown by default without having to find options on the settings, click buttons or see some rulers overlaid on top of the page. It is what Chrome does too (attached screenshot).

Comment 1

[Julian Descottes [:jdescottes]]

It would make sense, happy to mentor someone to add this, we should be able to leverage our existing highlighters infrastructure.

Comment 2

[Martín González Gómez]

I'm happy to work on this and would take your kind offer Julian. Actually I pulled down the source code to take a look and I'm able to build Firefox. Unfortunately I got a bit lost. Do you have IRC or some other channel we could use to discuss this?

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

(In reply to mmm from comment #2)

I'm happy to work on this and would take your kind offer Julian. Actually I pulled down the source code to take a look and I'm able to build Firefox. Unfortunately I got a bit lost. Do you have IRC or some other channel we could use to discuss this?

oh great :) You can join us on https://chat.mozilla.org/#/room/#devtools:mozilla.org

Comment 4

[LyScott123]

Hello! Is anyone working on this bug right now? New the devtools would love to be able to pick this up!

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

(In reply to LyScott123 from comment #4)

Hello! Is anyone working on this bug right now? New the devtools would love to be able to pick this up!

I think mmm will give it a go

You can find other mentored bugs in https://codetribute.mozilla.org/projects/devtools?project%3DAll

Comment 6

[Julian Descottes [:jdescottes]]

Some quick pointers for this.

First of all, naming: in DevTools we refer to all the "overlays" we put on the page as "highlighters" so that's what you need to look for in the code.

Then it's important to note that devtools has a client / server architecture. The client is responsible for handling the Toolbox & Panels UI, the server is responsible for interacting with the page we are currently debugging. The highlighters are a special case, they are a DevTools UI, but they are displayed on (or rather in) the page, so most of their implementation is in the server part of DevTools. You will still see references to highlighters in the client, because most of the time, the client will be responsible for requesting to hide or show a specific highlighter.

The various highlighters available in DevTools are defined in devtools/server/actors/highlighters. The closest thing we have to what was requested here is the rulers highlighter. Note that this highlighter is also registered in the actors/highlighters.js file.

The rulers highlighter is displayed or hidden when the user clicks on the corresponding toolbox button, and if you want to see how this is handled in the client, take a look at the createHighlightButton method.

Now how can we proceed. We now we want to make the "viewport size" part of the ruler highlighter be displayed anytime there is a resize, but we also want to keep the current rulers highlighter working as it is.

I feel like splitting the rulers highlighters in two different highlighters could be a way to start here. The rulers highlighter would be responsible for displaying the actual "rulers" and we could create a new highlighter called for instance "viewport-size" or something similar, which would be responsible for displaying the viewport size.

Once we have this done, we can start figuring out a way to show this new highlighter on viewport resize. For this, one option will be to listen to the resize from the client and then start and stop the highlighter from the client as well. Another option would be to always start the highlighter, but let the highlighter itself listen to the viewport resize and decide when it should hide and show itself. We might have to try a few options before figuring out the best approach.

Comment 7

[Martín González Gómez]

Attachment: WIP: Bug 1826409 Extract viewport size information from RulerHighlighter into its own class: ViewportSizeHighlighter

Comment 8

[Phabricator Automation]

Comment on attachment 9328064 [details]
WIP: Bug 1826409 Extract viewport size information from RulerHighlighter into its own class: ViewportSizeHighlighter

Revision D175198 was moved to bug 1827565. Setting attachment 9328064 [details] to obsolete.

Comment 9

[Martín González Gómez]

Attachment: WIP: Bug 1826409 - [devtools] Show dimension overlay by default while window is resizing. r=jdescottes

Comment 10

[BugBot [:suhaib / :marco/ :calixte]]

The bug assignee is inactive on Bugzilla, so the assignee is being reset.

Comment 11

[Artem Manushenkov]

Hi! I'd like to try to continue with the bugfixes for the patch, seeing that the feature is partially done but isn't being worked on anymore

@[e-mail] do i take over the existing patch here https://phabricator.services.mozilla.com/D179883 or create a new one?

Comment 12

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Artem Manushenkov from comment #11)

Hi! I'd like to try to continue with the bugfixes for the patch, seeing that the feature is partially done but isn't being worked on anymore

Thanks for helping!

@[e-mail] do i take over the existing patch here https://phabricator.services.mozilla.com/D179883 or create a new one?

Hello Artem, you can push to a new revision, I'll mark the previous one as obsolete

Comment 13

[Artem Manushenkov]

Attachment: Bug 1826409 - [devtools] Show dimension overlay by default while window is resizing. r=nchevobbe

Comment 14

[Artem Manushenkov]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #12)

Hello, thanks for the go-ahead 😎 I submitted the patch

I fixed the bugs. It still only initializes when the inspector is created though.

I should add a test, but first i'd like to refactor the architecture if anyone thinks there's a better way of doing things 🙏 I'm not very confident the code is clean enough

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/28ce8c23bc62
[devtools] Show dimension overlay by default while window is resizing. r=devtools-reviewers,ochameau

Comment 16

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/mozilla-central/rev/28ce8c23bc62