scaffolding out for complete rewrite

.gitignore

@@ -1 +1,2 @@
-compass_app_log.txt
+/node_modules/
+/dist/

README.md

@@ -1,6 +1,8 @@
 JSON Formatter
 ==============
 
+> This branch is a WIP
+
 Chrome extension for printing JSON and JSONP nicely when you visit it 'directly' in a browser tab.
 
 Features

app/_locales/en/messages.json

@@ -0,0 +1,10 @@
+{
+  "appName": {
+    "message": "JSON Formatter",
+    "description": "The name of the application"
+  },
+  "appDescription": {
+    "message": "Makes JSON easy to read. Open source.",
+    "description": "The description of the application"
+  }
+}

app/js/background.coffee

@@ -0,0 +1,50 @@
+# chrome.runtime.onInstalled.addListener (details) ->
+#   console.log 'onInstalled', details.previousVersion, details.reason
+
+getSettings = require './get-settings'
+
+# Get (initialised) settings first
+getSettings (settings) ->
+
+  # Update our local settings var whenever the real settings change
+  chrome.storage.onChanged.addListener (changes, namespace) ->
+    console.log 'onChanged', namespace, changes
+    if namespace is 'sync' && changes.settings?
+      settings = changes.settings.newValue
+
+  if settings.debug
+    console.log 'Main background script running.'
+
+  queue = {}
+
+  chrome.webRequest.onHeadersReceived.addListener(
+    (details) ->
+      for header in details.responseHeaders
+        if header.name.toLowerCase() is 'content-type'
+          mime = header.value.split(';')[0].trim()
+          queue[details.tabId] = mime
+          break
+    ,
+    {
+      urls:  ['<all_urls>']
+      types: ['main_frame']
+    },
+    ['responseHeaders']
+  )
+
+  chrome.runtime.onConnect.addListener (port) ->
+    throw new Error "Unknown port name: #{port.name}" if port.name isnt 'jf'
+
+    console.log 'Port connection from tab', port.sender.tab.id if settings.debug
+
+    # Immediately send a message to the client page saying what its MIME type is
+    tabId = port.sender.tab.id
+    port.postMessage ['mime', queue[tabId], settings]
+    delete queue[tabId]
+
+    console.log 'Remaining queue', queue if settings.debug
+
+    port.onMessage.addListener (payload) ->
+      console.assert payload.length is 2, 'Payload must be array of length 2'    
+      [messageType, message] = payload
+      console.log "Received #{messageType} message", message if settings.debug

app/js/content.coffee

@@ -0,0 +1,86 @@
+startTime = Date.now()
+
+mime = null
+settings = null
+
+logTime = (msg) ->
+  console.log "#{Date.now() - startTime}ms - #{msg}"
+
+Deferred = require('simply-deferred').Deferred
+gotMime = new Deferred
+
+# Establish port with background page
+port = chrome.runtime.connect name: 'jf'
+
+# Listen for messages from background page
+port.onMessage.addListener (msg) ->
+  console.log 'Got message', msg
+
+  [messageType, messageBody] = msg
+
+  switch msg[0]
+    when 'mime'
+      mime = msg[1]
+      settings = msg[2]
+      console.assert mime?, 'Got MIME type'
+      console.assert settings?, 'Got settings'
+      logTime "Got MIME: #{mime}" if settings.debug
+      console.log 'Got settings', settings if settings.debug
+      gotMime.resolve()
+
+    when 'formatting'
+      todo()
+      format = messageBody
+
+    when 'invalid'
+      # The background page didn't like what we sent it (in combination with the MIME type we specified).
+      todo()
+
+    when 'formatted'
+      todo()
+
+    else
+      throw new Error "JSON Formatter: Unknown message type from background script: #{messageType}"
+
+# Functions for showing/hiding the page as needed
+hiddenPage = false
+hidePage = ->
+  document.body.style.display = 'none'
+  hiddenPage = true
+unhidePage = ->
+  if hiddenPage
+    document.body.style.display = null
+    hiddenPage = false
+
+# Wait for the DOM to be ready
+document.addEventListener 'DOMContentLoaded', (event) ->
+  logTime 'DOM ready'
+
+  # See if there's a 'body>pre' (indicating it's probably a text page)
+  pre = document.querySelector 'body>pre'
+
+  if pre?
+    # Hide the body to prevent FOUC
+    logTime '<pre> element found; possibly a text page'
+    hidePage()
+
+    # Automatically unhide the page if it's hidden for ages
+    setTimeout ->
+      if hiddenPage
+        console.log 'JSON Formatter: Unhiding page due to long wait'
+        unhidePage()
+    , 1000
+
+    # Wait until we have the MIME type back
+    gotMime.then ->
+      if settings.jsonTypes.indexOf(mime) != -1
+        console.log "It is JSON (#{mime})" if settings.debug
+        unhidePage()
+
+      else if settings.jsonpTypes.indexOf(mime) != -1
+        console.log "It is possibly JSONP (#{mime})" if settings.debug
+        unhidePage()
+
+      else
+        console.log "Neither JSON nor JSONP (#{mime})" if settings.debug
+        unhidePage()

