Closed Bug 1277858 Opened 3 years ago Closed 3 years ago

Change console input focus style

Categories

(DevTools :: Console, defect)

46 Branch
defect
Not set

Tracking

(firefox49 fixed)

RESOLVED FIXED
Firefox 49
Tracking Status
firefox49 --- fixed

People

(Reporter: bgrins, Assigned: yzen)

References

Details

Attachments

(2 files)

We discussed changing from the current dotted outline to make the ">>" in the input field change color as it gets focused
See Also: → 1273345
Assignee: nobody → yzenevich
Status: NEW → ASSIGNED
This would violate at least one WCAG 2.0 criterium: Never communicate a state or information by color alone.
Implementation note:
Once this is SVG we can get rid of the --command-line-image-2x variable.  So instead we'd have: --command-line-image and --command-line-image-focus.  And Firebug theme is already using SVG
(In reply to Marco Zehe (:MarcoZ) from comment #1)
> This would violate at least one WCAG 2.0 criterium: Never communicate a
> state or information by color alone.

What about the blinking cursor in the input box?  Does that communicate focus on it's own?
(In reply to Helen V. Holmes (:helenvholmes) (:✨)(pls ni?) from comment #5)
> Created attachment 8759740 [details]
> command-line.svg

So there are 4 states here that can be addressed through the URL:

command-line.svg#light-theme
command-line.svg#light-theme-focus
command-line.svg#dark-theme
command-line.svg#dark-theme-focus

Looks like a couple of other places use the old commandline-icon.png / commandline-icon@2x.png, so let's not worry about deleting the file here.
For Firebug, we can keep the current replacement image for --command-line-image and --command-line-image-focus
Attachment #8759767 - Flags: ui-review?(hholmes)
Comment on attachment 8759767 [details]
Bug 1277858 - adding more polish to console input focus style.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/57640/diff/1-2/
Comment on attachment 8759767 [details]
Bug 1277858 - adding more polish to console input focus style.

https://reviewboard.mozilla.org/r/57640/#review54466

This looks good to me, thanks for doing the cleanup of the old files too.  Only issue I see is with GCLI, I'm not seeing the icon in front of the prompt

::: devtools/client/themes/commandline.inc.css
(Diff revision 2)
>    -moz-box-ordinal-group: 0;
>    width: 16px;
>    height: 16px;
>    margin: 0 2px;
> -  background-image: url("chrome://devtools/skin/images/commandline-icon.png");
> +  background-image: var(--command-line-image);
> -  background-position: 0 center;

I'm not seeing the input prompt icon when opening gcli (Shift+F2).  maybe the positioning is still needed
Attachment #8759767 - Flags: review?(bgrinstead)
Comment on attachment 8759767 [details]
Bug 1277858 - adding more polish to console input focus style.

https://reviewboard.mozilla.org/r/57640/#review54476

Just hadn't built the GCLI code - it's working as expected
Attachment #8759767 - Flags: review+
Comment on attachment 8759767 [details]
Bug 1277858 - adding more polish to console input focus style.

Got a verbal OK from Helen for proceeding
Attachment #8759767 - Flags: ui-review?(hholmes) → ui-review+
Pushed by yura.zenevich@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/d35a3e8043bd
adding more polish to console input focus style. r=bgrins
https://hg.mozilla.org/mozilla-central/rev/d35a3e8043bd
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 49
I have reproduced this bug with Nightly 49.0a1 (2016-06-03) on Windows 7 , 64 Bit !

This bug's fix is verified with latest Beta !

Build   ID : 20160912134115
User Agent : Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:49.0) Gecko/20100101 Firefox/49.0 

 [bugday-20160914]
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.