"Add watch expression" label could be an input instead.

RESOLVED WONTFIX

Status

()

Firefox
Developer Tools: Debugger
P3
normal
RESOLVED WONTFIX
5 years ago
5 years ago

People

(Reporter: Optimizer, Unassigned)

Tracking

Trunk
x86_64
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

5 years ago
Instead of having a static label which has no use other then spawning an input box, it should be converted to an input box with a placeholder text of "Type expression to watch" (or the existing string itself).

This will ill 2 birds with one arrow:

1) The UI will be consistent with the rest of the variables view. No exceptional white label while every other heading is in dark background and there is a variables filter textbox with a dark UI just after that white portion. After this change, ther will be two consistent looking UI textboxes next to each other :)

2) It will allow dragging and dropping of expression directly to the input box, making is easier to add an expression to watch. Right now, we select the expression, Right click, select the option of "Selection to watch expression" (3 steps)
Sounds like a good idea to me.
(In reply to Girish Sharma [:Optimizer] from comment #0)
> 1) The UI will be consistent with the rest of the variables view. No
> exceptional white label while every other heading is in dark background and
> there is a variables filter textbox with a dark UI just after that white
> portion. After this change, ther will be two consistent looking UI textboxes
> next to each other :)

The filter box is hidden when the variables view doesn't contain any variables. Also, having two textboxes stacked one on top of each other feels a bit weird to me (especially if they look the same, i.e. rounded corners, same colors etc.), so I'm not sure I like the idea. The while input we have now (with the > marker preceding it) is made to resemble the webconsole's input.

> 2) It will allow dragging and dropping of expression directly to the input
> box, making is easier to add an expression to watch. Right now, we select
> the expression, Right click, select the option of "Selection to watch
> expression" (3 steps)

Or you can simply use the keyboard shortcut, accel+shift+e :)

I agree that the whole watch expressions handling needs some theming love, but the aspect clumsiness will not be an issue anymore when we have a light/dark theme switch. And paul's working on that just now afaik :)
(Reporter)

Comment 3

5 years ago
(In reply to Victor Porof [:vp] from comment #2)
> (In reply to Girish Sharma [:Optimizer] from comment #0)
> > 1) The UI will be consistent with the rest of the variables view. No
> > exceptional white label while every other heading is in dark background and
> > there is a variables filter textbox with a dark UI just after that white
> > portion. After this change, ther will be two consistent looking UI textboxes
> > next to each other :)
> 
> The filter box is hidden when the variables view doesn't contain any
> variables. Also, having two textboxes stacked one on top of each other feels
> a bit weird to me (especially if they look the same, i.e. rounded corners,
> same colors etc.), so I'm not sure I like the idea. The while input we have
> now (with the > marker preceding it) is made to resemble the webconsole's
> input.

I agree that two back to back similar looking textboxes will not be the perfect UI, but atleast there will be no useless elements. The styling of Debugger is already much different from Web Console, having just one element with the same styling doesn't make much sense to me. If at all that similarity is to be maintained, it can still be done as directly showing that input box with the placeholder text, instead of having a static useless label.

> > 2) It will allow dragging and dropping of expression directly to the input
> > box, making is easier to add an expression to watch. Right now, we select
> > the expression, Right click, select the option of "Selection to watch
> > expression" (3 steps)
> 
> Or you can simply use the keyboard shortcut, accel+shift+e :)

