Improve user experience in stylesheet example

- Add checkboxes to make configurable whether a stylesheet should
be applied
- Add a default stylesheet which rotates the page by 180 degree.

Task-number: QTBUG-64816
Change-Id: Ic82c61f9d1e5384f3271a260bc390ac50f5b9a12
Reviewed-by: Jüri Valdmann <juri.valdmann@qt.io>
Reviewed-by: Kai Koehne <kai.koehne@qt.io>

5 files changed, 87 insertions, 10 deletions

diff --git a/examples/webenginewidgets/stylesheetbrowser/main.cpp b/examples/webenginewidgets/stylesheetbrowser/main.cpp
index 957913f5a..54fce0ce3 100644
--- a/examples/webenginewidgets/stylesheetbrowser/main.cpp
+++ b/examples/webenginewidgets/stylesheetbrowser/main.cpp
@@ -49,6 +49,7 @@
 ****************************************************************************/
 
 #include "mainwindow.h"
+#include "stylesheetdialog.h"
 #include <QApplication>
 #include <QUrl>
 
@@ -58,6 +59,8 @@ int main(int argc, char *argv[])
     QCoreApplication::setOrganizationDomain("www.qt.io");
     QCoreApplication::setApplicationName("StyleSheet Browser");
 
+    qRegisterMetaTypeStreamOperators<StyleSheet>("StyleSheet");
+
     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
     QApplication a(argc, argv);
     MainWindow w(QUrl("http://qt.io"));
diff --git a/examples/webenginewidgets/stylesheetbrowser/mainwindow.cpp b/examples/webenginewidgets/stylesheetbrowser/mainwindow.cpp
index f7e6964cb..c93205b18 100644
--- a/examples/webenginewidgets/stylesheetbrowser/mainwindow.cpp
+++ b/examples/webenginewidgets/stylesheetbrowser/mainwindow.cpp
@@ -49,9 +49,12 @@
 ****************************************************************************/
 
 #include "mainwindow.h"
+#include "stylesheetdialog.h"
 #include "ui_mainwindow.h"
 
-#include "stylesheetdialog.h"
+static QMap<QString, QString> defaultStyleSheets = {
+    {"Upside down", "body { -webkit-transform: rotate(180deg); }"}
+};
 
 MainWindow::MainWindow(const QUrl &url) :
     QMainWindow(),
@@ -67,8 +70,16 @@ MainWindow::MainWindow(const QUrl &url) :
     QSettings settings;
     settings.beginGroup("styleSheets");
     QStringList styleSheets = settings.allKeys();
-    for (auto name : qAsConst(styleSheets))
-        insertStyleSheet(name, settings.value(name, QString()).toString(), false);
+    if (styleSheets.empty()) {
+        // Add back default style sheets if the user cleared them out
+        loadDefaultStyleSheets();
+    } else {
+        for (auto name : qAsConst(styleSheets)) {
+            StyleSheet styleSheet = settings.value(name).value<StyleSheet>();
+            if (styleSheet.second)
+                insertStyleSheet(name, styleSheet.first, false);
+        }
+    }
     settings.endGroup();
 
     ui->webEngineView->setUrl(url);
@@ -114,6 +125,27 @@ void MainWindow::removeStyleSheet(const QString &name, bool immediately)
     ui->webEngineView->page()->scripts().remove(script);
 }
 
+bool MainWindow::hasStyleSheet(const QString &name)
+{
+    QWebEngineScript script = ui->webEngineView->page()->scripts().findScript(name);
+    return !script.isNull();
+}
+
+void MainWindow::loadDefaultStyleSheets()
+{
+    QSettings settings;
+    settings.beginGroup("styleSheets");
+
+    auto it = defaultStyleSheets.constBegin();
+    while (it != defaultStyleSheets.constEnd()) {
+        settings.setValue(it.key(), QVariant::fromValue(qMakePair(it.value(), true)));
+        insertStyleSheet(it.key(), it.value(), false);
+        ++it;
+    }
+
+    settings.endGroup();
+}
+
 void MainWindow::urlEntered()
 {
     ui->webEngineView->setUrl(QUrl::fromUserInput(ui->urlBar->text()));
diff --git a/examples/webenginewidgets/stylesheetbrowser/mainwindow.h b/examples/webenginewidgets/stylesheetbrowser/mainwindow.h
index fb0c8e7be..c39735af8 100644
--- a/examples/webenginewidgets/stylesheetbrowser/mainwindow.h
+++ b/examples/webenginewidgets/stylesheetbrowser/mainwindow.h
@@ -71,6 +71,8 @@ public:
 
     void insertStyleSheet(const QString &name, const QString &source, bool immediately);
     void removeStyleSheet(const QString &name, bool immediately);
+    bool hasStyleSheet(const QString &name);
+    void loadDefaultStyleSheets();
 
 private slots:
     void urlEntered();
diff --git a/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.cpp b/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.cpp
index eb8abe135..7351ab75f 100644
--- a/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.cpp
+++ b/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.cpp
@@ -59,6 +59,7 @@ StylesheetDialog::StylesheetDialog(QWidget *parent) :
     ui->setupUi(this);
 
     connect(ui->styleSheetList, &QListWidget::currentItemChanged, this, &StylesheetDialog::currentStyleSheetChanged);
+    connect(ui->styleSheetList, &QListWidget::itemClicked, this, &StylesheetDialog::listItemClicked);
     connect(ui->fileNameEdit, &QLineEdit::textChanged, this, &StylesheetDialog::fileNameChanged);
 
     connect(ui->addButton, &QPushButton::clicked, this, &StylesheetDialog::addButtonClicked);
@@ -66,8 +67,12 @@ StylesheetDialog::StylesheetDialog(QWidget *parent) :
 
     QSettings settings;
     settings.beginGroup("styleSheets");
-    for (auto name : settings.allKeys())
-        new QListWidgetItem(name,  ui->styleSheetList);
+    for (auto name : settings.allKeys()) {
+        QListWidgetItem *listItem = new QListWidgetItem(name,  ui->styleSheetList);
+        listItem->setFlags(listItem->flags() | Qt::ItemIsUserCheckable);
+        bool checked = settings.value(name).value<StyleSheet>().second;
+        listItem->setCheckState(checked ? Qt::Checked : Qt::Unchecked);
+    }
     settings.endGroup();
 }
 
@@ -92,7 +97,33 @@ void StylesheetDialog::currentStyleSheetChanged(QListWidgetItem *current, QListW
     QSettings settings;
     settings.beginGroup("styleSheets");
     ui->fileNameEdit->setText(current->text());
-    ui->sourceCodeEdit->setPlainText(settings.value(current->text(), QString()).toString());
+    const QString source = settings.value(current->text()).value<StyleSheet>().first;
+    ui->sourceCodeEdit->setPlainText(source);
+    settings.endGroup();
+}
+
+void StylesheetDialog::listItemClicked(QListWidgetItem *item)
+{
+    MainWindow *window = static_cast<MainWindow *>(parent());
+    const QString name = item->text();
+    bool checkedStateChanged =
+            (item->checkState() == Qt::Checked && !window->hasStyleSheet(name)) ||
+            (item->checkState() == Qt::Unchecked && window->hasStyleSheet(name));
+    if (!checkedStateChanged)
+        return;
+
+    QSettings settings;
+    settings.beginGroup("styleSheets");
+    const QString source = settings.value(name).value<StyleSheet>().first;
+
+    if (item->checkState() == Qt::Checked) {
+        settings.setValue(name, QVariant::fromValue(qMakePair(source, true)));
+        window->insertStyleSheet(name, source, true);
+    } else {
+        settings.setValue(name, QVariant::fromValue(qMakePair(source, false)));
+        window->removeStyleSheet(name, true);
+    }
+
     settings.endGroup();
 }
 
@@ -107,16 +138,21 @@ void StylesheetDialog::fileNameChanged(const QString &text)
 
 void StylesheetDialog::addButtonClicked()
 {
-    new QListWidgetItem(ui->fileNameEdit->text(),  ui->styleSheetList);
-
-    MainWindow *window = static_cast<MainWindow *>(parent());
     const QString name = ui->fileNameEdit->text();
     const QString source = ui->sourceCodeEdit->toPlainText();
+    if (name.isEmpty() || source.isEmpty())
+        return;
+
+    QListWidgetItem *listItem = new QListWidgetItem(ui->fileNameEdit->text(),  ui->styleSheetList);
+    listItem->setFlags(listItem->flags() | Qt::ItemIsUserCheckable);
+    listItem->setCheckState(Qt::Checked);
+
+    MainWindow *window = static_cast<MainWindow *>(parent());
     window->insertStyleSheet(name, source, true);
 
     QSettings settings;
     settings.beginGroup("styleSheets");
-    settings.setValue(name, source);
+    settings.setValue(name, QVariant::fromValue(qMakePair(source, true)));
     settings.endGroup();
 
     ui->addButton->setEnabled(false);
diff --git a/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.h b/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.h
index f65cfe666..3bf3219ca 100644
--- a/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.h
+++ b/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.h
@@ -60,6 +60,9 @@ class StylesheetDialog;
 }
 QT_END_NAMESPACE
 
+typedef QPair<QString, bool> StyleSheet; // <source, isEnabled>
+Q_DECLARE_METATYPE(StyleSheet);
+
 class StylesheetDialog : public QDialog
 {
     Q_OBJECT
@@ -70,6 +73,7 @@ public:
 
 private slots:
     void currentStyleSheetChanged(QListWidgetItem *current, QListWidgetItem *previous);
+    void listItemClicked(QListWidgetItem *item);
     void fileNameChanged(const QString &text);
 
     void addButtonClicked();