Add userscript to DHT website, update instructions and stylesheet

build.py

@@ -151,6 +151,7 @@ def build_renderer():
 
 def build_website():
   tracker_file_html = "bld/track.html"
+  tracker_file_userscript = "bld/track.user.js"
   viewer_file = "bld/viewer.html"
   web_style_file = "bld/web/style.css"
   
@@ -158,6 +159,7 @@ def build_website():
   
   os.makedirs("bld/web/build", exist_ok = True)
   shutil.copyfile(tracker_file_html, "bld/web/build/track.html")
+  shutil.copyfile(tracker_file_userscript, "bld/web/build/track.user.js")
   shutil.copyfile(viewer_file, "bld/web/build/viewer.html")
   
   if USE_JAVA:

web/index.php

@@ -15,23 +15,45 @@
     <div class="inner">
       <h1>Discord History Tracker <span class="version">BETA&nbsp;v.9</span>&nbsp;<span class="bar">|</span>&nbsp;<span class="notes"><a href="https://github.com/chylex/Discord-History-Tracker/wiki/Release-Notes">Release&nbsp;Notes</a></span></h1>
       <p>Discord History Tracker is a browser script that lets you locally save chat history in your servers, groups, and private conversations.</p>
-      <p>When the script is active, it will automatically load history of the selected text channel up to the first message, and let you download it for offline viewing in your browser.</p>
+      <p>When the script is active, it will load history of the selected text channel up to the first message, and let you download it for offline viewing in your browser.</p>
       
-      <img src="img/tracker.png" width="851" class="dht">
+      <img src="img/tracker.png" width="851" class="dht bordered">
       
       <h2>How to Save History</h2>
       <h3>Running the Script</h3>
-      <ol>
-        <li>Click <a href="javascript:" id="tracker-copy-button">Copy to Clipboard</a> to copy the script<noscript> (requires JavaScript)</noscript></li>
-        <li>Open the JavaScript console in your browser or the Discord app by pressing <strong>Ctrl</strong>+<strong>Shift</strong>+<strong>I</strong>, and selecting the <strong>Console</strong> tab</li>
-        <li>Paste the script into the console, and press <strong>Enter</strong> to run it</li>
-        <li>Press <strong>Ctrl</strong>+<strong>Shift</strong>+<strong>I</strong> again to close the console</li>
-      </ol>
       
-      <p id="tracker-copy-issue">Your browser may not support copying to clipboard, please try copying the script manually:</p>
-      <textarea id="tracker-copy-contents"><?php include "./build/track.html"; ?></textarea>
+      <h4>Option 1: Userscript</h4>
+      <div class="quote">
+        <p><strong>Preferred option.</strong> It requires a browser addon, but will keep DHT updated and make it easily accessible on the Discord website.</p>
+        
+        <ol>
+          <li>Install a userscript manager addon if you don't already have one:
+            <ul>
+              <li><a href="https://violentmonkey.github.io/get-it/">Violentmonkey</a> (Firefox, Chrome)</li>
+              <li><a href="https://tampermonkey.net/">Tampermonkey</a> (Edge, Opera, Safari)</li>
+              <li><a href="https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/">Greasemonkey</a> (Firefox) may work, but is not recommended as it doesn't work with many userscripts</li>
+            </ul>
+          </li>
+          <li>Click <a href="build/track.user.js">Install Userscript</a> to prompt an installation into the userscript manager</li>
+          <li>Open <a href="https://discordapp.com/channels/@me">Discord</a>, and view any server, group, or private conversation (it will not work in Friends list)</li>
+          <li>Click <strong>DHT</strong> in the top right corner:<br><img src="img/button.png" class="bordered"></li>
+        </ol>
+      </div>
       
-      <p>Please note that it's no longer possible to use DHT as a bookmark. Discord updated their <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">CSP</a> rules which improve website security, but as a result, browsers will no longer execute bookmark scripts on the website.</p>
+      <h4>Option 2: Browser Console</h4>
+      <div class="quote">
+        <p>The console is the only way to use DHT directly in the desktop app.</p>
+        
+        <ol>
+          <li>Click <a href="javascript:" id="tracker-copy-button">Copy to Clipboard</a> to copy the script<noscript> (requires JavaScript)</noscript></li>
+          <li>Press <strong>Ctrl</strong>+<strong>Shift</strong>+<strong>I</strong> in your browser or the Discord app, and select the <strong>Console</strong> tab</li>
+          <li>Paste the script into the console, and press <strong>Enter</strong> to run it</li>
+          <li>Press <strong>Ctrl</strong>+<strong>Shift</strong>+<strong>I</strong> again to close the console</li>
+        </ol>
+        
+        <p id="tracker-copy-issue">Your browser may not support copying to clipboard, please try copying the script manually:</p>
+        <textarea id="tracker-copy-contents"><?php include "./build/track.html"; ?></textarea>
+      </div>
       
       <h3>Using the Script</h3>
       <p>When running for the first time, you will see a <strong>Settings</strong> dialog where you can configure the script. These settings will be remembered as long as you don't delete cookies in your browser.</p>

web/style.css

@@ -5,7 +5,7 @@ body {
   font-size: 18px;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
   color: rgba(255, 255, 255, 0.8);
-  background-color: #36393E;
+  background-color: #3F4145;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
 }
@@ -18,7 +18,7 @@ body {
 
 p {
   margin: 12px 0 14px;
-  line-height: 130%;
+  line-height: 140%;
 }
 
 a {
@@ -65,32 +65,61 @@ h2 {
 h3 {
   margin: 24px 0 0;
   font-size: 22px;
-  color: rgba(255, 255, 255, 0.62);
+  color: rgba(255, 255, 255, 0.65);
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
 }
 
-h2 + h3 {
+h2 + h3, h3 + h4 {
   margin-top: 12px;
 }
 
+h4 {
+  margin: 22px 0 0;
+  font-size: 19px;
+  color: rgba(255, 255, 255, 0.6);
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
+}
+
 ul, ol {
-  margin-top: 12px;
+  margin-top: -6px;
+  margin-left: -6px;
 }
 
 li {
-  line-height: 140%;
+  line-height: 165%;
+}
+
+li > ul, li > ol {
+  margin: 0 0 0 -16px;
+}
+
+li > img {
+  margin-top: 8px;
 }
 
 .dht {
-  border: 2px dashed rgba(255, 255, 255, 0.35);
-  border-radius: 9px;
-  padding: 3px;
   max-width: 100%;
   max-height: auto;
+}
+
+.dht.bordered {
+  border-radius: 9px;
+}
+
+.bordered {
+  padding: 3px;
+  border: 2px dashed rgba(255, 255, 255, 0.25);
+  border-radius: 3px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
 }
 
+.quote {
+  border-left: 2px dashed rgba(255, 255, 255, 0.1);
+  margin-left: 2px;
+  padding-left: 12px;
+}
+
 .links {
   overflow: hidden;
   text-overflow: ellipsis;