Closed Bug 1277858 Opened 3 years ago Closed 3 years ago
Change console input focus style
We discussed changing from the current dotted outline to make the ">>" in the input field change color as it gets focused
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 / email@example.com, 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
Review commit: https://reviewboard.mozilla.org/r/57640/diff/#index_header See other reviews: https://reviewboard.mozilla.org/r/57640/
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
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 firstname.lastname@example.org: https://hg.mozilla.org/integration/mozilla-inbound/rev/d35a3e8043bd adding more polish to console input focus style. r=bgrins
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]
You need to log in before you can comment on or make changes to this bug.