diff --git a/.gitignore b/.gitignore index 74be847c..2d29fe59 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,5 @@ test/dummy/tmp/ test/dummy/.sass-cache Gemfile.lock node_modules/ +dist/ +tmp/ diff --git a/Rakefile b/Rakefile index 7989ec19..2cf5afc9 100644 --- a/Rakefile +++ b/Rakefile @@ -8,6 +8,8 @@ require 'socket' require 'rake/testtask' require 'tmpdir' require 'securerandom' +require 'json' +require 'web_console/testing/erb_precompiler' EXPANDED_CWD = File.expand_path(File.dirname(__FILE__)) @@ -20,11 +22,11 @@ end namespace :test do desc "Run tests for templates" - task :templates => "templates:all" + task templates: "templates:all" namespace :templates do - task :all => [:daemonize, :npm, :rackup, :mocha, :kill] - task :serve => [:npm, :rackup] + task all: [ :daemonize, :npm, :rackup, :mocha, :kill ] + task serve: [ :npm, :rackup ] work_dir = Pathname(__FILE__).dirname.join("test/templates") pid_file = Pathname(Dir.tmpdir).join("web_console.#{SecureRandom.uuid}.pid") @@ -53,6 +55,67 @@ namespace :test do end end +namespace :ext do + rootdir = Pathname('extensions') + + desc 'Build Chrome Extension' + task chrome: 'chrome:build' + + namespace :chrome do + dist = Pathname('dist/crx') + extdir = rootdir.join(dist) + manifest_json = rootdir.join('chrome/manifest.json') + + directory extdir + + task build: [ extdir, 'lib:templates' ] do + cd rootdir do + cp_r [ 'img/', 'tmp/lib/' ], dist + `cd chrome && git ls-files`.split("\n").each do |src| + dest = dist.join(src) + mkdir_p dest.dirname + cp Pathname('chrome').join(src), dest + end + end + end + + # Generate a .crx file. + task crx: [ :build, :npm ] do + out = "crx-web-console-#{JSON.parse(File.read(manifest_json))["version"]}.crx" + cd(extdir) { sh "node \"$(npm bin)/crx\" pack ./ -p ../crx-web-console.pem -o ../#{out}" } + end + + # Generate a .zip file for Chrome Web Store. + task zip: [ :build ] do + version = JSON.parse(File.read(manifest_json))["version"] + cd(extdir) { sh "zip -r ../crx-web-console-#{version}.zip ./" } + end + + desc 'Launch a browser with the chrome extension.' + task run: [ :build ] do + cd(rootdir) { sh "sh ./script/run_chrome.sh --load-extension=#{dist}" } + end + end + + task :npm do + cd(rootdir) { sh "npm install --silent" } + end + + namespace :lib do + templates = Pathname('lib/web_console/templates') + tmplib = rootdir.join('tmp/lib/') + js_erb = FileList.new(templates.join('**/*.js.erb')) + dirs = js_erb.pathmap("%{^#{templates},#{tmplib}}d") + + task templates: dirs + js_erb.pathmap("%{^#{templates},#{tmplib}}X") + + dirs.each { |d| directory d } + rule '.js' => [ "%{^#{tmplib},#{templates}}X.js.erb" ] do |t| + File.write(t.name, WebConsole::Testing::ERBPrecompiler.new(t.source).build) + end + end +end + Bundler::GemHelper.install_tasks task default: :test diff --git a/extensions/README.markdown b/extensions/README.markdown new file mode 100644 index 00000000..4e8b2222 --- /dev/null +++ b/extensions/README.markdown @@ -0,0 +1,12 @@ +# Web Console Browser Extensions + +## Development + +### Quickstart + +``` +$ git clone https://github.com/rails/web-console.git +$ cd web-console +$ bundle install +$ bundle exec rake ext:chrome:run +``` diff --git a/extensions/chrome/html/devtools.html b/extensions/chrome/html/devtools.html new file mode 100644 index 00000000..a9e8fa9f --- /dev/null +++ b/extensions/chrome/html/devtools.html @@ -0,0 +1,4 @@ + + + + diff --git a/extensions/chrome/html/panel.html b/extensions/chrome/html/panel.html new file mode 100644 index 00000000..c6828546 --- /dev/null +++ b/extensions/chrome/html/panel.html @@ -0,0 +1,7 @@ + + + +
+ + + diff --git a/extensions/chrome/js/background.js b/extensions/chrome/js/background.js new file mode 100644 index 00000000..f364bfef --- /dev/null +++ b/extensions/chrome/js/background.js @@ -0,0 +1,98 @@ +var tabInfo = {}; +var ports = {}; + +initPanelMessage(); +initReqRes(); +initHttpListener(); +initNavListener(); + +function panelMessage(tabId, type, msg) { + msg = msg || {}; + msg.type = type; + if (ports[tabId]) { + ports[tabId].postMessage(msg); + } +} + +function sendSessionId(tabId) { + panelMessage(tabId, 'session-id', { sessionId: tabInfo[tabId].sessionId }); +} + +function removeConsole(tabId) { + panelMessage(tabId, 'remove-console'); +} + +function initPanelMessage() { + chrome.runtime.onConnect.addListener(onConnect); + + function handleMessage(msg) { + if (msg.type === 'session-id') { + sendSessionId(msg.tabId); + } + } + + function onConnect(newPort) { + ports[newPort.name] = newPort; + newPort.onMessage.addListener(handleMessage); + } +} + +function initReqRes() { + chrome.runtime.onMessage.addListener(handleMessage); + + function handleMessage(req, sender, sendResponse) { + if (req.type === 'request') { + var url = tabInfo[req.tabId].remoteHost + '/' + req.url; + REPLConsole.request(req.method, url, req.params, function(xhr) { + sendResponse({ status: xhr.status, responseText: xhr.responseText }); + }); + } + return true; + } +} + +function initHttpListener() { + var requestFilter = { + types: [ 'main_frame' ], + urls: [ 'http://*/*', 'https://*/*' ] + }; + + // Fired when a request is completed. + chrome.webRequest.onCompleted.addListener( + onResponse, requestFilter, [ 'responseHeaders' ] + ); + + function getHeaders(details) { + return details.responseHeaders.reduce(reduceFunc, {}); + } + + function reduceFunc(obj, header) { + obj[header.name] = header.value; + return obj; + } + + function onResponse(details) { + var headers = getHeaders(details); + var sessionId; + if (sessionId = headers['X-Web-Console-Session-Id']) { + tabInfo[details.tabId] = { + sessionId: sessionId, + remoteHost: details.url.match(/([^:]+:\/\/[^\/]+)\/?/)[1] + }; + } + } +} + +function initNavListener() { + // Fired when a document is completely loaded and initialized. + chrome.webNavigation.onCompleted.addListener(function(details) { + if (filter(details)) { + sendSessionId(details.tabId); + removeConsole(details.tabId); + } + }); + + function filter(details) { + return details.frameId === 0 && tabInfo[details.tabId]; + } +} diff --git a/extensions/chrome/js/devtools.js b/extensions/chrome/js/devtools.js new file mode 100644 index 00000000..352c6282 --- /dev/null +++ b/extensions/chrome/js/devtools.js @@ -0,0 +1,4 @@ +var label = 'Console (Rails)'; +var icon = 'img/icon_128.png'; +var html = 'html/panel.html'; +chrome.devtools.panels.create(label, icon, html); diff --git a/extensions/chrome/js/panel.js b/extensions/chrome/js/panel.js new file mode 100644 index 00000000..80a6669b --- /dev/null +++ b/extensions/chrome/js/panel.js @@ -0,0 +1,40 @@ +var tabId = chrome.devtools.inspectedWindow.tabId; +var port = chrome.runtime.connect({ name: tabId.toString() }); +var repl; + +// We need to avoid the sandbox of Chrome DevTools via the messaging system. +REPLConsole.request = function(method, url, params, callback) { + chrome.runtime.sendMessage({ + tabId: tabId, + type: 'request', + method: method, + url: url, + params: params + }, callback); +}; + +// Handle messages from the background script. +port.onMessage.addListener(function(msg) { + if (msg.type === 'session-id') { + updateRemotePath(msg.sessionId); + } else if (msg.type === 'remove-console') { + removeConsole(); + } +}); + +function updateRemotePath(sessionId) { + var remotePath = 'console/repl_sessions/' + sessionId; + if (repl) { + repl.remotePath = remotePath; + } else { + repl = REPLConsole.installInto('console', { remotePath: remotePath }); + } +} + +function removeConsole() { + var script = 'if (REPLConsole && REPLConsole.currentSession) REPLConsole.currentSession.uninstall()'; + chrome.devtools.inspectedWindow.eval(script); +} + +port.postMessage({ type: 'session-id', tabId: tabId }); +removeConsole(); diff --git a/extensions/chrome/manifest.json b/extensions/chrome/manifest.json new file mode 100644 index 00000000..d9ffc413 --- /dev/null +++ b/extensions/chrome/manifest.json @@ -0,0 +1,19 @@ +{ + "name": "Rails Web Console", + "version": "0.0.0", + "manifest_version": 2, + "background": { + "scripts": ["lib/console.js", "js/background.js"] + }, + "icons": { + "128": "img/icon_128.png" + }, + "devtools_page": "html/devtools.html", + "permissions": [ + "webRequest", + "webNavigation", + "http://*/*", + "https://*/*" + ], + "homepage_url": "https://github.com/rails/web-console" +} diff --git a/extensions/img/icon_128.png b/extensions/img/icon_128.png new file mode 100644 index 00000000..1c9fbbd4 Binary files /dev/null and b/extensions/img/icon_128.png differ diff --git a/extensions/package.json b/extensions/package.json new file mode 100644 index 00000000..4153ba23 --- /dev/null +++ b/extensions/package.json @@ -0,0 +1,7 @@ +{ + "name": "dev", + "version": "0.0.0", + "devDependencies": { + "crx": "^3.0.2" + } +} diff --git a/extensions/script/run_chrome.sh b/extensions/script/run_chrome.sh new file mode 100644 index 00000000..6704544b --- /dev/null +++ b/extensions/script/run_chrome.sh @@ -0,0 +1,24 @@ +#!/bin/sh + +is_command() { + type $1 > /dev/null 2>&1 +} + +find_chrome_binary() { + for name in 'chromium' 'google-chrome' 'chromium-browser'; do + if is_command $name; then + echo $name + return + fi + done +} + +CHROME_BINARY=${CHROME_BINARY:-`find_chrome_binary`} + +if is_command $CHROME_BINARY; then + $CHROME_BINARY $@ +else + echo 'ERROR: Chrome is not found.' + echo 'Please try "CHROME_BINARY=path/to/chrome".' + exit 1 +fi diff --git a/lib/web_console/templates/console.js.erb b/lib/web_console/templates/console.js.erb index 5c5aa06f..5a961217 100644 --- a/lib/web_console/templates/console.js.erb +++ b/lib/web_console/templates/console.js.erb @@ -61,11 +61,8 @@ function REPLConsole(config) { this.commandStorage = new CommandStorage(); this.prompt = getConfig('promptLabel', ' >>'); this.remotePath = getConfig('remotePath'); - this.request = getConfig('request', this.request); } -REPLConsole.prototype.request = request; - REPLConsole.prototype.getUrl = function(path) { if (path) { return this.remotePath + '/' + path; @@ -74,19 +71,31 @@ REPLConsole.prototype.getUrl = function(path) { } }; -REPLConsole.prototype.commandHandle = function(line) { +REPLConsole.prototype.commandHandle = function(line, callback) { var self = this; var params = 'input=' + encodeURIComponent(line); + callback = callback || function() {}; - this.request('PUT', self.getUrl(), params, function(xhr) { - var response = JSON.parse(xhr.responseText); - self.writeOutput(response.output); - }, function(xhr) { + function isSuccess(status) { + return status >= 200 && status < 300 || status === 304; + } + + putRequest(self.getUrl(), params, function(xhr) { var response = JSON.parse(xhr.responseText); - self.writeError(response.output); + var result = isSuccess(xhr.status); + if (result) { + self.writeOutput(response.output); + } else { + self.writeError(response.output); + } + callback(result, response); }); }; +REPLConsole.prototype.uninstall = function() { + this.container.parentNode.removeChild(this.container); +}; + REPLConsole.prototype.install = function(container) { var _this = this; @@ -126,8 +135,8 @@ REPLConsole.prototype.install = function(container) { // Make the console resizable. function resizeContainer(ev) { - var startY = ev.clientY; - var startHeight = parseInt(document.defaultView.getComputedStyle(container).height, 10); + var startY = ev.clientY; + var startHeight = parseInt(document.defaultView.getComputedStyle(container).height, 10); var scrollTopStart = consoleOuter.scrollTop; var clientHeightStart = consoleOuter.clientHeight; @@ -164,6 +173,7 @@ REPLConsole.prototype.install = function(container) { } // Initialize + this.container = container; this.outer = consoleOuter; this.inner = findChild(this.outer, 'console-inner'); this.clipboard = findChild(container, 'clipboard'); @@ -446,6 +456,26 @@ REPLConsole.installInto = function(id, options) { // It allows to operate the current session from the other scripts. REPLConsole.currentSession = null; +// This line is for the Firefox Add-on, because it doesn't have XMLHttpRequest as default. +// And so we need to require a module compatible with XMLHttpRequest from SDK. +REPLConsole.XMLHttpRequest = typeof XMLHttpRequest === 'undefined' ? null : XMLHttpRequest; + +REPLConsole.request = function request(method, url, params, callback) { + var xhr = new REPLConsole.XMLHttpRequest(); + + xhr.open(method, url, true); + xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); + xhr.setRequestHeader("Accept", "<%= Mime::WEB_CONSOLE_V2 %>"); + xhr.send(params); + + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + callback(xhr); + } + }; +}; + // DOM helpers function hasClass(el, className) { var regex = new RegExp('(?:^|\\s)' + className + '(?!\\S)', 'g'); @@ -497,40 +527,16 @@ function escapeHTML(html) { } // XHR helpers -function request(method, url, params, ok, fail) { - var xhr = new XMLHttpRequest(); - - xhr.open(method, url, true); - xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); - xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); - xhr.setRequestHeader("Accept", "<%= Mime::WEB_CONSOLE_V2 %>"); - xhr.send(params); - - function isSuccess(status) { - return status >= 200 && status < 300 || status === 304; - } - - // optional callbacks - ok = ok || function() {}; - fail = fail || function() {}; - - xhr.onreadystatechange = function() { - if (xhr.readyState === 4) { - if (isSuccess(xhr.status)) { - ok(xhr); - } else { - fail(xhr); - } - } - } +function postRequest() { + REPLConsole.request.apply(this, ["POST"].concat([].slice.call(arguments))); } -function postRequest(url, params, callback) { - request("POST", url, params, callback); +function putRequest() { + REPLConsole.request.apply(this, ["PUT"].concat([].slice.call(arguments))); } -function putRequest(url, params, callback) { - request("PUT", url, params, callback); +if (typeof exports === 'object') { + exports.REPLConsole = REPLConsole; +} else { + window.REPLConsole = REPLConsole; } - -window.REPLConsole = REPLConsole; diff --git a/lib/web_console/templates/style.css.erb b/lib/web_console/templates/style.css.erb index a533004a..156225bf 100644 --- a/lib/web_console/templates/style.css.erb +++ b/lib/web_console/templates/style.css.erb @@ -21,3 +21,7 @@ .console .clipboard { height: 0px; padding: 0px; margin: 0px; width: 0px; margin-left: -1000px; } .console .console-prompt-label { display: inline; color: #FFF; background: none repeat scroll 0% 0% #333; border: 0; padding: 0; } .console .console-prompt-display { display: inline; color: #FFF; background: none repeat scroll 0% 0% #333; border: 0; padding: 0; } +.console.full-screen { height: 100%; } +.console.full-screen .console-outer { padding-top: 3px; } +.console.full-screen .resizer { display: none; } +.console.full-screen .close-button { display: none; } diff --git a/lib/web_console/testing/erb_precompiler.rb b/lib/web_console/testing/erb_precompiler.rb new file mode 100644 index 00000000..29cd050a --- /dev/null +++ b/lib/web_console/testing/erb_precompiler.rb @@ -0,0 +1,25 @@ +require 'web_console/testing/helper' +require 'web_console/testing/fake_middleware' + +module WebConsole + module Testing + # This class is to pre-compile 'templates/*.erb'. + class ERBPrecompiler + def initialize(path) + @erb = ERB.new(File.read(path)) + @view = FakeMiddleware.new( + view_path: Helper.gem_root.join('lib/web_console/templates'), + ).view + end + + def build + @erb.result(binding) + end + + def method_missing(name, *args, &block) + return super unless @view.respond_to?(name) + @view.send(name, *args, &block) + end + end + end +end diff --git a/lib/web_console/testing/fake_middleware.rb b/lib/web_console/testing/fake_middleware.rb new file mode 100644 index 00000000..b1a652f8 --- /dev/null +++ b/lib/web_console/testing/fake_middleware.rb @@ -0,0 +1,50 @@ +require 'action_view' +require 'action_dispatch' +require 'json' +require 'web_console/whitelist' +require 'web_console/request' + +module WebConsole + module Testing + class FakeMiddleware + DEFAULT_HEADERS = { "Content-Type" => "application/javascript" } + + def initialize(opts) + @headers = opts.fetch(:headers, DEFAULT_HEADERS) + @req_path_regex = opts[:req_path_regex] + @view_path = opts[:view_path] + end + + def call(env) + [ 200, @headers, [ render(req_path(env)) ] ] + end + + def view + @view ||= create_view + end + + private + + # extract target path from REQUEST_PATH + def req_path(env) + env["REQUEST_PATH"].match(@req_path_regex)[1] + end + + def render(template) + view.render(template: template, layout: nil) + end + + def create_view + lookup_context = ActionView::LookupContext.new(@view_path) + lookup_context.cache = false + FakeView.new(lookup_context) + end + + class FakeView < ActionView::Base + def render_inlined_string(template) + render(template: template, layout: "layouts/inlined_string") + end + end + end + end +end diff --git a/lib/web_console/testing/helper.rb b/lib/web_console/testing/helper.rb new file mode 100644 index 00000000..00a7fa66 --- /dev/null +++ b/lib/web_console/testing/helper.rb @@ -0,0 +1,9 @@ +module WebConsole + module Testing + module Helper + def self.gem_root + Pathname(File.expand_path('../../../../', __FILE__)) + end + end + end +end diff --git a/test/templates/config.ru b/test/templates/config.ru index 9b016cd0..7fcdcb4c 100644 --- a/test/templates/config.ru +++ b/test/templates/config.ru @@ -1,55 +1,7 @@ -require "action_view" -require "pathname" -require "action_dispatch" -require "web_console" +require "web_console/testing/fake_middleware" TEST_ROOT = Pathname(__FILE__).dirname -class FakeMiddleware - DEFAULT_HEADERS = {"Content-Type" => "application/javascript"} - - def initialize(opts) - @headers = opts.fetch(:headers, DEFAULT_HEADERS) - @req_path_regex = opts[:req_path_regex] - @view_path = opts[:view_path] - end - - def call(env) - [200, headers, [render(req_path(env))]] - end - - private - - attr_reader :headers - attr_reader :req_path_regex - attr_reader :view_path - - # extract target path from REQUEST_PATH - def req_path(env) - env["REQUEST_PATH"].match(req_path_regex)[1] - end - - def render(template) - view.render(template: template, layout: nil) - end - - def view - @view ||= create_view - end - - def create_view - lookup_context = ActionView::LookupContext.new(view_path) - lookup_context.cache = false - FakeView.new(lookup_context) - end - - class FakeView < ActionView::Base - def render_inlined_string(template) - render(template: template, layout: "layouts/inlined_string") - end - end -end - # e.g. "/node_modules/mocha/mocha.js" map "/node_modules" do node_modules = TEST_ROOT.join("node_modules") @@ -61,7 +13,7 @@ end # test runners map "/html" do - run FakeMiddleware.new( + run WebConsole::Testing::FakeMiddleware.new( req_path_regex: %r{^/html/(.*)}, headers: {"Content-Type" => "text/html"}, view_path: TEST_ROOT.join("html"), @@ -69,15 +21,27 @@ map "/html" do end map "/spec" do - run FakeMiddleware.new( + run WebConsole::Testing::FakeMiddleware.new( req_path_regex: %r{^/spec/(.*)}, view_path: TEST_ROOT.join("spec"), ) end map "/templates" do - run FakeMiddleware.new( + run WebConsole::Testing::FakeMiddleware.new( req_path_regex: %r{^/templates/(.*)}, view_path: TEST_ROOT.join("../../lib/web_console/templates"), ) end + +map "/mock/repl/result" do + headers = { 'Content-Type' => 'application/json' } + body = [ { output: '=> "fake-result"\n' }.to_json ] + run lambda { |env| [ 200, headers, body ] } +end + +map "/mock/repl/error" do + headers = { 'Content-Type' => 'application/json' } + body = [ { output: 'fake-error-message' }.to_json ] + run lambda { |env| [ 400, headers, body ] } +end diff --git a/test/templates/spec/repl_console_spec.js b/test/templates/spec/repl_console_spec.js index a8903a9b..1ed7f56e 100644 --- a/test/templates/spec/repl_console_spec.js +++ b/test/templates/spec/repl_console_spec.js @@ -1,6 +1,58 @@ describe("REPLConsole", function() { SpecHelper.prepareStageElement(); + describe("#commandHandle()", function() { + beforeEach(function() { + this.elm = document.createElement('div'); + this.elm.innerHTML = '
'; + this.stageElement.appendChild(this.elm); + }); + + context("remotePath: /mock/repl/result", function() { + beforeEach(function(done) { + var self = this; + self.console = REPLConsole.installInto('console', { remotePath: '/mock/repl/result' }); + self.console.commandHandle('fake-input', function(result, response) { + self.result = result; + self.response = response; + self.message = self.elm.getElementsByClassName('console-message')[0]; + done(); + }); + }); + it("should be a successful request", function() { + assert.ok(this.result); + }) + it("should have fake-result in output", function() { + assert.match(this.response.output, /"fake-result"/); + }); + it("should not have .error-message", function() { + assert.notOk(hasClass(this.message, 'error-message')); + }); + }); + + context("remotePath: /mock/repl/error", function() { + beforeEach(function(done) { + var self = this; + self.console = REPLConsole.installInto('console', { remotePath: '/mock/repl/error' }); + self.console.commandHandle('fake-input', function(result, response) { + self.result = result; + self.response = response; + self.message = self.elm.getElementsByClassName('console-message')[0]; + done(); + }); + }); + it("should not be a successful request", function() { + assert.notOk(this.result); + }); + it("should have fake-error-message in output", function() { + assert.match(this.response.output, /fake-error-message/); + }); + it("should have .error-message", function() { + assert.ok(hasClass(this.message, 'error-message')); + }); + }); + }); + describe(".installInto()", function() { beforeEach(function() { this.elm = document.createElement('div');