Page MenuHomePhabricator

MobileFrontend overlay toolbar can have no top border in Chrome 69 on Android
Closed, ResolvedPublic

Description

Problem

With the latest version of Chrome on Android (69) the Chrome header and Android status bar are white by default. In some cases, e.g. when you are editing an article, there is no distinction between the bottom of the status bar and the top of our website. Previously the status bar was black by default so this wasn't an issue.

Solution

We can define a theme color in our site's manifest file so the status bar and Chrome header are no longer white. Our first choice was base90/#f8f9fa, however that color doesn't seem to be registering (our assumption is that it's too light) so we'll be going with our second choice of base80/#eaecf0 instead.

Patches exist:

QA steps

When loading the site on mobile, the Chrome should now appear non-white.
This should be verified by a designer and moved directly to sign off. No further testing is needed.

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 18 2018, 11:31 AM

This should probably be fixed upstream in MobileFrontend, as it applies to any overlay toolbar.

cc @Jdlrobson

Esanders renamed this task from VE mobile toolbar can have no top border on Android to MobileFrontend overlay toolbar can have no top border on Android.Sep 18 2018, 12:20 PM
Esanders updated the task description. (Show Details)
Esanders added a project: MobileFrontend.

Change 461116 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/MobileFrontend@master] Add inset shadow to overlay header on Android

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

This should probably be fixed upstream in MobileFrontend, as it applies to any overlay toolbar.
cc @Jdlrobson

VisualEditor is the only overlay that has a toolbar, so am a little confused. Can you expand on how this is a problem for existing overlays e.g. Talk/Searchoverlay, since the patch applies the rule to those too?

@Esanders can you provide more details & screenshots in the task description? From what I understand the toolbar on your phone is now white, and you noticed that there is no border between the toolbar and the top of the website. Are you also saying that a 1px border on the top of the header element isn't showing up on your phone?

Any overlay that uses a header will have it blend into the status bar, so the wikitext editor at least, and I assume there are other overlays that have headers.

Jdlrobson added a comment.EditedSep 18 2018, 7:18 PM

What if we used the existing manifest file to change the background color of the address bar in android? Wouldn't that solve the problem?

https://developers.google.com/web/fundamentals/web-app-manifest/

Edit: i see you are referring to the status bar not address bar, however it's worth noting the address bar already has a box shadow and the status bar also takes the background color in the manifest:


In case of bbc they use red but we could use black:

Another approach to this would be to use a slighty-off white background color (e.g. dont use #fff). This is what google.com does.

The easiest thing to do here is a config change:

converting

"wgMFManifestBackgroundColor": "#fff",

to

"wgMFManifestBackgroundColor": "#000",

This is the only reason it turned from black to white, so we should revert that change.

Esanders added a comment.EditedSep 19 2018, 5:34 PM

The web manifest is only used for installed web apps, and the background color property is only used for the splash screen.

We could change the theme color in web using <meta name="theme-color" content="#..."> but that changes the colour of the search bar as well as the status bar, which seems a bit extreme.

Change 461439 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Add theme-color meta tag to Minerva

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

but that changes the colour of the search bar as well as the status bar, which seems a bit extreme.

It doesn't seem more extreme to me than adding several lines of CSS that apply everywhere except iOS. The fact the status bar is no longer black (as you mentioned it was before) seems like a regression.

@Nirzar, @alexhollender I've loaded the code on staging if you'd like to try it out on an Android phone and approve the change: https://reading-web-staging.wmflabs.org/ - this changes the address and status bar from existing white to #222.

@Jdlrobson not sure if this was intended or not, but on staging I'm seeing the status bar + the browser header as black, which is a bit intense.

It's difficult for me to tell what else is going on, because my status bar is default black when I'm using Chrome...

@Jdlrobson not sure if this was intended or not, but on staging I'm seeing the status bar + the browser header as black, which is a bit intense.

Yes, this is what I was referring to when I said "extreme", not the technical approach :)

Jdlrobson added a comment.EditedSep 19 2018, 9:10 PM

Okay, some wires got crossed then :). I thought @Nirzar had approved the black color... :) anyway... that black can be changed to anything we want. As long as it's not #fff i believe it solves this issue in best way possible.

Here is a theme colour of #eee:

The color theme of #eee looks good to me. It seems like the standard practice is to make the status bar a darker version of the color used for the header, would that be possible? As in:

