Page MenuHomePhabricator
Create Task
Maniphest T110051

Reconsider Flow's use of .mw-ui-hovericon (dropdown menu items that gain progressive/constructive/destructive styling on hover)
Closed, ResolvedPublic
Actions

Description

I think we should reconsider Flow's use of dropdown menu items that gain progressive/constructive/destructive styling on hover, implemented using the .mw-ui-hovericon CSS class.

Per T108086, the progressive/constructive/destructive type of action is impossible to see on mobile devices, which do not have hover. Per T108086#1529019 it is okay to always make the type visible. In case this would make the interface too busy, I think it would be okay to just drop the colors. OOjs UI dropdowns do not let you set flags on individual options.

If we decide to do it, we could drop the addition from T97816 from the RL module definitions for OOjs UI.

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Revert "Support changing icon variants on hover"mediawiki/coremaster+2 -5
Remove unique, inconsistent treatment of menu itemsmediawiki/extensions/Flowmaster+127 -127
Customize query in gerrit

Related Objects

Event Timeline

matmarex created this task.Aug 24 2015, 3:24 PM
matmarex raised the priority of this task from to Needs Triage.
matmarex updated the task description. (Show Details)
matmarex added a project: StructuredDiscussions.
matmarex added subscribers: matmarex, Catrope.
Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptAug 24 2015, 3:24 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Catrope triaged this task as Medium priority.Aug 26 2015, 11:25 PM
• DannyH moved this task from Untriaged to Near-Term Interest on the Collaboration-Team-Triage board.Aug 26 2015, 11:25 PM
Catrope added a subscriber: Pginer-WMF.Aug 26 2015, 11:25 PM
matmarex mentioned this in rMW261737cb70f3: ResourcesOOUI: Remove now-unnecessary selector.Aug 26 2015, 11:41 PM
• DannyH added a project: OKR-Work.Aug 27 2015, 7:09 PM
• DannyH set Security to None.
matmarex mentioned this in T125292: Optimize how we load OOUI in MediaWiki.Feb 1 2016, 9:51 PM
Volker_E subscribed.Apr 1 2016, 11:16 PM
Volker_E mentioned this in T166560: Design (Menu) Option component.Dec 5 2017, 1:30 AM
Volker_E assigned this task to Pginer-WMF.EditedDec 5 2017, 1:47 AM
Volker_E added a subscriber: Jdlrobson.

Given the extra code that is delivered to all users for this little effect, I'm for removing this special treatment as well and just go for a background-color change on :hover.

This is the current visual treatment:

image.png (288×169 px, 13 KB)

Please notice that both options (“Edit title” & “History”) are in :hover state. We currently don't apply the same treatment on different options per menu!
Compare OOUI's DropdownWidget treatment (last item is hovered)
image.png (255×656 px, 21 KB)

Exemplified code from CSS output on 393851

.oo-ui-image-invert.oo-ui-icon-alert, .mw-ui-icon-alert-invert:before,
/* Hack for Flow, see T110051 */
.mw-ui-hovericon:hover .mw-ui-icon-alert-invert-hover:before,
.mw-ui-hovericon.mw-ui-icon-alert-invert-hover:hover:before {
	background-image: url(/w/load.php?modules=oojs-ui.styles.icons-alerts&image=alert&variant=invert&format=rasterized&lang=en&skin=minerva);
	background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22UTF-8%22%3F%3E%0A%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22%23fff%22%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 id=%22point%22 d=%22M11 16h2v2h-2z%22/%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 id=%22stroke%22 d=%22M13.516 10h-3L11 15h2z%22/%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 id=%22triangle%22 d=%22M12.017 5.974L19.537 19H4.497l7.52-13.026m0-2.474c-.545 0-1.09.357-1.5 1.07L2.53 18.403C1.705 19.833 2.38 21 4.03 21H20c1.65 0 2.325-1.17 1.5-2.6L13.517 4.575c-.413-.715-.956-1.072-1.5-1.072z%22/%3E%0A%3C/g%3E%3C/svg%3E%0A");
	background-image: -o-linear-gradient(transparent, transparent), url(/w/load.php?modules=oojs-ui.styles.icons-alerts&image=alert&variant=invert&format=rasterized&lang=en&skin=minerva);
}

