destructive styling on hover)
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	matmarex
	Aug 24 2015, 3:24 PM

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

	Subject	Repo	Branch	Lines +/-
	Revert "Support changing icon variants on hover"	mediawiki/core	master	+2 -5
	Remove unique, inconsistent treatment of menu items	mediawiki/extensions/Flow	master	+127 -127

Customize query in gerrit

Related Objects

Mentioned In: T132648: [minor]: 'Mark as resolve' and 'Reopen topic' have checkmark icon black
T181108: Reconsider loading icon packs in enableOOUI for optimising critical rendering path
T166560: Design (Menu) Option component
T125292: Optimize how we load OOUI in MediaWiki
rMW261737cb70f3: ResourcesOOUI: Remove now-unnecessary selector
Mentioned Here: T132648: [minor]: 'Mark as resolve' and 'Reopen topic' have checkmark icon black
T97816: Support icons changing color on hover in MediaWiki's use of OOUI
T108086: Progressive/constructive/destructive frameless buttons in MW theme have no colour until hovered

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

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:

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)

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

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.

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

Two URLs with current usage of the affected list:

https://www.mediawiki.org/wiki/Manual_talk:Coding_conventions/CSS “…” Overflow menu in topic title & overflow menu in `.flow-post-main
https://www.mediawiki.org/w/index.php?title=Talk:Structured_Discussions&action=history “(hide| delete|etc)” line at the end of each history line – thanks, @Mooeypoo – items are hidden anyways

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

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

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

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

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.

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

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

Yes! :)

	F11183696: image.png
	Dec 5 2017, 1:47 AM

	F11183717: image.png
	Dec 5 2017, 1:47 AM

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

Description

Details

Related Objects

Event Timeline

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