Merge lp:~abreu-alexandre/webbrowser-app/text-color-for-theme-color-webapps into lp:webbrowser-app

[Alexandre Abreu]

Set address bar text color to a darker version of the theme color if one is defined in a webapp

Set address bar text color to a darker version of the theme color if one is defined in a webapp

[Michael Terry (mterry)]

What about a black theme color?

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1361
http://jenkins.qa.ubuntu.com/job/webbrowser-app-ci/2631/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/6619
    SUCCESS: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-amd64-ci/1384
    SUCCESS: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-armhf-ci/1384
        deb: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-armhf-ci/1384/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-i386-ci/1384
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-touch/5026
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/6630
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/6630/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/27868

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/webbrowser-app-ci/2631/rebuild

review: Needs Fixing (continuous-integration)

[Alexandre Abreu (abreu-alexandre)]

> What about a black theme color?

updated to be a bit more clever about the color choice,

[lp:~abreu-alexandre/webbrowser-app/text-color-for-theme-color-webapps]

1369. By Alexandre Abreu on 2016-02-29

Set address bar text color to a darker version of the theme color if one is defined in a webapp

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1369
http://jenkins.qa.ubuntu.com/job/webbrowser-app-ci/2648/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/6679/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-amd64-ci/1401/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-armhf-ci/1401/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-i386-ci/1401/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/6690/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/webbrowser-app-ci/2648/rebuild

review: Needs Fixing (continuous-integration)

[lp:~abreu-alexandre/webbrowser-app/text-color-for-theme-color-webapps]

1370. By Alexandre Abreu on 2016-04-04

Fix container color unit test running in jenkins env (no xcb)

[Alberto Mardegan (mardy)]

A few minor issues inline.

review: Needs Information

[lp:~abreu-alexandre/webbrowser-app/text-color-for-theme-color-webapps]

1371. By Alexandre Abreu on 2016-04-05

Tweaks

[Alexandre Abreu (abreu-alexandre)]

Updates to address comments (see reply to the QColor one)

[lp:~abreu-alexandre/webbrowser-app/text-color-for-theme-color-webapps]

1372. By Alexandre Abreu on 2016-04-05

Allow #NNN to be treated as #RGB to account for CSS & QColor supported behavior

[Alberto Mardegan (mardy)]

LGTM.

review: Approve