.oo-ui-image-progressive.oo-ui-icon-alert, .mw-ui-icon-alert-progressive:before,
/* Hack for Flow, see T110051 */
.mw-ui-hovericon:hover .mw-ui-icon-alert-progressive-hover:before,
.mw-ui-hovericon.mw-ui-icon-alert-progressive-hover:hover:before {
	background-image: url(/w/load.php?modules=oojs-ui.styles.icons-alerts&image=alert&variant=progressive&format=rasterized&lang=en&skin=minerva);
	background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22UTF-8%22%3F%3E%0A%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22%2336c%22%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 id=%22point%22 d=%22M11 16h2v2h-2z%22/%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 id=%22stroke%22 d=%22M13.516 10h-3L11 15h2z%22/%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 id=%22triangle%22 d=%22M12.017 5.974L19.537 19H4.497l7.52-13.026m0-2.474c-.545 0-1.09.357-1.5 1.07L2.53 18.403C1.705 19.833 2.38 21 4.03 21H20c1.65 0 2.325-1.17 1.5-2.6L13.517 4.575c-.413-.715-.956-1.072-1.5-1.072z%22/%3E%0A%3C/g%3E%3C/svg%3E%0A");
	background-image: -o-linear-gradient(transparent, transparent), url(/w/load.php?modules=oojs-ui.styles.icons-alerts&image=alert&variant=progressive&format=rasterized&lang=en&skin=minerva);
}

.oo-ui-image-warning.oo-ui-icon-alert, .mw-ui-icon-alert-warning:before,
/* Hack for Flow, see T110051 */
.mw-ui-hovericon:hover .mw-ui-icon-alert-warning-hover:before,
.mw-ui-hovericon.mw-ui-icon-alert-warning-hover:hover:before {
	background-image: url(/w/load.php?modules=oojs-ui.styles.icons-alerts&image=alert&variant=warning&format=rasterized&lang=en&skin=minerva);
	background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22UTF-8%22%3F%3E%0A%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22%23ff5d00%22%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 id=%22point%22 d=%22M11 16h2v2h-2z%22/%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 id=%22stroke%22 d=%22M13.516 10h-3L11 15h2z%22/%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 id=%22triangle%22 d=%22M12.017 5.974L19.537 19H4.497l7.52-13.026m0-2.474c-.545 0-1.09.357-1.5 1.07L2.53 18.403C1.705 19.833 2.38 21 4.03 21H20c1.65 0 2.325-1.17 1.5-2.6L13.517 4.575c-.413-.715-.956-1.072-1.5-1.072z%22/%3E%0A%3C/g%3E%3C/svg%3E%0A");
	background-image: -o-linear-gradient(transparent, transparent), url(/w/load.php?modules=oojs-ui.styles.icons-alerts&image=alert&variant=warning&format=rasterized&lang=en&skin=minerva);
}

.oo-ui-image-invert.oo-ui-icon-bell, .mw-ui-icon-bell-invert:before,
/* Hack for Flow, see T110051 */
.mw-ui-hovericon:hover .mw-ui-icon-bell-invert-hover:before,
.mw-ui-hovericon.mw-ui-icon-bell-invert-hover:hover:before {
	background-image: url(/w/load.php?modules=oojs-ui.styles.icons-alerts&image=bell&variant=invert&format=rasterized&lang=en&skin=minerva);
	background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22UTF-8%22%3F%3E%0A%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22%23fff%22%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 d=%22M17.5 13V8c0-3-2.3-5-5.5-5S6.5 5 6.5 8v5c0 2 0 3-2 3v1h15v-1c-2 0-2-1-2-3zM12 19H9c0 1 1.6 2 3 2s3-1 3-2h-3z%22/%3E%0A%3C/g%3E%3C/svg%3E%0A");
	background-image: -o-linear-gradient(transparent, transparent), url(/w/load.php?modules=oojs-ui.styles.icons-alerts&image=bell&variant=invert&format=rasterized&lang=en&skin=minerva);
}

