Showing history in control panel

src/_data/options.yml

@@ -11,6 +11,10 @@
         the list to the server. My goal is to make troll detection democratic.
   text: Share troll list to help improve the auto list
 
+- id: showHistory
+  checked: true
+  text: Show history in thread control panel
+
 - id: showAltText
   checked: true
   text: Show alt text (if available) below pictures

src/css/content.css.sass

@@ -81,9 +81,6 @@ div.post div.ablePic > img
 div.ableHighlight
   background-color: #eee
 
-.ableShow, .ignore, .able_STEVE_SMITH
-  cursor: pointer
-
 /* Highlight myself */
 div.ableMe
   background-color: #ffc
@@ -200,5 +197,7 @@ img.ableGravatar
   position: fixed
   right: 10px
   z-index: 1
-  a
-    cursor: pointer
+  ul
+    li
+      a
+        cursor: pointer

src/js/background.js.coffee

@@ -1,3 +1,4 @@
+MAX_HISTORY = 20
 Settings.load()
 
 chrome.extension.onRequest.addListener (request, sender, sendResponse) ->
@@ -18,6 +19,22 @@ chrome.extension.onRequest.addListener (request, sender, sendResponse) ->
       delete Settings.filters[f.type][f.target][f.text]
       Settings.save "filters"
       sendResponse filters: Settings.filters
+    when "history"
+      # Add any items that don't currently exist to history
+      for item in request.history
+        if (do ->
+          for currentItem in Settings.history
+            if item.id is currentItem.id
+              return false
+          return true)
+          Settings.history.push item
+
+      # Sort in reverse chronological order and cull
+      Settings.history.sort (a, b) -> b.id - a.id
+      Settings.history.pop() while Settings.history.length > MAX_HISTORY
+
+      Settings.save "history"
+      sendResponse history: Settings.history
     when "blockIframes"
       sendResponse settings.blockIframes
     when "reset"

src/js/content/controls.js.coffee

@@ -2,8 +2,23 @@ class Controls
   @load: ->
     @node    = document.createElement("div")
     @node.id = "ableControls"
-    @ul      = document.createElement("ul")
-    @node.appendChild @ul
+
+    # Build basic HTML for node, displaying history only if necessary
+    if Settings.showHistory
+      @node.innerHTML = """
+        <h3>History</h3>
+        <ul id="ableHistory"></ul>
+        <hr>
+        """
+    else
+      @node.innerHTML = ""
+    @node.innerHTML += """
+        <h3>Commands</h3>
+        <ul id="ableCommands"></ul>
+        """
+    document.body.appendChild @node
+    @history  = document.getElementById("ableHistory")
+    @commands = document.getElementById("ableCommands")
 
     @addControl "Unthread", ->
       if @textContent is "Unthread"
@@ -13,8 +28,6 @@ class Controls
         @textContent = "Unthread"
         Post.thread()
 
-    document.body.appendChild @node
-
   @addControl: (name, callback) ->
     li   = document.createElement("li")
     a    = document.createElement("a")
@@ -24,4 +37,15 @@ class Controls
 
     a.appendChild text
     li.appendChild a
-    @ul.appendChild li
+    @commands.appendChild li
+
+  @addHistory: (history) ->
+    for item in history
+      shortenedLink = item.href.substr(item.href.lastIndexOf("/") + 1, 20)
+      li = document.createElement("li")
+      li.innerHTML = """
+        <li>
+          <a href="#{item.href}#comment_#{item.id}">#{shortenedLink}</a>
+        </li>
+        """
+      @history.appendChild li

src/js/content/history.js.coffee

@@ -1,45 +1,14 @@
-formatDate = (milliseconds) ->
-  # Format date like November 23, 1984
-  date = new Date milliseconds
-  "#{months[date.getMonth()]} #{date.getDate()}, #{date.getFullYear()}"
-
-buildQuickload = ->
-  # May load beforehand if comments haven't been opened yet. In that case, make sure
-  # this doesn't run again
-  if $("#ableQuick").size() is 0
-    if settings.history.length > 0
-      # Set up quickload bar
-      $ul   = $ "<ul>"
-      date  = ""
-      count = 0
-
-      for value in settings.history
-        if count++ <= QUICKLOAD_MAX_ITEMS
-          shortenMatch = ARTICLE_SHORTEN_REGEX.exec(value.url)[FIRST_MATCH]
-          temp = formatDate value.timestamp
-
-          unless temp is date
-            date = temp
-            $ul = $ul.prepend """
-                              <li>
-                                <h4>#{date}</h4>
-                                <ul></ul>
-                              </li>
-                              """
-
-          $ul = $("li:first ul", $ul).prepend("""
-                                              <li>
-                                                <a href=\"http://reason.com/#{value.url}#comment_#{value.permalink}\">
-                                                  #{shortenMatch} (#{value.permalink})
-                                                </a>
-                                              </li>
-                                              """
-          ).parent().parent()
-
-      $quickload = $("<div id='ableQuick' class='ableBox'><h3>#{COMMENT_HISTORY}</h3></div>")
-        .append($ul)
-      if settings.autohideHistory
-        $quickload.addClass("ableAutohide")
-          .hover (-> $ul.slideDown QUICKLOAD_SPEED ),
-                 (-> $ul.slideUp   QUICKLOAD_SPEED )
-      $("body").append $quickload
+class History
+  @load: ->
+    @items = []
+    chrome.extension.sendRequest method: "history", history: @serialize(), (response) =>
+      Controls.addHistory response.history if Settings.showHistory
+
+  @serialize: ->
+    href = window.location.href.replace(/\#.*$/, "")
+    for comment in Post.comments.filter((c) -> c.isMe)
+      {
+        href:      href
+        id:        comment.id
+        timestamp: comment.timestamp
+      }

src/js/content/~init.js.coffee

@@ -11,4 +11,5 @@ chrome.extension.sendRequest method: "settings", (response) ->
 
   Post.load(Filter.all).runEverything()
 
+  History.load()
   Controls.load()

src/js/settings.js.coffee

@@ -33,6 +33,7 @@ class Settings
     queue:        []
     shareTrolls:  true
     showAltText:  true
+    showHistory:  true
     showGravatar: false
     showPictures: true
     showYouTube:  true