Add our toggleable features and such

src/General/css/style.css

@@ -97,10 +97,10 @@ a {
 #qr {
   z-index: 30;
 }
-#watcher {
+#thread-watcher {
   z-index: 8;
 }
-:root.fixed-watcher #watcher {
+:root.fixed-watcher #thread-watcher {
   z-index: 20;
 }
 .fixed #header-bar {
@@ -465,10 +465,10 @@ a.hide-announcement {
 }
 
 /* Thread Watcher */
-#watcher {
+#thread-watcher {
   position: absolute;
 }
-#watcher {
+#thread-watcher {
   padding-bottom: 3px;
   overflow: hidden;
   white-space: nowrap;
@@ -476,27 +476,27 @@ a.hide-announcement {
   max-height: 92%;
   overflow-y: auto;
 }
-:root.fixed-watcher #watcher {
+:root.fixed-watcher #thread-watcher {
   position: fixed;
 }
-:root:not(.fixed-watcher) #watcher:not(:hover) {
+:root:not(.fixed-watcher) #thread-watcher:not(:hover) {
   max-height: 210px;
   overflow-y: hidden;
 }
-#watcher > .move {
+#thread-watcher > .move {
   padding-top: 3px;
 }
-#watcher > div {
+#thread-watcher > div {
   max-width: 250px;
   overflow: hidden;
   padding-left: 3px;
   padding-right: 3px;
   text-overflow: ellipsis;
 }
-#watcher a {
+#thread-watcher a {
   text-decoration: none;
 }
-#watcher .move>.close {
+#thread-watcher .move>.close {
   position: absolute;
   right: 0px;
   top: 0px;

src/General/html/Monitoring/ThreadWatcher.html

@@ -1,5 +1,5 @@
 <div>
-  <span class="move">Thread Watcher <span id="watcher-status"></span></span>
+  <span class="move">Thread Watcher <span id="watcher-status"></span><a class=close href=javascript:;>×</a></span>
   <a class="menu-button" href="javascript:;">[<i></i>]</a>
 </div>
 <div id="watched-threads"></div>

src/Monitoring/ThreadWatcher.coffee

@@ -2,17 +2,29 @@ ThreadWatcher =
   init: ->
     return if !Conf['Thread Watcher']
 
+    @shortcut = sc = $.el 'a',
+      textContent: 'Watcher'
+      id:   'watcher-link'
+      href: 'javascript:;'
+      className: 'disabled'
+
     @db     = new DataBoard 'watchedThreads', @refresh, true
     @dialog = UI.dialog 'thread-watcher', 'top: 50px; left: 0px;', """
-    <%= grunt.file.read('html/Monitoring/ThreadWatcher.html').replace(/>\s+</g, '><').trim() %>
+    <%= grunt.file.read('src/General/html/Monitoring/ThreadWatcher.html').replace(/>\s+</g, '><').trim() %>
     """
     @status = $ '#watcher-status', @dialog
     @list   = @dialog.lastElementChild
 
     $.on d, 'QRPostSuccessful',   @cb.post
     $.on d, 'ThreadUpdate',       @cb.threadUpdate if g.VIEW is 'thread'
+    $.on sc, 'click', @toggleWatcher
+    $.on $('.move>.close', ThreadWatcher.dialog), 'click', @toggleWatcher
     $.on d, '4chanXInitFinished', @ready
 
+    if Conf['Toggleable Thread Watcher']
+      Header.addShortcut sc
+      $.addClass doc, 'fixed-watcher'
+
     now = Date.now()
     if (@db.data.lastChecked or 0) < now - 2 * $.HOUR
       @db.data.lastChecked = now
@@ -43,6 +55,9 @@ ThreadWatcher =
     ThreadWatcher.refresh()
     $.add d.body, ThreadWatcher.dialog
 
+    if Conf['Toggleable Thread Watcher']
+      ThreadWatcher.dialog.hidden = true
+
     return unless Conf['Auto Watch']
     $.get 'AutoWatch', 0, ({AutoWatch}) ->
       return unless thread = g.BOARD.threads[AutoWatch]