Yes, if you are working using keyboards only then that is the easiest way (given that one remembers all the shortcuts). But if the selection was made using mouse, then the switch to keyboard is also not a good UX.
(In reply to Girish Sharma [:Optimizer] from comment #3)
> 
> I agree that two back to back similar looking textboxes will not be the
> perfect UI, but atleast there will be no useless elements.

I don't understand why you say it is useless.

For a mouse-heavy user's perspective:
* with the current approach: click on the label, a focused textbox appears, you can immediately start typing the expression
* with your proposed approach: click on the textbox, the textbox is focused, you can start typing the expression

The exact same number of steps are required in both cases.

For a keyboard-heavy user's perspective:
* with the current approach: accel+shift+e, start typing
* with your approach: ditto

Again, the exact same number of steps are required in both cases.

I would even argue that having a label placeholder instead of a textbox 1. preserves space and 2. makes the two separate use-paths (add an expression vs. search for variables) very visually distinguishable and no extra brain processing is wasted on figuring out "which of the two textboxes I need to click?".

> Debugger is already much different from Web Console, having just one element
> with the same styling doesn't make much sense to me.

The idea is that elements with equal or similar functionality should look and behave the same, nothing more, nothing less.

> But if the selection was made
> using mouse, then the switch to keyboard is also not a good UX.

Most users equally combine the use of mouse and keyboard shortcuts.
To each his own.
(Reporter)

Comment 5

5 years ago
(In reply to Victor Porof [:vp] from comment #4)
> (In reply to Girish Sharma [:Optimizer] from comment #3)
> > 
> > I agree that two back to back similar looking textboxes will not be the
> > perfect UI, but atleast there will be no useless elements.
> 
> I don't understand why you say it is useless.

Because its a 100% width element with functionality of a button. It is taking up space.

> For a mouse-heavy user's perspective:
> * with the current approach: click on the label, a focused textbox appears,
> you can immediately start typing the expression
> * with your proposed approach: click on the textbox, the textbox is focused,
> you can start typing the expression
> 
> The exact same number of steps are required in both cases.
> 
> For a keyboard-heavy user's perspective:
> * with the current approach: accel+shift+e, start typing
> * with your approach: ditto
> 
> Again, the exact same number of steps are required in both cases.

You are forgetting that one use case is only possible by my approach. Dragging and dropping of selected text to be watched.

> I would even argue that having a label placeholder instead of a textbox 1.
> preserves space and 2. makes the two separate use-paths (add an expression
> vs. search for variables) very visually distinguishable and no extra brain
> processing is wasted on figuring out "which of the two textboxes I need to
> click?".

for 1 : Space will be preserved using my approach. In current approach, there is that label "Add watch expression" and then their is the input that is vertically below. Total vertical space occupied is around 46px for me.
In my approach, there will be only 1 textbox with the placeholder text. Total vertical space : 24px

for 2: To make the use path visually distinguishable, the UI for the input box corresponding to the watch expression can still remain exactly same. Nothing will change except for the fact that there is no extra label.

> > Debugger is already much different from Web Console, having just one element
> > with the same styling doesn't make much sense to me.
> 
> The idea is that elements with equal or similar functionality should look
> and behave the same, nothing more, nothing less.

Agreed.
(In reply to Girish Sharma [:Optimizer] from comment #5)

> for 2: To make the use path visually distinguishable, the UI for the input
> box corresponding to the watch expression can still remain exactly same.
> Nothing will change except for the fact that there is no extra label.
> 

In that case, ok.
(In reply to Victor Porof [:vp] from comment #6)
> (In reply to Girish Sharma [:Optimizer] from comment #5)
> 
> > for 2: To make the use path visually distinguishable, the UI for the input
> > box corresponding to the watch expression can still remain exactly same.
> > Nothing will change except for the fact that there is no extra label.
> > 
> 
> In that case, ok.

We'll just use the label as a placeholder text, I presume? Keeping the > marker as it is now?
(Reporter)

Comment 8

5 years ago
(In reply to Panos Astithas [:past] from comment #7)
> (In reply to Victor Porof [:vp] from comment #6)
> > (In reply to Girish Sharma [:Optimizer] from comment #5)
> > 
> > > for 2: To make the use path visually distinguishable, the UI for the input
> > > box corresponding to the watch expression can still remain exactly same.
> > > Nothing will change except for the fact that there is no extra label.
> > > 
> > 
> > In that case, ok.
> 
> We'll just use the label as a placeholder text, I presume? Keeping the >
> marker as it is now?

Yup , looks good to me :)
Discussed this a bit during triage. We didn't feel strongly enough about this to keep it around and risk someone spending time implementing it.
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Priority: -- → P3
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.