Ubuntu
webbrowser-app package

[webapp-container] Header text becomes unreadable with a dark "theme-color"

Bug #1548573 reported by Michael Terry
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Canonical System Image
Fix Released
Medium
David Barth
Canonical System Image 11 "OTA11"
webapps-sprint
Fix Released
Medium
Alexandre Abreu
webapps-sprint sprint-19
webbrowser-app (Ubuntu)
Fix Released
Medium
Alexandre Abreu

Bug Description

If you install and open the app "reddit mobile" (redditmobile.mterry) [1], when it finishes loading, the header turns blue!

Screenshot attached. Is some part of the reddit css doing that?

[1] which should just be equivalent to running the command: "webapp-container --enable-back-forward --store-session-cookies --webappUrlPatterns=https?://m.reddit.com/* https://m.reddit.com %u"

current build number: 244
device name: mako
channel: ubuntu-touch/rc-proposed/bq-aquaris.en
last update: 2016-02-18 23:13:54
version version: 244
version ubuntu: 20160219
version device: 20160112
version custom: 20160201-5-vivid

Related branches

lp://staging/~abreu-alexandre/webbrowser-app/text-color-for-theme-color-webapps
Alberto Mardegan (community): Approve
PS Jenkins bot: Needs Fixing (continuous-integration)
Diff: 356 lines (+218/-10)
9 files modified
src/app/webcontainer/CMakeLists.txt (+1/-0)
src/app/webcontainer/Chrome.qml (+3/-0)
src/app/webcontainer/ColorUtils.js (+73/-0)
src/app/webcontainer/WebApp.qml (+10/-2)
src/app/webcontainer/webapp-container-helper.cpp (+40/-7)
src/app/webcontainer/webapp-container-helper.h (+10/-1)
tests/unittests/CMakeLists.txt (+2/-0)
tests/unittests/webapp-container-color-helper/CMakeLists.txt (+17/-0)
tests/unittests/webapp-container-color-helper/tst_WebappContainerColorTests.cpp (+62/-0)
Revision history for this message
Michael Terry (mterry) wrote :
Revision history for this message
Olivier Tilloy (osomon) wrote :

This is the intended behaviour: see bug #1477674 for details. The source of m.reddit.com has the following meta tag:

    <meta name="theme-color" content="#336699"/>

Changed in webbrowser-app (Ubuntu):
status: New → Invalid
Revision history for this message
Michael Terry (mterry) wrote :

Ah. Weird. Then I want to turn this bug into the fact that the text becomes unreadable.

From the theme-color spec [1]:
"""When using the page's "theme color", user agents MAY adjust the color in UA-defined ways to make it more suitable for particular uses. For example, if a UA intends to use the "theme color" as a background and display white text over it, it may use a darker variant of the "theme color" for that purpose, to ensure adequate contrast."""

So we could adjust the color as needed to keep the text readable. Or adjust the text color ourselves. But as you can see from the screenshot, it's currently not very usable.

[1] https://github.com/whatwg/meta-theme-color

Changed in webbrowser-app (Ubuntu):
status: Invalid → New
summary: - [webapp-container] Header turns blue?
+ [webapp-container] Header text becomes unreadable with a dark "theme-
+ color"
Revision history for this message
Alexandre Abreu (abreu-alexandre) wrote :

Yes it is a desired behavior that should be tweaked for those cases,

Alexandre Abreu (abreu-alexandre)
Changed in webbrowser-app (Ubuntu):
assignee: nobody → Alexandre Abreu (abreu-alexandre)
Alexandre Abreu (abreu-alexandre)
Changed in webapps-sprint:
milestone: none → sprint-19
assignee: nobody → Alexandre Abreu (abreu-alexandre)
Alexandre Abreu (abreu-alexandre)
Changed in webbrowser-app (Ubuntu):
status: New → In Progress
Changed in webapps-sprint:
status: New → In Progress
Alexandre Abreu (abreu-alexandre)
Changed in webbrowser-app (Ubuntu):
importance: Undecided → Medium
Changed in webapps-sprint:
importance: Undecided → Medium
Jean-Baptiste Lallement (jibel)
Changed in canonical-devices-system-image:
importance: Undecided → Medium
milestone: none → 11
status: New → Fix Committed
assignee: nobody → David Barth (dbarth)
Revision history for this message
Launchpad Janitor (janitor) wrote :

This bug was fixed in the package webbrowser-app - 0.23+16.04.20160405-0ubuntu1

---------------
webbrowser-app (0.23+16.04.20160405-0ubuntu1) xenial; urgency=medium

  * Add --open-external-url-in-overlay option to allow externals urls
    (not part of patterns) are opened in overlays instead of external
    browser (LP: #1548575)
  * Handle live updates to theme color meta tag and reflect them in the
    top bar background color (LP: #1550754)
  * Set address bar text color to a darker version of the theme color if
    one is defined in a webapp (LP: #1548573)

 -- Alexandre Abreu <email address hidden> Tue, 05 Apr 2016 15:42:59 +0000

Changed in webbrowser-app (Ubuntu):
status: In Progress → Fix Released
Alexandre Abreu (abreu-alexandre)
Changed in webapps-sprint:
status: In Progress → Fix Released
Pat McGowan (pat-mcgowan)
Changed in canonical-devices-system-image:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.
Subscribing...

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.