Backport changes from Pro (#1868)

Resolves tiny-pilot/tinypilot-pro#1467.

This PR isn’t urgent.
<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1868"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

Co-authored-by: Jan Heuermann <[email protected]>

Author: jotaen4tinypilot

app/static/css/style.css

@@ -37,6 +37,7 @@
   --brand-green: hsl(var(--brand-hue-green), 50%, 44%);
   --brand-green-dark: hsl(var(--brand-hue-green), 43%, 33%);
   --brand-green-light: hsl(var(--brand-hue-green), 34%, 70%);
+  --brand-green-lighter: hsl(var(--brand-hue-green), 65%, 88%);
   --brand-green-bright: hsl(var(--brand-hue-green), 70%, 45%);
   --brand-green-background: hsl(var(--brand-hue-green), 54%, 95%);
 
@@ -144,6 +145,7 @@ button,
   border: 1px solid var(--brand-metallic-medium);
   background: var(--brand-metallic-light)
     linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 60%);
+  user-select: none;
 }
 
 button:hover,

app/static/js/app.js

@@ -21,7 +21,11 @@ const overlayTracker = new OverlayTracker();
  * @see `DialogFailedEvent` for parameter `errorInfo`
  */
 function showError(errorInfo) {
-  console.error(`${errorInfo.title}:\n${errorInfo.details}`);
+  console.error(
+    `Title: ${errorInfo.title}\nMessage: ${
+      errorInfo.message || "-"
+    }\nDetails: ${errorInfo.details || "-"}`
+  );
   document.getElementById("error-dialog").setup(errorInfo);
   document.getElementById("error-overlay").show();
 }

app/templates/custom-elements/inline-message.html

@@ -13,6 +13,11 @@
       display: block;
     }
 
+    :host([variant="success"]) {
+      background-color: var(--brand-green-lighter);
+      border-color: var(--brand-green);
+    }
+
     :host([variant="info"]) {
       background-color: var(--brand-blue-lighter);
       border-color: var(--brand-blue);

app/templates/styleguide.html

@@ -376,6 +376,13 @@ <h2 class="section">Inline Message</h2>
         prominent styling than just regular text. Info messages are mostly
         informative, and while they may prompt action, they never require it.
       </inline-message>
+      <br />
+      <inline-message variant="success" show>
+        <strong>Success:</strong> We use success messages to reassure the user
+        that things are functioning as expected. We only use this in specific
+        contexts to highlight a valid and healthy system state. We don’t use
+        this as a general pattern to indicate success of operations.
+      </inline-message>
       <p>Some notes about usage:</p>
       <ul>
         <li>

dev-scripts/mock-scripts/read-update-log

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+# Mock version of /opt/tinypilot-privileged/scripts/read-update-log
+
+# Prepend random characters, to make the caller of the `read-update-log` script
+# believe new log output had been emitted on repetitive calls.
+echo "${RANDOM}: Update in progress..."

dev-scripts/mock-scripts/update

@@ -0,0 +1,19 @@
+#!/bin/bash
+
+# Mock version of /opt/tinypilot-privileged/scripts/update
+#
+# On device, the `tinypilot-updater` systemd service would facilitate invoking
+# the original script.
+
+echo '======== update-opts ========'
+
+# Output all update-opts for debugging purposes.
+if [[ -d /home/tinypilot/update-opts ]]; then
+  for file in /home/tinypilot/update-opts/*; do
+    echo "${file}: $(cat "${file}")"
+  done
+else
+  echo 'No update opts!'
+fi
+
+echo '============================='