@Pginer-WMF Your input please!

Volker_E added a project: UI-Standardization-Kanban.Dec 5 2017, 1:47 AM
Restricted Application added a project: UI-Standardization. · View Herald TranscriptDec 5 2017, 1:47 AM
Pginer-WMF added a comment.Dec 5 2017, 11:46 AM
In T110051#3811366, @Volker_E wrote:

@Pginer-WMF Your input please!

I'm not familiar with the rationale of such design decision. I can guess it was aligned with the old way we were assigning colors to actions with the constructive/progressive/destructive metaphor we no longer follow on buttons.
I don't think this is very helpful right now. In the example, elements highlighted in blue are those potentially modifying information. But those (a) are not necessarily the primary acton (what we use blue for nowadays), and (b) users may associate blue text as side-effect-free actions based on the semantics of links (making the opposite association harder).

So I think that the distinction leaves too much for the user to figure out and may cause more confusion than help the user. So I'm ok in removing it.

Volker_E claimed this task.Dec 5 2017, 11:54 PM
Volker_E added a subscriber: Mooeypoo.

Thanks @Pginer-WMF – that helps to move this forward best-possibly!

Two URLs with current usage of the affected list:

None of both lists would be differently affected than with our agreement above!

gerritbot subscribed.Dec 6 2017, 12:15 AM

Change 395674 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Flow@master] Remove unique, inconsistent treatment of menu items

https://gerrit.wikimedia.org/r/395674

gerritbot added a project: Patch-For-Review.Dec 6 2017, 12:15 AM
gerritbot added a comment.Dec 6 2017, 12:33 AM

Change 395680 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Revert "Support changing icon variants on hover"

https://gerrit.wikimedia.org/r/395680

gerritbot added a comment.Dec 6 2017, 1:59 AM

Change 395674 merged by jenkins-bot:
[mediawiki/extensions/Flow@master] Remove unique, inconsistent treatment of menu items

https://gerrit.wikimedia.org/r/395674

ReleaseTaggerBot added a project: MW-1.31-release-notes (WMF-deploy-2017-12-12 (1.31.0-wmf.12)).Dec 6 2017, 2:00 AM
Volker_E reassigned this task from Volker_E to Etonkovidova.Dec 6 2017, 2:16 AM

Elena, over to you for QA. :) Result should feature only background-color change on :hover of those items and no other change in those three places.

gerritbot added a comment.Dec 6 2017, 2:19 AM

Change 395680 merged by jenkins-bot:
[mediawiki/core@master] Revert "Support changing icon variants on hover"

https://gerrit.wikimedia.org/r/395680

Volker_E mentioned this in T181108: Reconsider loading icon packs in enableOOUI for optimising critical rendering path.Dec 7 2017, 6:31 AM
Etonkovidova added a comment.Dec 12 2017, 12:24 AM

Checked in betalabs for items on

Overflow menu in topic title & overflow menu in `.flow-post-main

The discrepancy in on-hover states has been eliminated; also, the long-standing issue T132648: [minor]: 'Mark as resolve' and 'Reopen topic' have checkmark icon black was resolved too with this ticket.

Etonkovidova mentioned this in T132648: [minor]: 'Mark as resolve' and 'Reopen topic' have checkmark icon black.Dec 12 2017, 12:27 AM
Volker_E closed this task as Resolved.Dec 12 2017, 9:07 PM

Yes! :)

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits