Add StyleSheet Browser example

Demonstrates how to inject and remove stylesheets using the
user scripts API.

Change-Id: If498365897618f873fa96d7a7b04a370e196618e
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
Reviewed-by: Allan Sandfeld Jensen <allan.jensen@qt.io>

13 files changed, 833 insertions, 1 deletions

diff --git a/examples/webenginewidgets/stylesheetbrowser/doc/images/stylesheetbrowser.png b/examples/webenginewidgets/stylesheetbrowser/doc/images/stylesheetbrowser.png
new file mode 100644
index 000000000..32c7c43ed
--- /dev/null
+++ b/examples/webenginewidgets/stylesheetbrowser/doc/images/stylesheetbrowser.png
diff --git a/examples/webenginewidgets/stylesheetbrowser/doc/src/stylesheetbrowser.qdoc b/examples/webenginewidgets/stylesheetbrowser/doc/src/stylesheetbrowser.qdoc
new file mode 100644
index 000000000..c5506a623
--- /dev/null
+++ b/examples/webenginewidgets/stylesheetbrowser/doc/src/stylesheetbrowser.qdoc
@@ -0,0 +1,58 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: http://www.gnu.org/copyleft/fdl.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+    \example webenginewidgets/stylesheetbrowser
+    \title WebEngine StyleSheet Browser Example
+    \ingroup webengine-widgetexamples
+    \brief Demonstrates how to inject CSS into web pages using user scripts
+
+    \image stylesheetbrowser.png
+
+    \e {StyleSheet Browser} demonstrates how to use the \l{Qt WebEngine Widgets C++ Classes}
+    {Qt WebEngine C++ classes} to inject user stylesheets into web pages.
+
+    \include examples-run.qdocinc
+
+    \section1 Working With Stylesheets
+
+    We use JavaScript to create and append CSS elements to the documents.
+    After declaring the script source, QWebEnginePage::runJavaScript() can run it
+    immediately and apply newly created styles on the current content of the web view.
+    Encapsulating the script into a QWebEngineScript and adding it to the script collection
+    of QWebEnginePage makes its effect permanent.
+
+    \quotefromfile webenginewidgets/stylesheetbrowser/mainwindow.cpp
+    \skipto MainWindow::insertStyleSheet
+    \printuntil /^\}/
+
+    Removing stylesheets can be done similarly:
+
+    \quotefromfile webenginewidgets/stylesheetbrowser/mainwindow.cpp
+    \skipto MainWindow::removeStyleSheet
+    \printuntil /^\}/
+*/
diff --git a/examples/webenginewidgets/stylesheetbrowser/main.cpp b/examples/webenginewidgets/stylesheetbrowser/main.cpp
new file mode 100644
index 000000000..c353a704b
--- /dev/null
+++ b/examples/webenginewidgets/stylesheetbrowser/main.cpp
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the demonstration applications of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** As a special exception, The Qt Company gives you certain additional
+** rights. These rights are described in The Qt Company LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include "mainwindow.h"
+#include <QApplication>
+#include <QUrl>
+
+int main(int argc, char *argv[])
+{
+    QCoreApplication::setOrganizationName("The Qt Company");
+    QCoreApplication::setOrganizationDomain("www.qt.io");
+    QCoreApplication::setApplicationName("StyleSheet Browser");
+
+    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+    QApplication a(argc, argv);
+    MainWindow w(QUrl("http://qt.io"));
+    w.show();
+    return a.exec();
+}
diff --git a/examples/webenginewidgets/stylesheetbrowser/mainwindow.cpp b/examples/webenginewidgets/stylesheetbrowser/mainwindow.cpp
new file mode 100644
index 000000000..01697e8e4
--- /dev/null
+++ b/examples/webenginewidgets/stylesheetbrowser/mainwindow.cpp
@@ -0,0 +1,127 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the demonstration applications of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** As a special exception, The Qt Company gives you certain additional
+** rights. These rights are described in The Qt Company LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include "mainwindow.h"
+#include "ui_mainwindow.h"
+
+#include "stylesheetdialog.h"
+
+MainWindow::MainWindow(const QUrl &url) :
+    QMainWindow(),
+    ui(new Ui::MainWindow)
+{
+    ui->setupUi(this);
+
+    connect(ui->urlBar, &QLineEdit::returnPressed, this, &MainWindow::urlEntered);
+    connect(ui->webEngineView, &QWebEngineView::urlChanged, this, &MainWindow::urlChanged);
+    connect(ui->settingsButton, &QPushButton::clicked, this, &MainWindow::showStyleSheetsDialog);
+    connect(ui->reloadButton, &QPushButton::clicked, this, &MainWindow::reloadRequested);
+
+    QSettings settings;
+    settings.beginGroup("styleSheets");
+    QStringList styleSheets = settings.allKeys();
+    for (auto name : qAsConst(styleSheets))
+        insertStyleSheet(name, settings.value(name, QString()).toString(), false);
+    settings.endGroup();
+
+    ui->webEngineView->setUrl(url);
+}
+
+MainWindow::~MainWindow()
+{
+    delete ui;
+}
+
+void MainWindow::insertStyleSheet(const QString &name, const QString &source, bool immediately)
+{
+    QWebEngineScript script;
+    QString s = QString::fromLatin1("(function() {"\
+                                    "    css = document.createElement('style');"\
+                                    "    css.type = 'text/css';"\
+                                    "    css.id = '%1';"\
+                                    "    document.head.appendChild(css);"\
+                                    "    css.innerText = '%2';"\
+                                    "})()").arg(name).arg(source.simplified());
+    if (immediately)
+        ui->webEngineView->page()->runJavaScript(s, QWebEngineScript::ApplicationWorld);
+
+    script.setName(name);
+    script.setSourceCode(s);
+    script.setInjectionPoint(QWebEngineScript::DocumentReady);
+    script.setRunsOnSubFrames(true);
+    script.setWorldId(QWebEngineScript::ApplicationWorld);
+    ui->webEngineView->page()->scripts().insert(script);
+}
+
+void MainWindow::removeStyleSheet(const QString &name, bool immediately)
+{
+    QString s = QString::fromLatin1("(function() {"\
+                                    "    var element = document.getElementById('%1');"\
+                                    "    element.outerHTML = '';"\
+                                    "    delete element;"\
+                                    "})()").arg(name);
+    if (immediately)
+        ui->webEngineView->page()->runJavaScript(s, QWebEngineScript::ApplicationWorld);
+
+    QWebEngineScript script = ui->webEngineView->page()->scripts().findScript(name);
+    ui->webEngineView->page()->scripts().remove(script);
+}
+
+void MainWindow::urlEntered()
+{
+    ui->webEngineView->setUrl(QUrl::fromUserInput(ui->urlBar->text()));
+}
+
+void MainWindow::urlChanged(const QUrl &url)
+{
+    ui->urlBar->setText(url.toString());
+}
+
+void MainWindow::showStyleSheetsDialog()
+{
+    StylesheetDialog *dialog = new StylesheetDialog(this);
+    dialog->show();
+}
+
+void MainWindow::reloadRequested()
+{
+    ui->webEngineView->reload();
+}
diff --git a/examples/webenginewidgets/stylesheetbrowser/mainwindow.h b/examples/webenginewidgets/stylesheetbrowser/mainwindow.h
new file mode 100644
index 000000000..a6ee6a44f
--- /dev/null
+++ b/examples/webenginewidgets/stylesheetbrowser/mainwindow.h
@@ -0,0 +1,74 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the demonstration applications of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** As a special exception, The Qt Company gives you certain additional
+** rights. These rights are described in The Qt Company LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#ifndef MAINWINDOW_H
+#define MAINWINDOW_H
+
+#include <QMainWindow>
+#include <QSettings>
+#include <QWebEngineScriptCollection>
+
+namespace Ui {
+class MainWindow;
+}
+
+class MainWindow : public QMainWindow
+{
+    Q_OBJECT
+
+public:
+    explicit MainWindow(const QUrl &url);
+    ~MainWindow();
+
+    void insertStyleSheet(const QString &name, const QString &source, bool immediately);
+    void removeStyleSheet(const QString &name, bool immediately);
+
+private slots:
+    void urlEntered();
+    void urlChanged(const QUrl &url);
+    void showStyleSheetsDialog();
+    void reloadRequested();
+
+private:
+    Ui::MainWindow *ui;
+};
+
+#endif // MAINWINDOW_H
diff --git a/examples/webenginewidgets/stylesheetbrowser/mainwindow.ui b/examples/webenginewidgets/stylesheetbrowser/mainwindow.ui
new file mode 100644
index 000000000..f9c1af969
--- /dev/null
+++ b/examples/webenginewidgets/stylesheetbrowser/mainwindow.ui
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
+ <class>MainWindow</class>
+ <widget class="QMainWindow" name="MainWindow">
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>713</width>
+    <height>455</height>
+   </rect>
+  </property>
+  <property name="windowTitle">
+   <string>StyleSheet Browser</string>
+  </property>
+  <property name="unifiedTitleAndToolBarOnMac">
+   <bool>false</bool>
+  </property>
+  <widget class="QWidget" name="centralWidget">
+   <layout class="QHBoxLayout" name="horizontalLayout">
+    <item>
+     <widget class="QWidget" name="webContentsWidget" native="true">
+      <layout class="QVBoxLayout" name="verticalLayout_3">
+       <item>
+        <widget class="QWidget" name="urlBarWidget" native="true">
+         <layout class="QHBoxLayout" name="horizontalLayout_2">
+          <item>
+           <widget class="QLineEdit" name="urlBar"/>
+          </item>
+          <item>
+           <widget class="QPushButton" name="reloadButton">
+            <property name="text">
+             <string/>
+            </property>
+            <property name="shortcut">
+             <string>Ctrl+R</string>
+            </property>
+            <property name="icon">
+             <iconset resource="stylesheetbrowser.qrc">
+              <normaloff>:/view-refresh.png</normaloff>:/view-refresh.png</iconset>
+            </property>
+           </widget>
+          </item>
+          <item>
+           <widget class="QPushButton" name="settingsButton">
+            <property name="text">
+             <string>Settings</string>
+            </property>
+           </widget>
+          </item>
+         </layout>
+        </widget>
+       </item>
+       <item>
+        <widget class="QWebEngineView" name="webEngineView">
+         <property name="url">
+          <url>
+           <string>about:blank</string>
+          </url>
+         </property>
+        </widget>
+       </item>
+      </layout>
+     </widget>
+    </item>
+   </layout>
+  </widget>
+  <widget class="QMenuBar" name="menuBar">
+   <property name="geometry">
+    <rect>
+     <x>0</x>
+     <y>0</y>
+     <width>713</width>
+     <height>20</height>
+    </rect>
+   </property>
+  </widget>
+ </widget>
+ <layoutdefault spacing="6" margin="11"/>
+ <customwidgets>
+  <customwidget>
+   <class>QWebEngineView</class>
+   <extends>QWidget</extends>
+   <header location="global">QtWebEngineWidgets/QWebEngineView</header>
+  </customwidget>
+ </customwidgets>
+ <resources/>
+ <connections/>
+</ui>
diff --git a/examples/webenginewidgets/stylesheetbrowser/stylesheetbrowser.pro b/examples/webenginewidgets/stylesheetbrowser/stylesheetbrowser.pro
new file mode 100644
index 000000000..c5f1080e3
--- /dev/null
+++ b/examples/webenginewidgets/stylesheetbrowser/stylesheetbrowser.pro
@@ -0,0 +1,23 @@
+TEMPLATE = app
+TARGET = stylesheetbrowser
+QT += webenginewidgets
+CONFIG += c++11
+
+HEADERS += \
+    mainwindow.h \
+    stylesheetdialog.h
+
+SOURCES += \
+    main.cpp \
+    mainwindow.cpp \
+    stylesheetdialog.cpp
+
+FORMS += \
+    mainwindow.ui \
+    stylesheetdialog.ui
+
+RESOURCES += stylesheetbrowser.qrc
+
+# install
+target.path = $$[QT_INSTALL_EXAMPLES]/webenginewidgets/stylesheetbrowser
+INSTALLS += target
diff --git a/examples/webenginewidgets/stylesheetbrowser/stylesheetbrowser.qrc b/examples/webenginewidgets/stylesheetbrowser/stylesheetbrowser.qrc
new file mode 100644
index 000000000..8805f2c53
--- /dev/null
+++ b/examples/webenginewidgets/stylesheetbrowser/stylesheetbrowser.qrc
@@ -0,0 +1,5 @@
+<RCC>
+    <qresource prefix="/">
+        <file>view-refresh.png</file>
+    </qresource>
+</RCC>
diff --git a/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.cpp b/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.cpp
new file mode 100644
index 000000000..65c50bfb3
--- /dev/null
+++ b/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.cpp
@@ -0,0 +1,132 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the demonstration applications of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** As a special exception, The Qt Company gives you certain additional
+** rights. These rights are described in The Qt Company LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include "mainwindow.h"
+#include "stylesheetdialog.h"
+#include "ui_stylesheetdialog.h"
+
+StylesheetDialog::StylesheetDialog(QWidget *parent) :
+    QDialog(parent),
+    ui(new Ui::StylesheetDialog)
+{
+    ui->setupUi(this);
+
+    connect(ui->styleSheetList, &QListWidget::currentItemChanged, this, &StylesheetDialog::currentStyleSheetChanged);
+    connect(ui->fileNameEdit, &QLineEdit::textChanged, this, &StylesheetDialog::fileNameChanged);
+
+    connect(ui->addButton, &QPushButton::clicked, this, &StylesheetDialog::addButtonClicked);
+    connect(ui->removeButton, &QPushButton::clicked, this, &StylesheetDialog::removeButtonClicked);
+
+    QSettings settings;
+    settings.beginGroup("styleSheets");
+    for (auto name : settings.allKeys())
+        new QListWidgetItem(name,  ui->styleSheetList);
+    settings.endGroup();
+}
+
+StylesheetDialog::~StylesheetDialog()
+{
+    delete ui;
+}
+
+void StylesheetDialog::currentStyleSheetChanged(QListWidgetItem *current, QListWidgetItem *previous)
+{
+    if (!previous) {
+        // Select the first item on startup
+        ui->styleSheetList->setCurrentItem(current);
+    }
+
+    if (!current) {
+        ui->fileNameEdit->setText(QString());
+        ui->sourceCodeEdit->setPlainText(QString());
+        return;
+    }
+
+    QSettings settings;
+    settings.beginGroup("styleSheets");
+    ui->fileNameEdit->setText(current->text());
+    ui->sourceCodeEdit->setPlainText(settings.value(current->text(), QString()).toString());
+    settings.endGroup();
+}
+
+void StylesheetDialog::fileNameChanged(const QString &text)
+{
+    QList<QListWidgetItem *> items = ui->styleSheetList->findItems(text, Qt::MatchFixedString);
+    if (items.size())
+        ui->addButton->setEnabled(false);
+    else
+        ui->addButton->setEnabled(true);
+}
+
+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();
+    window->insertStyleSheet(name, source, true);
+
+    QSettings settings;
+    settings.beginGroup("styleSheets");
+    settings.setValue(name, source);
+    settings.endGroup();
+
+    ui->addButton->setEnabled(false);
+}
+
+void StylesheetDialog::removeButtonClicked()
+{
+    if (ui->styleSheetList->selectedItems().isEmpty())
+        return;
+
+    MainWindow *window = static_cast<MainWindow *>(parent());
+    QSettings settings;
+    settings.beginGroup("styleSheets");
+
+    QListWidgetItem *item = ui->styleSheetList->selectedItems().first();
+    const QString name = item->text();
+    window->removeStyleSheet(name, true);
+    settings.remove(name);
+    delete item;
+
+    settings.endGroup();
+}
diff --git a/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.h b/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.h
new file mode 100644
index 000000000..3b21350c7
--- /dev/null
+++ b/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.h
@@ -0,0 +1,71 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the demonstration applications of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** As a special exception, The Qt Company gives you certain additional
+** rights. These rights are described in The Qt Company LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#ifndef STYLESHEETDIALOG_H
+#define STYLESHEETDIALOG_H
+
+#include <QDialog>
+#include <QListWidgetItem>
+
+namespace Ui {
+class StylesheetDialog;
+}
+
+class StylesheetDialog : public QDialog
+{
+    Q_OBJECT
+
+public:
+    explicit StylesheetDialog(QWidget *parent = 0);
+    ~StylesheetDialog();
+
+private slots:
+    void currentStyleSheetChanged(QListWidgetItem *current, QListWidgetItem *previous);
+    void fileNameChanged(const QString &text);
+
+    void addButtonClicked();
+    void removeButtonClicked();
+
+private:
+    Ui::StylesheetDialog *ui;
+};
+
+#endif // STYLESHEETDIALOG_H
diff --git a/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.ui b/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.ui
new file mode 100644
index 000000000..3e70ce89a
--- /dev/null
+++ b/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.ui
@@ -0,0 +1,195 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
+ <class>StylesheetDialog</class>
+ <widget class="QDialog" name="StylesheetDialog">
+  <property name="windowModality">
+   <enum>Qt::ApplicationModal</enum>
+  </property>
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>547</width>
+    <height>431</height>
+   </rect>
+  </property>
+  <property name="sizePolicy">
+   <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+    <horstretch>0</horstretch>
+    <verstretch>0</verstretch>
+   </sizepolicy>
+  </property>
+  <property name="minimumSize">
+   <size>
+    <width>547</width>
+    <height>431</height>
+   </size>
+  </property>
+  <property name="maximumSize">
+   <size>
+    <width>547</width>
+    <height>431</height>
+   </size>
+  </property>
+  <property name="windowTitle">
+   <string>Stylesheets</string>
+  </property>
+  <property name="modal">
+   <bool>true</bool>
+  </property>
+  <layout class="QVBoxLayout" name="verticalLayout">
+   <item>
+    <widget class="QWidget" name="widget" native="true">
+     <property name="sizePolicy">
+      <sizepolicy hsizetype="Expanding" vsizetype="Expanding">
+       <horstretch>0</horstretch>
+       <verstretch>0</verstretch>
+      </sizepolicy>
+     </property>
+     <widget class="QWidget" name="horizontalLayoutWidget">
+      <property name="geometry">
+       <rect>
+        <x>9</x>
+        <y>9</y>
+        <width>511</width>
+        <height>371</height>
+       </rect>
+      </property>
+      <layout class="QHBoxLayout" name="horizontalLayout">
+       <property name="sizeConstraint">
+        <enum>QLayout::SetDefaultConstraint</enum>
+       </property>
+       <item>
+        <widget class="QListWidget" name="styleSheetList"/>
+       </item>
+       <item>
+        <layout class="QVBoxLayout" name="verticalLayout_4">
+         <item>
+          <layout class="QHBoxLayout" name="horizontalLayout_2">
+           <item>
+            <widget class="QLabel" name="fileNameLabel">
+             <property name="sizePolicy">
+              <sizepolicy hsizetype="Minimum" vsizetype="Preferred">
+               <horstretch>0</horstretch>
+               <verstretch>0</verstretch>
+              </sizepolicy>
+             </property>
+             <property name="text">
+              <string>Stylesheet name:</string>
+             </property>
+            </widget>
+           </item>
+           <item>
+            <widget class="QLineEdit" name="fileNameEdit">
+             <property name="sizePolicy">
+              <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+               <horstretch>0</horstretch>
+               <verstretch>0</verstretch>
+              </sizepolicy>
+             </property>
+            </widget>
+           </item>
+           <item>
+            <spacer name="horizontalSpacer">
+             <property name="orientation">
+              <enum>Qt::Horizontal</enum>
+             </property>
+             <property name="sizeHint" stdset="0">
+              <size>
+               <width>40</width>
+               <height>20</height>
+              </size>
+             </property>
+            </spacer>
+           </item>
+          </layout>
+         </item>
+         <item>
+          <widget class="QLabel" name="sourceLabel">
+           <property name="text">
+            <string>Source code:</string>
+           </property>
+          </widget>
+         </item>
+         <item>
+          <widget class="QPlainTextEdit" name="sourceCodeEdit">
+           <property name="font">
+            <font>
+             <family>Courier New</family>
+             <pointsize>10</pointsize>
+            </font>
+           </property>
+          </widget>
+         </item>
+         <item>
+          <layout class="QHBoxLayout" name="horizontalLayout_4">
+           <item>
+            <widget class="QPushButton" name="addButton">
+             <property name="text">
+              <string>Add</string>
+             </property>
+            </widget>
+           </item>
+           <item>
+            <widget class="QPushButton" name="removeButton">
+             <property name="text">
+              <string>Remove</string>
+             </property>
+            </widget>
+           </item>
+          </layout>
+         </item>
+        </layout>
+       </item>
+      </layout>
+     </widget>
+    </widget>
+   </item>
+   <item>
+    <widget class="QDialogButtonBox" name="buttonBox">
+     <property name="orientation">
+      <enum>Qt::Horizontal</enum>
+     </property>
+     <property name="standardButtons">
+      <set>QDialogButtonBox::Ok</set>
+     </property>
+    </widget>
+   </item>
+  </layout>
+ </widget>
+ <resources/>
+ <connections>
+  <connection>
+   <sender>buttonBox</sender>
+   <signal>accepted()</signal>
+   <receiver>StylesheetDialog</receiver>
+   <slot>accept()</slot>
+   <hints>
+    <hint type="sourcelabel">
+     <x>248</x>
+     <y>254</y>
+    </hint>
+    <hint type="destinationlabel">
+     <x>157</x>
+     <y>274</y>
+    </hint>
+   </hints>
+  </connection>
+  <connection>
+   <sender>buttonBox</sender>
+   <signal>rejected()</signal>
+   <receiver>StylesheetDialog</receiver>
+   <slot>reject()</slot>
+   <hints>
+    <hint type="sourcelabel">
+     <x>316</x>
+     <y>260</y>
+    </hint>
+    <hint type="destinationlabel">
+     <x>286</x>
+     <y>274</y>
+    </hint>
+   </hints>
+  </connection>
+ </connections>
+</ui>
diff --git a/examples/webenginewidgets/stylesheetbrowser/view-refresh.png b/examples/webenginewidgets/stylesheetbrowser/view-refresh.png
new file mode 100644
index 000000000..cab4d02c7
--- /dev/null
+++ b/examples/webenginewidgets/stylesheetbrowser/view-refresh.png
diff --git a/examples/webenginewidgets/webenginewidgets.pro b/examples/webenginewidgets/webenginewidgets.pro
index 353104d6a..4e4ca868b 100644
--- a/examples/webenginewidgets/webenginewidgets.pro
+++ b/examples/webenginewidgets/webenginewidgets.pro
@@ -6,7 +6,8 @@ SUBDIRS += \
     cookiebrowser \
     demobrowser \
     markdowneditor \
-    simplebrowser
+    simplebrowser \
+    stylesheetbrowser
 
 contains(WEBENGINE_CONFIG, use_spellchecker):!cross_compile {
     !contains(WEBENGINE_CONFIG, use_native_spellchecker) {