Page MenuHomePhabricator

Spike: Re-evaluate use of transforms in MobileFrontend
Closed, DeclinedPublicSpike

Description

In MobileFrontend we use the icon "arrow" in multiple places

  1. Points upwards in expanded sections
  2. Points downwards for collapsed sections
  3. In footer it points right for LTR languages
  4. Arrows pointing left and right in the ImageOverlay (but supplied by a new icon see T145479)

The arrow has 2 variants - gray and invert as in the footer the toggle takes different colors depending on the background colour of the last modified bar (whether it is fresh or not)

Using a transform as noted in T102154 lacks support in IE8 and Opera Mini. Because of this @bmansurov has proposed we rethink it.

We have several options to consider

  1. We could keep the status quo
  2. We could keep the status quo but formalise it in some way e.g. a modifier for mw-ui-icon that flips the icon in certain cases e.g. mw-ui-icon-flip
  3. Introduce new icons for the rotated states (this would mean 4 icons and any variants rather than 1)

3a) We could load these via JS to avoid impact to first paint.

  1. (insert your proposal here)

See also: T145479

Event Timeline

Jdlrobson updated the task description. (Show Details)
jhobs triaged this task as Medium priority.Nov 14 2016, 6:18 PM
jhobs edited projects, added Web-Team-Backlog (Design); removed Web-Team-Backlog.

We should talk about this, but it's more a technical decision than a design.

Jdlrobson added a subscriber: Nirzar.

My bad https://phabricator.wikimedia.org/T144411#3384626 is not quite right - this is a decision decision because...

..We don't load JS in IE8 or Opera Mini. Thus the only feature that is impacted by our current usage of transform is the footer (all the other features use JS).

The arrow is non-essential from my perspective.
The footer doesn't look broken without the arrow and is still functional:

Screen Shot 2017-07-06 at 11.48.07 AM.png (117×699 px, 15 KB)

@Nirzar do you think we should decline this task ?

What about the arrows in sections? do we hide them on Opera Mini and IE8?

@Nirzar yup. toggling will not work on these browsers.

@Jdlrobson is this task still relevant? If so, I'm wondering if it's a design task or more of an engineering task with potential design input?

Restricted Application changed the subtype of this task from "Task" to "Spike". · View Herald TranscriptJun 18 2019, 9:01 PM
Jdlrobson added a subscriber: Volker_E.

Talking to @Volker_E we've been trending towards CSS filters here. Opera Mini is the only browser we should care about here and support is 1.42%. We don't run JS in that browser so it's not relevant so let's decline.