731652 - (magnifier) Create a magnifier view

Status: RESOLVED WONTFIX

(DevTools :: General, defect)

Description

[Victor Porof [:vporof][:vp]]

Because of WebGL and the current Tilt implementation, it should be easy to disable texture linear magnification filtering, use an orthographic projection matrix and show individial pixels when zoomed in in Tilt. We could also display a grid view when we're actually able to see individual pixels. This can be useful for a great number of reasons.

Comment 1

[Victor Porof [:vporof][:vp]]

Attachment: v1

WIP. Paul, is this close to what you have in mind?
I still need to implement a grid, displayed when zoomed in a lot.
No tests yet.

Also: the good thing is that while working on this, I had to pretty much rethink what 'zooming' is in Tilt. Initially, it was translation on the Z axis, but that wouldn't work in an orthographic projection. So I changed everything related to zoom to be treated as 'scale', which made this work beautifully. It also automagically fixes bug 721085 (or at least the majority of it).

Comment 2

[Paul Rouget [:paul]]

(In reply to Victor Porof from comment #1)
> Created attachment 602598 [details] [diff] [review]
> v1
> 
> WIP. Paul, is this close to what you have in mind?
> I still need to implement a grid, displayed when zoomed in a lot.
> No tests yet.

Absolutely! With a grid and pan with mouse, it would be perfect :)

But this requires WebGL though, and for such an important feature, I think it can be a deal breaker. Can we try to do the same thing with a Canvas surface, or a div that uses -moz-element?

Comment 3

[Victor Porof [:vporof][:vp]]

(In reply to Paul Rouget [:paul] from comment #2)
> (In reply to Victor Porof from comment #1)
> > Created attachment 602598 [details] [diff] [review]
> > v1
> > 
> > WIP. Paul, is this close to what you have in mind?
> > I still need to implement a grid, displayed when zoomed in a lot.
> > No tests yet.
> 
> Absolutely! With a grid and pan with mouse, it would be perfect :)
> 

You can already pan, with right click :)

> But this requires WebGL though, and for such an important feature, I think
> it can be a deal breaker. Can we try to do the same thing with a Canvas
> surface, or a div that uses -moz-element?

Hmm, this would require rewriting everything, and not depend on Tilt at all...

Comment 4

[Victor Porof [:vporof][:vp]]