=== modified file 'src/app/webcontainer/CMakeLists.txt'
--- src/app/webcontainer/CMakeLists.txt	2016-03-16 15:03:44 +0000
+++ src/app/webcontainer/CMakeLists.txt	2016-04-05 15:38:49 +0000
@@ -30,6 +30,7 @@
 target_link_libraries(${WEBAPP_CONTAINER}
     Qt5::Core
     Qt5::DBus
+    Qt5::Gui
     Qt5::Qml
     Qt5::Quick
     Qt5::Sql

=== modified file 'src/app/webcontainer/Chrome.qml'
--- src/app/webcontainer/Chrome.qml	2015-08-10 15:22:00 +0000
+++ src/app/webcontainer/Chrome.qml	2016-04-05 15:38:49 +0000
@@ -25,6 +25,7 @@
 
     property bool navigationButtonsVisible: false
     property bool accountSwitcher: false
+    property alias chromeTextLabelColor: chromeTextLabel.color
 
     signal chooseAccount()
 
@@ -90,6 +91,8 @@
         }
 
         Label {
+            id: chromeTextLabel
+
             anchors {
                 left: faviconContainer.right
                 right: reloadButton.left

=== added file 'src/app/webcontainer/ColorUtils.js'
--- src/app/webcontainer/ColorUtils.js	1970-01-01 00:00:00 +0000
+++ src/app/webcontainer/ColorUtils.js	2016-04-05 15:38:49 +0000
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2016 Canonical Ltd.
+ *
+ * This file is part of webbrowser-app.
+ *
+ * webbrowser-app is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * webbrowser-app is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * Returns the color which has the most contrast with a base color.
+ *
+ * The contrast is based on the contrast ration found definition found here:
+ * https://www.w3.org/TR/WCAG20/#contrast-ratiodef
+ *
+ * @param baseColor a string with format <int>,<int>,<int> corresponding to the base color
+ * @param darkenedBaseColor the darker version of the base color
+ * @param lightenedBaseColor the lighter version of the base color
+ * @return defaultLightenColor or defaultDarkenColor depending on better contrast
+ *         color string for special cases ("white", "black")
+ */
+
+function getMostConstrastedColor(
+        baseColor,
+        darkenedBaseColor,
+        lightenedBaseColor) {
+    function toLuminanceFactor(cc) {
+        return (cc <= 0.03928)
+                ? (cc / 12.92)
+                : Math.pow(((cc + 0.055) / 1.055), 2.4)
+    }
+    function getRelativeLuminance(c) {
+        return 0.2126 * toLuminanceFactor(c.r)
+                + 0.7152 * toLuminanceFactor(c.g)
+                + 0.0722 * toLuminanceFactor(c.b)
+    }
+    function getContrastRatio(lighterColorLuminance, darkerColorLuminance) {
+        return (lighterColorLuminance + 0.05) / (darkerColorLuminance + 0.05)
+    }
+    var components = baseColor.split(",")
+
+    // special case for black
+    if (components[0].trim() === "0"
+            && components[1].trim() === "0"
+            && components[2].trim() === "0") {
+        return "white"
+    }
+    if (components[0].trim() === "255"
+            && components[1].trim() === "255"
+            && components[2].trim() === "255") {
+        return "black"
+    }
+
+    var color = {
+        r: parseInt(components[0])/255,
+        g: parseInt(components[1])/255,
+        b: parseInt(components[2])/255
+    }
+    var CONTRAST_LIGHT_ITEM_THRESHOLD = 3.0
+    if (getContrastRatio(0.0, getRelativeLuminance(color)) >= CONTRAST_LIGHT_ITEM_THRESHOLD) {
+        return darkenedBaseColor
+    }
+    return lightenedBaseColor
+}

=== modified file 'src/app/webcontainer/WebApp.qml'
--- src/app/webcontainer/WebApp.qml	2016-02-09 17:04:23 +0000
+++ src/app/webcontainer/WebApp.qml	2016-04-05 15:38:49 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2013-2015 Canonical Ltd.
+ * Copyright 2013-2016 Canonical Ltd.
  *
  * This file is part of webbrowser-app.
  *
@@ -24,6 +24,7 @@
 import Qt.labs.settings 1.0
 import "../actions" as Actions
 import ".."
+import "ColorUtils.js" as ColorUtils
 
 BrowserView {
     id: webapp
@@ -50,6 +51,7 @@
     property bool backForwardButtonsVisible: false
     property bool chromeVisible: false
     readonly property bool chromeless: !chromeVisible && !backForwardButtonsVisible && !accountSwitcher
+    readonly property real themeColorTextContrastFactor: 3.0
 
     signal chooseAccount()
 
@@ -141,8 +143,14 @@
             developerExtrasEnabled: webapp.developerExtrasEnabled
 
             onThemeColorMetaInformationDetected: {
-                if (!webapp.chromeless && chromeLoader.item) {
+                var color = webappContainerHelper.rgbColorFromCSSColor(theme_color)
+                if (!webapp.chromeless && chromeLoader.item && color.length) {
                     chromeLoader.item.backgroundColor = theme_color
+                    chromeLoader.item.chromeTextLabelColor =
+                            ColorUtils.getMostConstrastedColor(
+                                color,
+                                Qt.darker(theme_color, themeColorTextContrastFactor),
+                                Qt.lighter(theme_color, themeColorTextContrastFactor))
                 }
             }
             onSamlRequestUrlPatternReceived: {

=== modified file 'src/app/webcontainer/webapp-container-helper.cpp'
--- src/app/webcontainer/webapp-container-helper.cpp	2015-05-27 16:19:45 +0000
+++ src/app/webcontainer/webapp-container-helper.cpp	2016-04-05 15:38:49 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2014 Canonical Ltd.
+ * Copyright 2014-2016 Canonical Ltd.
  *
  * This file is part of webbrowser-app.
  *
@@ -18,9 +18,11 @@
 
 #include "webapp-container-helper.h"
 
+#include <QColor>
 #include <QMetaObject>
 #include <QMetaProperty>
-
+#include <QRegExp>
+#include <QDebug>
 
 WebappContainerHelper::WebappContainerHelper(QObject* parent)
     : QObject(parent)
@@ -38,15 +40,46 @@
 
 void WebappContainerHelper::browseToUrl(QObject* webview, const QUrl& url)
 {
-    if ( ! webview)
+    if ( ! webview) {
         return;
+    }
     const QMetaObject* metaobject = webview->metaObject();
     int urlPropIdx = metaobject->indexOfProperty("url");
-    if (urlPropIdx == -1)
+    if (urlPropIdx == -1) {
         return;
+    }
     metaobject->property(urlPropIdx).write(webview, QVariant(url));
 }
 
-
-
-
+QString WebappContainerHelper::rgbColorFromCSSColor(const QString& cssColor)
+{
+    QString color = cssColor.trimmed().toLower();
+    if (color.isEmpty()) {
+        return QString();
+    }
+    QString returnColorFormat = "%1,%2,%3";
+    if (color.startsWith("rgb")) {
+        QRegExp rgbColorRe("rgb\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*\\)");
+        if (rgbColorRe.exactMatch(color)) {
+            return returnColorFormat
+                    .arg(rgbColorRe.cap(1).toInt())
+                    .arg(rgbColorRe.cap(2).toInt())
+                    .arg(rgbColorRe.cap(3).toInt());
+        }
+        return QString();
+    } else if (color.startsWith("#")) {
+        QString hexColor = color.mid(1);
+        if (hexColor.size() < 6 && hexColor.size() != 3) {
+            color = "#" + QString(6 - hexColor.size(), '0') + hexColor;
+        }
+    }
+
+    QColor returnColor(color);
+    return returnColor.isValid()
+        ? returnColorFormat
+          .arg(returnColor.red())
+          .arg(returnColor.green())
+          .arg(returnColor.blue())
+          .toLower()
+        : QString();
+}

=== modified file 'src/app/webcontainer/webapp-container-helper.h'
--- src/app/webcontainer/webapp-container-helper.h	2015-05-27 16:19:45 +0000
+++ src/app/webcontainer/webapp-container-helper.h	2016-04-05 15:38:49 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2014 Canonical Ltd.
+ * Copyright 2014, 2016 Canonical Ltd.
  *
  * This file is part of webbrowser-app.
  *
@@ -31,6 +31,15 @@
     WebappContainerHelper(QObject* parent = 0);
     ~WebappContainerHelper();
 
+    /**
+     * Expects a CSS color string http://www.w3schools.com/css/css_colors.asp
+     * and returns a rr,gg,bb formatted string.
+     *
+     * If the provided string is not a valid CSS color string, an empty string
+     * is returned.
+     */
+    Q_INVOKABLE QString rgbColorFromCSSColor(const QString& cssColor);
+
 private Q_SLOTS:
 
     void browseToUrl(QObject* webview, const QUrl& url);

=== modified file 'tests/unittests/CMakeLists.txt'
--- tests/unittests/CMakeLists.txt	2016-02-09 13:02:16 +0000
+++ tests/unittests/CMakeLists.txt	2016-04-05 15:38:49 +0000
@@ -23,3 +23,5 @@
 add_subdirectory(downloads-model)
 add_subdirectory(single-instance-manager)
 add_subdirectory(meminfo)
+add_subdirectory(webapp-container-color-helper)
+

=== added directory 'tests/unittests/webapp-container-color-helper'
=== added file 'tests/unittests/webapp-container-color-helper/CMakeLists.txt'
--- tests/unittests/webapp-container-color-helper/CMakeLists.txt	1970-01-01 00:00:00 +0000
+++ tests/unittests/webapp-container-color-helper/CMakeLists.txt	2016-04-05 15:38:49 +0000
@@ -0,0 +1,17 @@
+find_package(Qt5Core REQUIRED)
+find_package(Qt5Gui REQUIRED)
+find_package(Qt5Test REQUIRED)
+set(TEST tst_WebappContainerColorTests)
+set(SOURCES
+    ${webapp-container_SOURCE_DIR}/webapp-container-helper.cpp
+    tst_WebappContainerColorTests.cpp
+)
+add_executable(${TEST} ${SOURCES})
+include_directories(${webapp-container_SOURCE_DIR})
+target_link_libraries(${TEST}
+    Qt5::Core
+    Qt5::Gui
+    Qt5::Test
+)
+add_test(${TEST} ${CMAKE_CURRENT_BINARY_DIR}/${TEST} -xunitxml -o ${TEST}.xml)
+set_tests_properties(${TEST} PROPERTIES ENVIRONMENT "QT_QPA_PLATFORM=minimal")

=== added file 'tests/unittests/webapp-container-color-helper/tst_WebappContainerColorTests.cpp'
--- tests/unittests/webapp-container-color-helper/tst_WebappContainerColorTests.cpp	1970-01-01 00:00:00 +0000
+++ tests/unittests/webapp-container-color-helper/tst_WebappContainerColorTests.cpp	2016-04-05 15:38:49 +0000
@@ -0,0 +1,62 @@
+/*
+ * Copyright 2016 Canonical Ltd.
+ *
+ * This file is part of webbrowser-app.
+ *
+ * webbrowser-app is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * webbrowser-app is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+// Qt
+#include <QtCore/QString>
+#include <QtTest/QtTest>
+
+// local
+#include "webapp-container-helper.h"
+
+class ContainerColorTests : public QObject
+{
+    Q_OBJECT
+
+private Q_SLOTS:
+
+    void cssColorToRgbTest_data()
+    {
+        QTest::addColumn<QString>("csscolor");
+        QTest::addColumn<QString>("rgb");
+
+        QTest::newRow("Empty CSS color") << "  " << "";
+        QTest::newRow("Invalid CSS color") << " invalid " << "";
+        QTest::newRow("Invalid RGB CSS color") << " rgb  (1,1," << "";
+        QTest::newRow("Invalid RGB CSS color 2") << " rgb  (1,1 0)" << "";
+        QTest::newRow("Invalid RGB CSS color 3") << " rgb  (1, e, 0)" << "";
+        QTest::newRow("Valid SVG name CSS color") << " red " << "255,0,0";
+        QTest::newRow("Valid RGB CSS color") << " rgb (255, 0, 0) " << "255,0,0";
+        QTest::newRow("Valid plain RGB CSS color") << " #FF0000 " << "255,0,0";
+        QTest::newRow("Valid short plain RGB CSS color") << " #36699 " << "3,102,153";
+        QTest::newRow("Valid shortest plain RGB CSS color") << " #366 " << "51,102,102";
+        QTest::newRow("Valid very short plain RGB CSS color") << " #000 " << "0,0,0";
+        QTest::newRow("Valid SVG name CSS color") << " #FF000044 " << "0,0,68";
+    }
+
+    void cssColorToRgbTest()
+    {
+        QFETCH(QString, csscolor);
+        QFETCH(QString, rgb);
+
+        WebappContainerHelper helper;
+        QCOMPARE(helper.rgbColorFromCSSColor(csscolor), rgb);
+    }
+};
+
+QTEST_MAIN(ContainerColorTests)
+#include "tst_WebappContainerColorTests.moc"