make themes work better

assets/userscript.js

@@ -161,13 +161,14 @@ function main() {
     userscript.log("Loading userstyles...");
     userscript.loadingMessage = "Loading userstyles...";
     let stylesheet = document.getElementById("discordScreenaudioUserstyles");
-    if (!stylesheet) {
+    if (stylesheet) {
-      stylesheet = document.createElement("style");
+      userscript.log("Removing old userstyles...");
-      stylesheet.id = "discordScreenaudioUserstyles";
+      stylesheet.remove();
-      stylesheet.type = "text/css";
-      document.head.appendChild(stylesheet);
     }
+    stylesheet = document.createElement("style");
+    stylesheet.id = "discordScreenaudioUserstyles";
     stylesheet.innerText = userscript.userstyles;
+    document.head.appendChild(stylesheet);
     userscript.log("Finished loading userstyles");
     userscript.loadingMessage = "";
   }
@@ -329,6 +330,18 @@ function main() {
             })
           );
 
+          section.appendChild(
+            createButton("Install Theme", () => {
+              userscript.showThemeDialog();
+            })
+          );
+
+          section.appendChild(
+            createButton("Uninstall Theme", () => {
+              userscript.installUserStyles("");
+            })
+          );
+
           section.appendChild(
             createSwitch(
               "Move discord-screenaudio to the system tray instead of closing",

src/centralwidget.cpp

@@ -73,7 +73,7 @@ void CentralWidget::setLoadingIndicator(QString text) {
       m_loadingLabel->setStyleSheet("color:#dedede;");
       m_layout->addWidget(m_loadingLabel);
     }
-    m_loadingLabel->setText(text);
+    m_loadingLabel->setText(text.mid(0, 100));
   } else {
     if (m_loadingLabel != nullptr) {
       m_layout->removeWidget(m_loadingLabel);

src/discordpage.cpp

@@ -53,34 +53,35 @@ void DiscordPage::setupPermissions() {
   settings()->setAttribute(QWebEngineSettings::ScrollAnimatorEnabled, true);
 }
 
-QString fileContent;
-
 void DiscordPage::setupUserStyles() {
-  auto file = new QFile(
+  m_userStylesFile = new QFile(
       QStandardPaths::writableLocation(QStandardPaths::AppConfigLocation) +
       "/userstyles.css");
-  if (file->exists()) {
+  if (m_userStylesFile->exists()) {
-    qDebug(userstylesLog) << "Found userstyles:" << file->fileName();
+    qDebug(userstylesLog) << "Found userstyles:"
-    file->open(QIODevice::ReadOnly);
+                          << m_userStylesFile->fileName();
-    fileContent = file->readAll();
+    m_userStylesFile->open(QIODevice::ReadOnly);
-    file->close();
+    m_userStylesContent = m_userStylesFile->readAll();
-    fetchUserStyles(file);
+    m_userStylesFile->close();
+    fetchUserStyles();
   }
+  connect(&m_userScript, &UserScript::shouldInstallUserStyles, this,
+          &DiscordPage::getUserStyles);
 }
 
-const QRegularExpression
+const QRegularExpression importRegex(
-    importRegex(R"r(@import url\(['"]{0,1}([^'"]+?)['"]{0,1}\);)r");
+    R"r(@import (?:url\(|)['"]{0,1}(?!.*usrbgs?\.css)([^'"]+?)['"]{0,1}(?:|\));)r");
 const QRegularExpression urlRegex(
-    R"r(url\(['"]{0,1}((?!https:\/\/fonts.gstatic.com)(?!data:)(?!.*usrbgs?\.css)(?!.*\.woff2)(?!.*\.ttf)[^'"]+?)['"]{0,1}\))r");
+    R"r(url\(['"]{0,1}((?!https:\/\/fonts.gstatic.com)(?!data:)(?!.*\.woff2)(?!.*\.ttf)[^'"]+?)['"]{0,1}\))r");
 
-void DiscordPage::fetchUserStyles(QFile *file) {
+void DiscordPage::fetchUserStyles() {
   m_userScript.setProperty(
       "loadingMessage", "Loading userstyles: Fetching additional resources...");
   bool foundImport = true;
-  auto match = importRegex.match(fileContent);
+  auto match = importRegex.match(m_userStylesContent);
   if (!match.hasMatch()) {
     foundImport = false;
-    match = urlRegex.match(fileContent);
+    match = urlRegex.match(m_userStylesContent);
   }
   if (match.hasMatch()) {
     auto url = match.captured(1);
@@ -103,21 +104,26 @@ void DiscordPage::fetchUserStyles(QFile *file) {
       } else
         qDebug(userstylesLog) << reply->errorString().toUtf8().constData();
       reply->deleteLater();
-      fileContent = fileContent.replace(
+      m_userStylesContent = m_userStylesContent.replace(
           match.captured(0), foundImport
                                  ? content
                                  : "url(data:application/octet-stream;base64," +
                                        content.toBase64() + ")");
-      fetchUserStyles(file);
+      fetchUserStyles();
     });
     return;
   }
   qDebug(userstylesLog) << "Injecting userstyles";
-  m_userScript.setProperty("userstyles", fileContent);
+  m_userScript.setProperty("userstyles", m_userStylesContent);
-  file->open(QIODevice::WriteOnly);
+  m_userScript.setProperty("loadingMessage", "");
-  file->write(fileContent.toUtf8().constData());
+  m_userStylesFile->open(QIODevice::WriteOnly);
-  file->close();
+  m_userStylesFile->write(m_userStylesContent.toUtf8());
-  file->deleteLater();
+  m_userStylesFile->close();
+}
+
+void DiscordPage::getUserStyles(QString url) {
+  m_userStylesContent = url == "" ? "" : QString("@import url(%1);").arg(url);
+  fetchUserStyles();
 }
 
 void DiscordPage::injectScript(
@@ -142,7 +148,6 @@ void DiscordPage::injectScript(QString name, QString content) {
 
 void DiscordPage::injectStylesheet(QString name, QString content) {
   auto script = QString(R"(const stylesheet = document.createElement("style");
-stylesheet.type = "text/css";
 stylesheet.id = "%1";
 stylesheet.innerText = `%2`;
 document.head.appendChild(stylesheet);

src/discordpage.h

@@ -17,10 +17,12 @@ public:
 
 private:
   UserScript m_userScript;
+  QFile *m_userStylesFile;
+  QString m_userStylesContent;
   QNetworkAccessManager m_networkAccessManager;
   void setupPermissions();
   void setupUserStyles();
-  void fetchUserStyles(QFile *file);
+  void fetchUserStyles();
   bool acceptNavigationRequest(const QUrl &url,
                                QWebEnginePage::NavigationType type,
                                bool isMainFrame) override;
@@ -39,6 +41,9 @@ private:
 private Q_SLOTS:
   void featurePermissionRequested(const QUrl &securityOrigin,
                                   QWebEnginePage::Feature feature);
+
+public Q_SLOTS:
+  void getUserStyles(QString url);
 };
 
 // Will immediately get destroyed again but is needed for navigation to

src/userscript.cpp

@@ -4,6 +4,9 @@
 
 #include <QApplication>
 #include <QDebug>
+#include <QFile>
+#include <QInputDialog>
+#include <QStandardPaths>
 #include <QTimer>
 
 #ifdef KXMLGUI
@@ -163,3 +166,14 @@ void UserScript::showStreamDialog() {
     m_streamDialog->activateWindow();
   m_streamDialog->updateTargets();
 }
+
+void UserScript::showThemeDialog() {
+  auto url = QInputDialog::getText(MainWindow::instance(), "Theme Installation",
+                                   "Please enter the URL of the Theme");
+  if (url != "")
+    emit shouldInstallUserStyles(url);
+}
+
+void UserScript::installUserStyles(QString url) {
+  emit shouldInstallUserStyles(url);
+}

src/userscript.h

@@ -65,6 +65,7 @@ Q_SIGNALS:
   void streamStarted(bool video, int width, int height, int frameRate);
   void userstylesChanged();
   void loadingMessageChanged(QString message);
+  void shouldInstallUserStyles(QString url);
 
 public Q_SLOTS:
   void log(QString message);
@@ -78,6 +79,8 @@ public Q_SLOTS:
   void showStreamDialog();
   void stopVirtmic();
   void startVirtmic(QString target);
+  void showThemeDialog();
+  void installUserStyles(QString url);
 
 private Q_SLOTS:
   void startStream(bool video, bool audio, int width, int height, int frameRate,