app/js/get-settings.coffee

@@ -0,0 +1,9 @@
+setDefaults = require './set-defaults'
+
+defaults =
+  debug: false
+
+module.exports = (callback) ->
+  setDefaults().then ->
+    chrome.storage.sync.get 'settings', (data) ->
+      callback(data.settings)

app/js/set-defaults.coffee

@@ -0,0 +1,25 @@
+Promise = require 'bluebird'
+assign = require 'lodash.assign'
+
+defaults =
+  debug: false
+  jsonTypes: ['application/json', 'text/json']
+  jsonpTypes: ['application/javascript', 'text/javascript']
+
+module.exports = ->
+  if not promise?
+    promise = new Promise (resolve) ->
+
+      chrome.storage.sync.get 'settings', (data) ->
+        console.log 'old settings', data.settings
+        settings = {}
+
+        for own key, value of defaults
+          settings[key] = (if data.settings[key]? then data.settings[key] else value)
+
+        chrome.storage.sync.set {settings: settings}, ->
+          if settings.debug
+            console.log 'Settings initialised', settings
+          resolve()
+
+  promise

app/manifest.json

@@ -0,0 +1,36 @@
+{
+  "name": "__MSG_appName__",
+  "version": "<%= version %>",
+  "manifest_version": 2,
+  "description": "__MSG_appDescription__",
+  "default_locale": "en",
+  "background": {
+    "scripts": [
+      "background.js"
+    ]
+  },
+  "homepage_url": "https://github.com/callumlocke/json-formatter",
+  "minimum_chrome_version": "30",
+  "icons": {
+    "128": "icons/128.png",
+    "32": "icons/32.png"
+  },
+  "background": {
+    "scripts": ["js/background.js"]
+  },
+  "options_page": "options/options.html",
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["js/content.js"],
+      "run_at": "document_start",
+      "all_frames": false
+    }
+  ],
+  "permissions": [
+    "<all_urls>",
+    "webRequest",
+    "webRequestBlocking",
+    "storage"
+  ]
+}

app/options/options.coffee

@@ -0,0 +1,24 @@
+load = ->
+  chrome.storage.sync.get 'settings', (data) ->
+    settings = data.settings
+    console.log 'Loaded', settings if settings.debug
+
+    $('#option-debug').prop('checked', settings.debug)
+    $('#option-jsonTypes').val(settings.jsonTypes.join('\n') + '\n')
+    $('#option-jsonpTypes').val(settings.jsonpTypes.join('\n') + '\n')
+
+
+$ ->
+  load()
+
+  $('#save').click ->
+    settings = {
+      debug: $('#option-debug').is(':checked')
+      jsonTypes: $('#option-jsonTypes').val().split('\n').filter((line) -> line.length)
+      jsonpTypes: $('#option-jsonpTypes').val().split('\n').filter((line) -> line.length)
+    }
+
+    chrome.storage.sync.set({settings}, ->
+      console.log 'Saved', settings if settings.debug
+      load()
+    )

app/options/options.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>JSON Formatter Options</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="bootstrap.css">
+    <link rel="stylesheet" href="options.css">
+  </head>
+  <body>
+    <div class="container">
+
+      <header class="page-header">
+        <h1>JSON Formatter</h1>
+        <p class="lead">Options</p>
+      </header>
+
+      <label><input type="checkbox" id="option-debug"> Debug mode</label>
+
+      <div>
+        <label for="option-jsonTypes">JSON types</label>
+        <textarea id="option-jsonTypes"></textarea>
+      </div>
+
+      <div>
+        <label for="option-jsonpTypes">JSONP types</label>
+        <textarea id="option-jsonpTypes"></textarea>
+      </div>
+
+      <button class="btn btn-info" id="save">Save</button>
+    </div>
+
+    <script src="jquery.js"></script>
+    <script src="bootstrap.js"></script>
+    <script src="options.js"></script>
+  </body>
+</html>

app/options/options.scss

@@ -0,0 +1,28 @@
+.container {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+h4 {
+  margin-top: 25px;
+}
+.row {
+  margin-bottom: 20px;
+}
+.row .row {
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+[class*="col-"] {
+  padding-top: 15px;
+  padding-bottom: 15px;
+  background-color: #eee;
+  background-color: rgba(86,61,124,.15);
+  border: 1px solid #ddd;
+  border: 1px solid rgba(86,61,124,.2);
+}
+
+hr {
+  margin-top: 40px;
+  margin-bottom: 40px;
+}