Add a dark theme for spinner.

app/src/spinner/java/org/thoughtcrime/securesms/SpinnerApplicationContext.kt

@@ -7,6 +7,7 @@ import org.signal.core.util.logging.Log
 import org.signal.spinner.Spinner
 import org.signal.spinner.Spinner.DatabaseConfig
 import org.signal.spinner.SpinnerLogger
+import org.thoughtcrime.securesms.database.AttachmentTransformer
 import org.thoughtcrime.securesms.database.DatabaseMonitor
 import org.thoughtcrime.securesms.database.GV2Transformer
 import org.thoughtcrime.securesms.database.GV2UpdateTransformer
@@ -58,7 +59,18 @@ class SpinnerApplicationContext : ApplicationContext() {
       linkedMapOf(
         "signal" to DatabaseConfig(
           db = { SignalDatabase.rawDatabase },
-          columnTransformers = listOf(MessageBitmaskColumnTransformer, GV2Transformer, GV2UpdateTransformer, IsStoryTransformer, TimestampTransformer, ProfileKeyCredentialTransformer, MessageRangesTransformer, KyberKeyTransformer, RecipientTransformer)
+          columnTransformers = listOf(
+            MessageBitmaskColumnTransformer,
+            GV2Transformer,
+            GV2UpdateTransformer,
+            IsStoryTransformer,
+            TimestampTransformer,
+            ProfileKeyCredentialTransformer,
+            MessageRangesTransformer,
+            KyberKeyTransformer,
+            RecipientTransformer,
+            AttachmentTransformer
+          )
         ),
         "jobmanager" to DatabaseConfig(db = { JobDatabase.getInstance(this).sqlCipherDatabase }, columnTransformers = listOf(TimestampTransformer)),
         "keyvalue" to DatabaseConfig(db = { KeyValueDatabase.getInstance(this).sqlCipherDatabase }),

app/src/spinner/java/org/thoughtcrime/securesms/database/AttachmentTransformer.kt

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2024 Signal Messenger, LLC
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+package org.thoughtcrime.securesms.database
+
+import android.database.Cursor
+import org.signal.core.util.requireInt
+import org.signal.spinner.ColumnTransformer
+
+object AttachmentTransformer : ColumnTransformer {
+  override fun matches(tableName: String?, columnName: String): Boolean {
+    return (tableName == AttachmentTable.TABLE_NAME || tableName == null) && columnName == AttachmentTable.TRANSFER_STATE
+  }
+
+  override fun transform(tableName: String?, columnName: String, cursor: Cursor): String? {
+    val value = cursor.requireInt(columnName)
+    val string = when (value) {
+      AttachmentTable.TRANSFER_PROGRESS_DONE -> "DONE"
+      AttachmentTable.TRANSFER_PROGRESS_PENDING -> "PENDING"
+      AttachmentTable.TRANSFER_PROGRESS_FAILED -> "FAILED"
+      AttachmentTable.TRANSFER_PROGRESS_STARTED -> "STARTED"
+      AttachmentTable.TRANSFER_PROGRESS_PERMANENT_FAILURE -> "PERMANENT_FAILURE"
+      else -> "UNKNOWN"
+    }
+    return "$string ($value)"
+  }
+}

spinner/lib/src/main/assets/css/main.css

@@ -1,8 +1,46 @@
+:root {
+  --background-color: #fff;
+  --table-header-background-color: #f0f0f0;
+  --text-color: #000;
+  --border-color: #000;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #333;
+    --table-header-background-color: #444;
+    --text-color: #fff;
+    --border-color: #888;
+  }
+
+  a {
+    color: #aaf;
+  }
+}
+
+[data-theme="dark"] {
+  --background-color: #333;
+  --table-header-background-color: #444;
+  --text-color: #fff;
+  --border-color: #888;
+
+  a {
+    color: #aaf;
+  }
+}
+
 html, body {
   font-family: 'Roboto Mono', monospace;
   font-variant-ligatures: none;
   font-size: 12px;
   width: 100%;
+  background: var(--background-color);
+  color: var(--text-color);
+}
+
+body {
+  margin: 0;
+  padding: 8px;
 }
 
 select, input, button {
@@ -20,9 +58,24 @@ table, th, td {
   color: #000;
 }
 
+.handsontable th {
+  color: var(--text-color);
+  background: var(--table-header-background-color);
+}
+
+.handsontable thead th.ht__highlight {
+  color: var(--text-color);
+  background: var(--table-header-background-color);
+}
+
+.handsontable td {
+  color: var(--text-color);
+  background: var(--background-color);
+}
+
 .query-input {
   width: calc(100% - 18px);
-  border: 1px solid black;
+  border: 1px solid var(--border-color);
   border-radius: 4px;
   height: 200px;
   margin-bottom: 2px;
@@ -42,18 +95,18 @@ ol.tabs {
   list-style-type: none;
   display: inline-block;
   padding: 8px;
-  border-bottom: 1px solid black;
+  border-bottom: 1px solid var(--border-color);
   font-size: 1rem;
 }
 
 .tabs li.active {
-  border: 1px solid black;
+  border: 1px solid var(--border-color);
   border-bottom: 0;
 }
 
 .tabs a {
   text-decoration: none;
-  color: black;
+  color: var(--text-color);
 }
 
 .collapse-header {
@@ -102,3 +155,9 @@ table.device-info, table.device-info tr, table.device-info td {
   height: 0.75rem;
   margin-bottom: 8px;
 }
+
+#theme-toggle {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}

spinner/lib/src/main/assets/js/main.js

@@ -17,6 +17,21 @@ function init() {
   if (typeof Handsontable !== 'undefined') {
     Handsontable.renderers.registerRenderer('nullRenderer', nullRenderer)
   }
+
+  document.querySelector('#theme-toggle').onclick = function() {
+    if (document.body.getAttribute('data-theme') === 'dark') {
+      document.body.removeAttribute('data-theme');
+      localStorage.removeItem('theme');
+    } else {
+      document.body.setAttribute('data-theme', 'dark');
+      localStorage.setItem('theme', 'dark');
+    }
+  }
+
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme) {
+    document.body.setAttribute('data-theme', savedTheme);
+  }
 }
 
 

spinner/lib/src/main/assets/partials/prefix.hbs

@@ -13,6 +13,8 @@
   Download Trace: <a href="/trace">Link</a>
 </div>
 
+<button id="theme-toggle">Toggle theme</button>
+
 <br />
 
 <div>

spinner/lib/src/main/assets/query.hbs

@@ -54,9 +54,10 @@
     {{> partials/suffix}}
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/sql-formatter/4.0.2/sql-formatter.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.20.0/ace.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.5/ace.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.20.0/mode-sql.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.5/mode-sql.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.20.0/theme-github.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.5/theme-github.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.5/theme-github_dark.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script type="text/javascript">
       let editor;
 
@@ -67,7 +68,7 @@
 
         editor = ace.edit(document.querySelector('.query-input'), {
           mode: 'ace/mode/sql',
-          theme: 'ace/theme/github',
+          theme: isDarkTheme() ? 'ace/theme/github_dark' : 'ace/theme/github',
           selectionStyle: 'text',
           showPrintMargin: false
         });
@@ -187,6 +188,10 @@
         return JSON.parse(historyRaw);
       }
 
+      function isDarkTheme() {
+        return document.body.getAttribute('data-theme') === 'dark'
+      }
+
       main();
 
     </script>