Last modified: 2014-10-14 13:43:53 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T73150, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 71150 - Use a new focus indicator on MediaWiki UI text fields
Use a new focus indicator on MediaWiki UI text fields
Status: PATCH_TO_REVIEW
Product: MediaWiki
Classification: Unclassified
MediaWiki UI (Other open bugs)
unspecified
All All
: Normal enhancement (vote)
: ---
Assigned To: Nobody - You can work on this!
:
Depends on:
Blocks: 69724
  Show dependency treegraph
 
Reported: 2014-09-22 22:46 UTC by May
Modified: 2014-10-14 13:43 UTC (History)
8 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments
Disabled, Normal, and Focus states (10.30 KB, image/png)
2014-09-22 22:52 UTC, May
Details
Disabled, Normal, and Focus states (16.93 KB, image/png)
2014-09-22 22:56 UTC, May
Details
Current focus indicator in Firefox with caret showing (3.83 KB, image/png)
2014-09-22 23:25 UTC, Matthew Flaschen
Details
new password field (2.40 KB, image/png)
2014-10-14 06:06 UTC, Florian
Details
old password field (looks much better in my opinion) (2.40 KB, image/png)
2014-10-14 06:06 UTC, Florian
Details

Description May 2014-09-22 22:46:03 UTC

    
Comment 1 Gerrit Notification Bot 2014-09-22 22:52:29 UTC
Change 162153 had a related patch set uploaded by Prtksxna:
inputs.less: Change focus state

https://gerrit.wikimedia.org/r/162153
Comment 2 May 2014-09-22 22:52:58 UTC
Created attachment 16538 [details]
Disabled, Normal, and Focus states
Comment 3 Matthew Flaschen 2014-09-22 22:55:16 UTC
There is a spec at https://trello.com/c/MC8ovuyw/2-advanced-input-fields .  I guess the issue is that this may need to be updated because it's out of sync with what's implemented.

Note that Prateek narrowed this to only cover text fields.
Comment 4 May 2014-09-22 22:56:04 UTC
Created attachment 16539 [details]
Disabled, Normal, and Focus states
Comment 5 May 2014-09-22 23:11:47 UTC
There was a few issues with the previous focus state on text field. 

When the text field becomes activated, the blue bar hides the blinking cursor.
Comment 6 Jon 2014-09-22 23:13:06 UTC
Shahyar, can you please take a look at the patchset?
Comment 7 Matthew Flaschen 2014-09-22 23:23:53 UTC
(In reply to May from comment #5)
> When the text field becomes activated, the blue bar hides the blinking
> cursor.

What browser does this happen in?  I can see both in Firefox and Chromium.

It's true the caret (blinking cursor) may not be quite as noticeable as it would be without the blue bar, but I'm not sure if this a problem.

I confirmed with Prateek this is an enhancement bug to change the focus indicator, not a doc bug.
Comment 8 Matthew Flaschen 2014-09-22 23:25:54 UTC
Created attachment 16541 [details]
Current focus indicator in Firefox with caret showing
Comment 9 Florian 2014-10-14 06:06:17 UTC
Created attachment 16758 [details]
new password field

Ehh, sorry, but i don't like the new indicator :/ I like the decent progressive bar at the left side, which identifies the focus to an text field. With this patch we become a border around the whole text field? I missed the patch for the buttons, and saw the new focus around the buttons on my dev-wiki and wasn't really enthusiastic. The main reason is, that it is too much of indication (look the screenshots). Just my opinion :)

(P.S.: And i see no value of the new indicator?)
Comment 10 Florian 2014-10-14 06:06:43 UTC
Created attachment 16759 [details]
old password field (looks much better in my opinion)
Comment 11 Prateek Saxena 2014-10-14 13:37:39 UTC
(In reply to Florian in comment #9)

> The main reason is, that it is too much of indication (look the screenshots)

Having a border all around the element is also the default way some browsers show focus on  buttons, inputs and links. There is no consistent API to style the outline they already provide which is why we have to implement it ourselves. Copying some points from the commit message of the patch - 

- Make focus state consistent across UI controls (analogous update for buttons is already merged and checkboxes coming soon).
- Support for browsers that don't support box-shadow by making the border the same color.
Comment 12 Florian 2014-10-14 13:43:53 UTC
(In reply to Prateek Saxena from comment #11)
> There is no consistent API to
> style the outline they already provide which is why we have to implement it
> ourselves. 

That can be right, but doesn't change my opnion, that i more like the actual indicator (that's why i posted it here and not in gerrit, the change itself looks (technically) ok for me).

Maybe there is a way to implement the actual indicator so, that it works in all browsers? :) (to be clear: i just want to say, that i like the actual (old) indicator much more, and this is, of couse, a personal opinion).

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links