Here are how a few other people are handling it (some are doing custom colors, others aren't):

FacebookYelpPinterestTwitterRedditAmazon

Change 461694 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Default theme color is #eee

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

If I understand @alexhollender's last comment correctly, some of the sites (Facebook, Yelp, Pinterest) use not one, but two of their brand colors. #eee is not part of our color palette, I'd consider #eaecf0, see https://design.wikimedia.org/style-guide/visual-style_colors.html#base-colors

Sorry to delay this, I realize we're eager to get a fix out. I'm just going to run some options by Nirzar, which I will also post here, and should have a resolution tomorrow.

Esanders added a comment.EditedSep 21 2018, 1:42 PM

It seems like the standard practice is to make the status bar a darker version of the color used for the header, would that be possible? As in:

They're not doing this by choice - that was automatic behaviour prior to Chrome 69 which is why this is a new issue. There is only one colour you can specify, and Chrome generated the darker status bar itself. Since Chrome 69 the address bar and status bar are identical, and the default for the status bar is white, not black.

Chrome < 69Chrome 69
Esanders renamed this task from MobileFrontend overlay toolbar can have no top border on Android to MobileFrontend overlay toolbar can have no top border in Chrome 69 on Android.Sep 21 2018, 1:52 PM

Here it is with a theme colour of #eaecf0, as suggested by Volker:

Thanks for the clarification about what is possible @Esanders. This might seem like overkill but I want to consider all of our options here:

default (if we do nothing)
accent50
base90
base80
base30
base20
base10
base0

@Nirzar @Volker_E

base 90 works, doesn't take too much attention and focuses on our content

+1 to Base90

RHo added a subscriber: RHo.Sep 21 2018, 5:18 PM

+1 to Base90
FWIW in the next release of the Wikipedia Android app, we are updating the toolbar to use Base90 everywhere (see T197812):

Explore feed
Article view

Ok great, @Esanders or @Jdlrobson let's go with base90 (#f8f9fa).

Thanks

I don't think this example matches what is happening in VE. There is a single pixel border above the toolbar, which isn't present in my screenshots. The original issue was that there was no delineation when there was no border.

In fact on my local environment, it appears to ignore base90 as being too close to white, and leaves the header bar as white.

cmadeo added a subscriber: cmadeo.Sep 21 2018, 9:15 PM

+1 to Base90, but also a point against Accent50 is that Android will be removing the blue highlight from the feed soon

There is a single pixel border above the toolbar, which isn't present in my screenshots

Can we add a border?

In fact on my local environment, it appears to ignore base90 as being too close to white, and leaves the header bar as white.

hmm, not really sure what to do about that? Maybe we can try slightly increasing the darkness until we find the threshold?

Esanders added a comment.EditedSep 22 2018, 11:50 AM

Can we add a border?

If we add a border, then we don't need to bother with the theme colour. Also on OSes that do have borders you will have a double border (this is the reason I went with an inset shadow in my original patch).

We either need to use something that works with or without a border line draw by the OS (e.g. an inset shadow), or a darker theme colour that provides enough contrast to white i.e. closer to the border line colour.

Jon and I sat down yesterday and tried to figure out if there was a color close to base90 that would register. Turns out you have to get pretty close to base80 in order to get it to take, at which point it kinda just looks weird because it's just a shade lighter than our Wikipedia header. So after all we will move forward with the option @Esanders posted here T204691#4605772.

Jdlrobson updated the task description. (Show Details)

Change 461694 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Lighten default theme color

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

phuedx added a subscriber: phuedx.Sep 27 2018, 10:12 AM

☝️ I moved this task onto the board because it's been worked on by @Jdlrobson and @alexhollender. It looks like it's ready for signing off on too… Have I misunderstood the state of the task?

Two patches remain open. I'm happy to get https://gerrit.wikimedia.org/r/461439 reviewed but will lean on @Esanders and his team to confirm this resolves this bug.

Change 461439 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Add theme-color meta tag to Minerva

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

Live on reading web staging and the beta cluster. Take your pick!

Jdlrobson updated the task description. (Show Details)Oct 1 2018, 6:55 PM

Change 461116 abandoned by Jdlrobson:
Add inset shadow to overlay header on Android

Reason:
lemme know if this is the wrong action!

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

phuedx removed a subscriber: phuedx.Oct 4 2018, 10:36 AM
alexhollender added a project: Audiences-QA.

Looks great. Here are a few screenshots, including the editing view that prompted this task:

@Jdlrobson I'm not sure if this is relevant, however oddly the new status bar & chrome header color are inconsistently present on production:

Moving this to QA

alexhollender removed a project: Audiences-QA.
alexhollender added a subscriber: Ryasmeen.

Whoops, just saw the note to skip QA. Moving to sign off.

@Jdlrobson I'm not sure if this is relevant, however oddly the new status bar & chrome header color are inconsistently present on production:

Expected. HTML caching. It will not happen in about a week's time.

ovasileva closed this task as Resolved.Oct 8 2018, 3:42 PM

looks good - resolving.

Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptOct 8 2018, 3:42 PM
Volker_E removed a subscriber: gerritbot.