(In reply to Paul Rouget [:paul] from comment #2)
> Can we try to do the same thing with a Canvas surface, or a div that uses -moz-element?

The disadvantage of using a canvas is that, to allow automatic refreshes, it will constantly need to be redrawn. However, we will be able do use mozImageSmoothingEnabled = false do disable antialiasing.

But even better, I wonder if we can do a mozSetImageElement(id, element) where:
* id is the id of a div element in chrome
* element is the inspected document's body node.

So that the refreshes are live. But in this case, is it possible to disable antialiasing? Moreover, I wonder if that will result in a security error?

Comment 5

[Paul Rouget [:paul]]

(In reply to Victor Porof from comment #4)
> (In reply to Paul Rouget [:paul] from comment #2)
> > Can we try to do the same thing with a Canvas surface, or a div that uses -moz-element?
> 
> The disadvantage of using a canvas is that, to allow automatic refreshes, it
> will constantly need to be redrawn.

We just need to redraw what is repainted.

> However, we will be able do use
> mozImageSmoothingEnabled = false do disable antialiasing.
> 
> But even better, I wonder if we can do a mozSetImageElement(id, element)
> where:
> * id is the id of a div element in chrome
> * element is the inspected document's body node.

Yes - this works. I have been experimenting with that for the highlighter 2D.
You only need to create an unique id for the browser window.

> So that the refreshes are live. But in this case, is it possible to disable
> antialiasing?

image-rendering:-moz-crisp-edges

> Moreover, I wonder if that will result in a security error?

No as long as you use a chrome-privileged element.

Comment 6

[Victor Porof [:vporof][:vp]]

(In reply to Paul Rouget [:paul] from comment #5)

Awesome!

Comment 7

[Paul Rouget [:paul]]

We need to define a little better what we want to achieve here. Some thoughts:

We want a magnifier.
I don't think we need a specific UI first (no "magnifier" button).
I don't think this need to be only available with the Inspector.
We might want to map the normal zoom key-bindings to the magnifier:
× ctrl.+ would become ctrl.shift.+ for the magnifier
× ctrl.+ -> ctrl.shift.-
× ctrl.0 -> ctrl.shift.0
× ctrl.scroll -> ctrl.shift.scroll

We could make that available by default, at the browser level (no need to have the code in devtools/).
We don't want any anti-aliasing.
Once the pixels are big enough (x4 ?) we could display a grid.
No need to have any special code for panning, we should just let the user scroll.

3 possible approaches:
1) canvas + drawWindow (https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D#drawWindow%28%29), with the appropriate redraw on mozAfterPaint (I am not concerned about the performance here - I believe this will be smooth enough)
2) -moz-transform on the browser window
3) -moz-transform on a div that has a -moz-element(#browserwindow) background + -moz-crisp-edges (https://developer.mozilla.org/En/CSS/Image-rendering). Not sure about the perf compared to 2)

What do you guys think?
Do we need a feature page for that?

Comment 8

[Kevin Dangoor]

(In reply to Paul Rouget [:paul] from comment #7)
> We need to define a little better what we want to achieve here. Some
> thoughts:
> 
> We want a magnifier.

Do we?

(We probably do, but I'd like to be sure I understand what the users are trying to do with a magnifier in this context...)

I know that magnifiers are useful for the eye dropper part of a color picker, for example. In Photoshop & friends, you use the magnifier for close up detail work... changing pixels at a time. That doesn't seem *as* applicable here, since the actual changes are made in CSS and not visually.

What use cases do you have in mind?

> Do we need a feature page for that?

I'd say it depends on the effort involved.

Comment 9

[Paul Rouget [:paul]]

(In reply to Kevin Dangoor from comment #8)
> (In reply to Paul Rouget [:paul] from comment #7)
> > We need to define a little better what we want to achieve here. Some
> > thoughts:
> > 
> > We want a magnifier.
> 
> Do we?
> 
> (We probably do, but I'd like to be sure I understand what the users are
> trying to do with a magnifier in this context...)
> 
> I know that magnifiers are useful for the eye dropper part of a color
> picker, for example. In Photoshop & friends, you use the magnifier for close
> up detail work... changing pixels at a time. That doesn't seem *as*
> applicable here, since the actual changes are made in CSS and not visually.
> 
> What use cases do you have in mind?

A designer need to have a closer look at what he's working on: counting pixels (how many pixels between 2 divs), making sure elements are correctly aligned, make sure things have the right ratio, analyzing a color (is there a noise/texture? Any gradient), working on the box-shadows (does it go far enough? did I actually got rid of the blur?), understanding how a solid-3D border is built (how many rows of pixels? any blur?), …

(I personally zoom all the time while I am building a page or when I am designing a tool in Firefox, but with an external tool)

Comment 10

[Paul Rouget [:paul]]

Shorlander suggested something like that: http://cl.ly/0N1b1w1z342K0j2j1K0e

Comment 11

[Stephen Horlander [:shorlander]]

(In reply to Paul Rouget [:paul] from comment #10)
> Shorlander suggested something like that: http://cl.ly/0N1b1w1z342K0j2j1K0e

Just a thought. I spend a lot of my time in Photoshop like this: http://cl.ly/2S343F2w0o1P1N47422Y

But a magnifier, with a grid and maybe some info would be pretty awesome.

Comment 12

[Kevin Dangoor]

(In reply to Paul Rouget [:paul] from comment #10)
> Shorlander suggested something like that: http://cl.ly/0N1b1w1z342K0j2j1K0e

Nice!

I'll add a feature page for this, but that page will point back to this bug, so discussion can continue here.

Thanks for the details!

Comment 13

[Rob Campbell [:rc] (:robcee)]

I do think a lot of people doing pixel-level detail work would find this useful. I often use photoshop at extreme zooms, but I'm probably not the target audience.

Not sure I agree that this would be useful outside of a developer tools context but maybe.

I do think it's worth a feature page as it sounds like we have some designing to do.

Comment 14

[Kevin Dangoor]

Bare bones and unprioritized feature page here: https://wiki.mozilla.org/DevTools/Features/Magnifier

Comment 15

[Paul Rouget [:paul]]

Scratchpad prototype: https://gist.github.com/2145830

Comment 16

[Girish Sharma [:Optimizer]]

This can be very well a separate feature. With color picker, support to magnify chrome also (and not just content) resizable, dockable panel with zooming percent control too.

Comment 17

[Rob Campbell [:rc] (:robcee)]

we have an addon. Do we need this bug anymore?