Merge pull request #648 from ncreep/message-panel-view

Porting ScriptView to use MessagePanelView

Author: rgbkrk

lib/header-view.coffee

@@ -4,16 +4,9 @@ module.exports =
 class HeaderView extends View
 
   @content: ->
-    @div class: 'panel-heading padded heading header-view', =>
+    @div class: 'header-view', =>
       @span class: 'heading-title', outlet: 'title'
       @span class: 'heading-status', outlet: 'status'
-      @span
-        class: 'heading-close icon-remove-close pull-right'
-        outlet: 'closeButton'
-        click: 'close'
-
-  close: ->
-    atom.commands.dispatch @workspaceView(), 'script:close-view'
 
   setStatus: (status) ->
     @status.removeClass 'icon-alert icon-check icon-hourglass icon-stop'
@@ -22,6 +15,3 @@ class HeaderView extends View
       when 'stop' then @status.addClass 'icon-check'
       when 'kill' then @status.addClass 'icon-stop'
       when 'err' then @status.addClass 'icon-alert'
-
-  workspaceView: ->
-    atom.views.getView(atom.workspace)

lib/script-view.coffee

@@ -1,34 +1,25 @@
-HeaderView = require './header-view'
-ScriptOptionsView = require './script-options-view'
-
 {View, $$} = require 'atom-space-pen-views'
 
+HeaderView = require './header-view'
+{MessagePanelView} = require 'atom-message-panel'
 AnsiFilter = require 'ansi-to-html'
 stripAnsi = require 'strip-ansi'
 linkPaths = require './link-paths'
 _ = require 'underscore'
 
 # Runs a portion of a script through an interpreter and displays it line by line
 module.exports =
-class ScriptView extends View
-  @results: ""
-
-  @content: ->
-    @div =>
-      @subview 'headerView', new HeaderView()
+class ScriptView extends MessagePanelView
+  constructor: ->
+    @ansiFilter = new AnsiFilter
 
-      # Display layout and outlets
-      css = 'tool-panel panel panel-bottom padding script-view
-        native-key-bindings'
-      @div class: css, outlet: 'script', tabindex: -1, =>
-        @div class: 'panel-body padded output', outlet: 'output'
+    @headerView = new HeaderView
 
-  initialize: (serializeState) ->
-    @ansiFilter = new AnsiFilter
+    super(title: @headerView, rawTitle: true, closeMethod: 'destroy')
 
-    linkPaths.listen @
+    @addClass('script-view')
 
-  serialize: ->
+    linkPaths.listen @body
 
   setHeaderAndShowExecutionTime: (returnCode, executionTime) =>
     if (executionTime?)
@@ -45,30 +36,33 @@ class ScriptView extends View
     # Display window and load message
 
     # First run, create view
-    atom.workspace.addBottomPanel(item: this) unless @hasParent()
+    @attach() unless @hasParent()
 
     # Close any existing process and start a new one
     @stop()
 
-    @headerView.title.text title
-    @headerView.setStatus 'start'
+    @setHeaderTitle title
+    @setHeaderStatus 'start'
 
     # Get script view ready
-    @output.empty()
+    @clear()
 
-    # Remove the old script results
-    @results = ""
+  removePanel: ->
+    @stop()
+    @detach()
+    # the 'close' method from MessagePanelView actually destroys the panel
+    ScriptView.__super__.close.apply(this)
 
+  # This is triggered when hitting the 'close' button on the panel
+  # We are not actually closing the panel here since we want to trigger
+  # 'script:close-view' which will eventually remove the panel via 'removePanel'
   close: ->
-    @stop()
-    if @hasParent()
-      grandParent = @script.parent().parent()
-      @detach()
-      grandParent.remove()
+    workspaceView = atom.views.getView(atom.workspace)
+    atom.commands.dispatch workspaceView, 'script:close-view'
 
   stop: ->
     @display 'stdout', '^C'
-    @headerView.setStatus 'kill'
+    @setHeaderStatus 'kill'
 
   createGitHubIssueLink: (argType, lang) ->
     title = "Add #{argType} support for #{lang}"
@@ -89,7 +83,7 @@ class ScriptView extends View
     @handleError(err)
 
   showUnableToRunError: (command) ->
-    @output.append $$ ->
+    @add $$ ->
       @h1 'Unable to run'
       @pre _.escape command
       @h2 'Did you start Atom from the command line?'
@@ -115,9 +109,9 @@ class ScriptView extends View
 
   handleError: (err) ->
     # Display error and kill process
-    @headerView.title.text 'Error'
-    @headerView.setStatus 'err'
-    @output.append err
+    @setHeaderTitle 'Error'
+    @setHeaderStatus 'err'
+    @add(err)
     @stop()
 
   setHeaderStatus: (status) ->
@@ -127,35 +121,31 @@ class ScriptView extends View
     @headerView.title.text title
 
   display: (css, line) ->
-    @results += line
-
     if atom.config.get('script.escapeConsoleOutput')
       line = _.escape(line)
 
     line = @ansiFilter.toHtml(line)
     line = linkPaths(line)
 
-    padding = parseInt(@output.css('padding-bottom'))
-    scrolledToEnd =
-      @script.scrollBottom() == (padding + @output.trueHeight())
-
-    lessThanFull = @output.trueHeight() <= @script.trueHeight()
+    {clientHeight, scrollTop, scrollHeight} = @body[0]
+    # indicates that the panel is scrolled to the bottom, thus we know that
+    # we are not interfering with the user's manual scrolling
+    atEnd = scrollTop >= (scrollHeight - clientHeight)
 
-    @output.append $$ ->
+    @add $$ ->
       @pre class: "line #{css}", =>
         @raw line
 
-    if atom.config.get('script.scrollWithOutput')
-      if lessThanFull or scrolledToEnd
-        # Scroll down in a polling loop 'cause
-        # we don't know when the reflow will finish.
-        # See: http://stackoverflow.com/q/5017923/407845
-        do @checkScrollAgain 5
+    if atom.config.get('script.scrollWithOutput') and atEnd
+      # Scroll down in a polling loop 'cause
+      # we don't know when the reflow will finish.
+      # See: http://stackoverflow.com/q/5017923/407845
+      do @checkScrollAgain 5
 
   scrollTimeout: null
   checkScrollAgain: (times) ->
     =>
-      @script.scrollToBottom()
+      @body.scrollToBottom()
 
       clearTimeout @scrollTimeout
       if times > 1

lib/script.coffee

@@ -51,14 +51,14 @@ module.exports =
 
   deactivate: ->
     @runtime.destroy()
-    @scriptView.close()
+    @scriptView.removePanel()
     @scriptOptionsView.close()
     @subscriptions.dispose()
     GrammarUtils.deleteTempFiles()
 
   closeScriptViewAndStopRunner: ->
     @runtime.stop()
-    @scriptView.close()
+    @scriptView.removePanel()
 
   # Public
   #

package.json

@@ -316,7 +316,8 @@
     "node-uuid": "~1.4.0",
     "strip-ansi": "^3.0.0",
     "underscore": "~1.5.2",
-    "atom-space-pen-views": "^2.0.3"
+    "atom-space-pen-views": "^2.0.3",
+    "atom-message-panel": "1.2.4"
   },
   "devDependencies": {
     "grunt": "~0.4.5"

styles/script.less

@@ -5,20 +5,6 @@
 @import "ui-variables";
 
 .header-view {
-  position: fixed;
-  width: 100%;
-  z-index:10;
-  position:relative;
-
-
-  .heading-close {
-    color: @text-color-highlight;
-  }
-
-  .heading-title {
-    padding-left: 6px;
-  }
-
   .heading-status {
     padding-left: 9px;
   }
@@ -41,12 +27,7 @@
 }
 
 .script-view {
-  overflow: scroll;
-  max-height: 300px;
-  height: auto;
-  margin-bottom: 0px;
-
-  .panel-body pre{
+  .panel-body pre {
     background: @tool-panel-background-color;
     color: @text-color;
   }