Add horizontal wrap (expandable no wrapping lines) on decset 77

butterfly/sass/_layout.sass

@@ -29,6 +29,34 @@ body
   .line.active
     background-color: $active-bg
 
+  .line.extended
+    overflow-x: auto
+    overflow-x: overlay
+    cursor: zoom-in
+    background-image: linear-gradient(90deg, rgba(darken($bg, 3%), 0), 95%, darken($bg, 3%))
+
+    &:not(.expanded):hover
+      background-color: lighten($bg, 2%)
+
+    &.expanded
+      cursor: zoom-out
+      background-color: darken($bg, 3%)
+
+      .extra
+        display: block
+        white-space: pre-line
+        word-break: break-all
+
+    &::-webkit-scrollbar
+      background: rgba($scroll-bg, .1)
+      height: 0
+
+    &::-webkit-scrollbar-thumb
+      background: rgba($scroll-fg, .1)
+
+    &::-webkit-scrollbar-thumb:hover
+      background: rgba($scroll-fg-hover, .1)
+
   &::-webkit-scrollbar
     background: $scroll-bg
     width: $scroll-width

butterfly/static/ext.js

@@ -156,6 +156,29 @@
     }
   });
 
+  Terminal.on('change', function(lines) {
+    var j, len1, line, results;
+    results = [];
+    for (j = 0, len1 = lines.length; j < len1; j++) {
+      line = lines[j];
+      if (indexOf.call(line.classList, 'extended') >= 0) {
+        results.push(line.addEventListener('click', (function(line) {
+          return function() {
+            if (indexOf.call(line.classList, 'expanded') >= 0) {
+              return line.classList.remove('expanded');
+            } else {
+              line.classList.add('expanded');
+              return butterfly.nativeScrollTo();
+            }
+          };
+        })(line)));
+      } else {
+        results.push(void 0);
+      }
+    }
+    return results;
+  });
+
   walk = function(node, callback) {
     var child, j, len1, ref, results;
     ref = node.childNodes;

butterfly/static/main.css

@@ -2816,6 +2816,27 @@ body {
   /* Pop ups */ }
   body .line.active {
     background-color: transparent; }
+  body .line.extended {
+    overflow-x: auto;
+    overflow-x: overlay;
+    cursor: zoom-in;
+    background-image: linear-gradient(90deg, rgba(9, 8, 10, 0), 95%, #09080a); }
+    body .line.extended:not(.expanded):hover {
+      background-color: #161419; }
+    body .line.extended.expanded {
+      cursor: zoom-out;
+      background-color: #09080a; }
+      body .line.extended.expanded .extra {
+        display: block;
+        white-space: pre-line;
+        word-break: break-all; }
+    body .line.extended::-webkit-scrollbar {
+      background: rgba(17, 15, 19, 0.1);
+      height: 0; }
+    body .line.extended::-webkit-scrollbar-thumb {
+      background: rgba(244, 234, 213, 0.1); }
+    body .line.extended::-webkit-scrollbar-thumb:hover {
+      background: rgba(244, 234, 213, 0.1); }
   body::-webkit-scrollbar {
     background: #110f13;
     width: 0.75em; }

butterfly/static/main.js

@@ -282,6 +282,7 @@
       this.applicationCursor = false;
       this.originMode = false;
       this.autowrap = true;
+      this.horizontalWrap = false;
       this.normal = null;
       this.charset = null;
       this.gcharset = null;
@@ -535,7 +536,7 @@
     };
 
     Terminal.prototype.refresh = function(force) {
-      var active, attr, ch, classes, cursor, data, fg, group, i, j, k, len, len1, len2, len3, len4, line, lines, m, modified, newOut, o, out, q, ref, ref1, ref2, ref3, ref4, ref5, skipnext, styles, u, v, x;
+      var active, attr, ch, classes, cls, cursor, data, fg, group, i, j, k, len, len1, len2, len3, len4, line, lines, m, modified, newOut, o, out, q, ref, ref1, ref2, ref3, ref4, ref5, skipnext, styles, u, v, x;
       if (force == null) {
         force = false;
       }
@@ -678,14 +679,27 @@
         if (line.wrap) {
           out += '\u23CE';
         }
+        if (line.extra) {
+          out += '<span class="extra">' + line.extra + '</span>';
+        }
         if (this.children[j]) {
           this.children[j].innerHTML = out;
           modified.push(this.children[j]);
           if (x !== -Infinity) {
             this.children[j].classList.add('active');
           }
+          if (line.extra) {
+            this.children[j].classList.add('extended');
+          }
         } else {
-          newOut += "<div class=\"line" + (x !== -Infinity && ' active' || '') + "\">" + out + "</div>";
+          cls = ['line'];
+          if (x !== -Infinity) {
+            cls.push('active');
+          }
+          if (line.extra) {
+            cls.push('extended');
+          }
+          newOut += "<div class=\"" + (cls.join(' ')) + "\">" + out + "</div>";
         }
         this.screen[j].dirty = false;
       }
@@ -831,11 +845,17 @@
               case "\n":
               case "\x0b":
               case "\x0c":
+                if (this.horizontalWrap) {
+                  this.screen[this.y + this.shift].extra += ch;
+                } else {
                   this.screen[this.y + this.shift].dirty = true;
                   this.nextLine();
+                }
                 break;
               case "\r":
+                if (!this.horizontalWrap) {
                   this.x = 0;
+                }
                 break;
               case "\b":
                 if (this.x >= this.cols) {
@@ -877,12 +897,16 @@
                     ch = this.charset[ch];
                   }
                   if (this.x >= this.cols) {
+                    if (this.horizontalWrap) {
+                      this.screen[this.y + this.shift].extra += ch;
+                    } else {
                       if (this.autowrap) {
                         this.screen[this.y + this.shift].wrap = true;
                         this.nextLine();
                       }
                       this.x = 0;
                     }
+                  }
                   this.putChar(ch);
                   this.x++;
                   if (this.forceWidth && ("\uff00" < ch && ch < "\uffef")) {
@@ -1291,8 +1315,7 @@
                       attr = this.cloneAttr(this.curAttr);
                       attr.html = "<div class=\"inline-html\">" + safe + "</div>";
                       this.screen[this.y + this.shift].chars[this.x] = attr;
-                      this.screen[this.y + this.shift].dirty = true;
-                      this.screen[this.y + this.shift].wrap = false;
+                      this.resetLine(this.screen[this.y + this.shift]);
                       this.nextLine();
                       break;
                     case "IMAGE":
@@ -1307,8 +1330,7 @@
                       attr = this.cloneAttr(this.curAttr);
                       attr.html = "<img class=\"inline-image\" src=\"data:" + mime + ";base64," + b64 + "\" />";
                       this.screen[this.y + this.shift].chars[this.x] = attr;
-                      this.screen[this.y + this.shift].dirty = true;
-                      this.screen[this.y + this.shift].wrap = false;
+                      this.resetLine(this.screen[this.y + this.shift]);
                       break;
                     case "PROMPT":
                       this.send(content);
@@ -1865,8 +1887,7 @@
         line[x] = this.eraseAttr();
         x++;
       }
-      this.screen[y + this.shift].dirty = true;
-      return this.screen[y + this.shift].wrap = false;
+      return this.resetLine(this.screen[y + this.shift]);
     };
 
     Terminal.prototype.eraseLeft = function(x, y) {
@@ -1874,14 +1895,19 @@
       while (x--) {
         this.screen[y + this.shift].chars[x] = this.eraseAttr();
       }
-      this.screen[y + this.shift].dirty = true;
-      return this.screen[y + this.shift].wrap = false;
+      return this.resetLine(this.screen[y + this.shift]);
     };
 
     Terminal.prototype.eraseLine = function(y) {
       return this.eraseRight(0, y);
     };
 
+    Terminal.prototype.resetLine = function(l) {
+      l.dirty = true;
+      l.wrap = false;
+      return l.extra = '';
+    };
+
     Terminal.prototype.blankLine = function(cur, dirty) {
       var attr, i, line;
       if (cur == null) {
@@ -1900,7 +1926,8 @@
       return {
         chars: line,
         dirty: dirty,
-        wrap: false
+        wrap: false,
+        extra: ''
       };
     };
 
@@ -2304,8 +2331,7 @@
         this.screen[this.y + this.shift].chars.splice(this.x, 1);
         this.screen[this.y + this.shift].chars.push(this.eraseAttr());
       }
-      this.screen[this.y + this.shift].dirty = true;
-      return this.screen[this.y + this.shift].wrap = false;
+      return this.resetLine(this.screen[this.y + this.shift]);
     };
 
     Terminal.prototype.eraseChars = function(params) {
@@ -2318,8 +2344,7 @@
       while (param-- && j < this.cols) {
         this.screen[this.y + this.shift].chars[j++] = this.eraseAttr();
       }
-      this.screen[this.y + this.shift].dirty = true;
-      return this.screen[this.y + this.shift].wrap = false;
+      return this.resetLine(this.screen[this.y + this.shift]);
     };
 
     Terminal.prototype.charPosAbsolute = function(params) {
@@ -2455,6 +2480,8 @@
             return this.autowrap = true;
           case 66:
             return this.applicationKeypad = true;
+          case 77:
+            return this.horizontalWrap = true;
           case 9:
           case 1000:
           case 1002:
@@ -2534,6 +2561,8 @@
             return this.autowrap = false;
           case 66:
             return this.applicationKeypad = false;
+          case 77:
+            return this.horizontalWrap = false;
           case 9:
           case 1000:
           case 1002:
@@ -2834,8 +2863,7 @@
           while (i < l) {
             this.screen[i].chars.splice(this.x, 1);
             this.screen[i].chars.push(this.eraseAttr());
-            this.screen[i].dirty = true;
-            this.screen[i].wrap = false;
+            this.resetLine(this.screen[i].dirty);
             results1.push(i++);
           }
           return results1;

coffees/ext/expand_extended.coffee

@@ -0,0 +1,9 @@
+Terminal.on 'change', (lines) ->
+  for line in lines
+    if 'extended' in line.classList
+      line.addEventListener 'click', do (line) -> ->
+        if 'expanded' in line.classList
+          line.classList.remove 'expanded'
+        else
+          line.classList.add 'expanded'
+          butterfly.nativeScrollTo()

coffees/term.coffee

@@ -168,6 +168,7 @@ class Terminal
     @applicationCursor = false
     @originMode = false
     @autowrap = true
+    @horizontalWrap = false
     @normal = null
 
     # charset
@@ -421,6 +422,8 @@ class Terminal
         @document.createTextNode(cursor.textContent), cursor)
     for active in @body.querySelectorAll(".line.active")
       active.classList.remove('active')
+    # for active in @body.querySelectorAll(".line.extended")
+    #   active.classList.remove('extended')
 
     newOut = ''
     modified = []
@@ -526,14 +529,22 @@ class Terminal
         attr = data
       out += "</span>" unless @equalAttr attr, @defAttr
       out += '\u23CE' if line.wrap
+      if line.extra
+        out += '<span class="extra">' + line.extra + '</span>'
       if @children[j]
         @children[j].innerHTML = out
         modified.push @children[j]
         if x isnt -Infinity
           @children[j].classList.add 'active'
+        if line.extra
+          @children[j].classList.add 'extended'
       else
-        newOut += "<div class=\"line#{
-          x isnt -Infinity and ' active' or ''}\">#{out}</div>"
+        cls = ['line']
+        if x isnt -Infinity
+          cls.push 'active'
+        if line.extra
+          cls.push 'extended'
+        newOut += "<div class=\"#{cls.join(' ')}\">#{out}</div>"
       @screen[j].dirty = false
 
     if newOut isnt ''
@@ -644,11 +655,15 @@ class Terminal
             # '\n', '\v', '\f'
             when "\n", "\x0b", "\x0c"
               # @x = 0 if @convertEol
+              if @horizontalWrap
+                @screen[@y + @shift].extra += ch
+              else
                 @screen[@y + @shift].dirty = true
                 @nextLine()
 
             # '\r'
             when "\r"
+              unless @horizontalWrap
                 @x = 0
 
             # '\b'
@@ -697,11 +712,13 @@ class Terminal
               if ch >= " "
                 ch = @charset[ch] if @charset?[ch]
                 if @x >= @cols
+                  if @horizontalWrap
+                    @screen[@y + @shift].extra += ch
+                  else
                     if @autowrap
                       @screen[@y + @shift].wrap = true
                       @nextLine()
                     @x = 0
-
                 @putChar ch
                 @x++
                 if @forceWidth and "\uff00" < ch < "\uffef"
@@ -1150,8 +1167,6 @@ class Terminal
             switch @prefix
               # User-Defined Keys (DECUDK).
               when ""
-                # Disabling this for now as we need a good script
-                #  striper to avoid malicious script injection
                 pt = @currentParam
                 unless pt[0] is ';'
                   console.error "Unknown DECUDK: #{pt}"
@@ -1171,8 +1186,7 @@ class Terminal
                     attr.html = (
                       "<div class=\"inline-html\">#{safe}</div>")
                     @screen[@y + @shift].chars[@x] = attr
-                    @screen[@y + @shift].dirty = true
-                    @screen[@y + @shift].wrap = false
+                    @resetLine @screen[@y + @shift]
                     @nextLine()
 
                   when "IMAGE"
@@ -1190,8 +1204,7 @@ class Terminal
                       "<img class=\"inline-image\" src=\"data:#{mime};base64,#{
                         b64}\" />")
                     @screen[@y + @shift].chars[@x] = attr
-                    @screen[@y + @shift].dirty = true
-                    @screen[@y + @shift].wrap = false
+                    @resetLine @screen[@y + @shift]
 
                   when "PROMPT"
                     @send content
@@ -1690,18 +1703,21 @@ class Terminal
     while x < @cols
       line[x] = @eraseAttr()
       x++
-    @screen[y + @shift].dirty = true
-    @screen[y + @shift].wrap = false
+    @resetLine @screen[y + @shift]
 
   eraseLeft: (x, y) ->
     x++
     @screen[y + @shift].chars[x] = @eraseAttr() while x--
-    @screen[y + @shift].dirty = true
-    @screen[y + @shift].wrap = false
+    @resetLine @screen[y + @shift]
 
   eraseLine: (y) ->
     @eraseRight 0, y
 
+  resetLine: (l) ->
+    l.dirty = true
+    l.wrap = false
+    l.extra = ''
+
   blankLine: (cur=false, dirty=true) ->
     attr = (if cur then @eraseAttr() else @defAttr)
     line = []
@@ -1713,6 +1729,7 @@ class Terminal
     chars: line
     dirty: dirty
     wrap: false
+    extra: ''
 
   ch: (cur) ->
     if cur then @eraseAttr() else @defAttr
@@ -2193,8 +2210,7 @@ class Terminal
     while param--
       @screen[@y + @shift].chars.splice @x, 1
       @screen[@y + @shift].chars.push @eraseAttr()
-    @screen[@y + @shift].dirty = true
-    @screen[@y + @shift].wrap = false
+    @resetLine @screen[@y + @shift]
 
   # CSI Ps X
   # Erase Ps Character(s) (default = 1) (ECH).
@@ -2204,8 +2220,7 @@ class Terminal
     j = @x
     # xterm
     @screen[@y + @shift].chars[j++] = @eraseAttr() while param-- and j < @cols
-    @screen[@y + @shift].dirty = true
-    @screen[@y + @shift].wrap = false
+    @resetLine @screen[@y + @shift]
 
   # CSI Pm `    Character Position Absolute
   #     [column] (default = [row,1]) (HPA).
@@ -2434,6 +2449,8 @@ class Terminal
           @autowrap = true
         when 66
           @applicationKeypad = true
+        when 77
+          @horizontalWrap = true
         # X10 Mouse
         # no release, no motion, no wheel, no modifiers.
         when 9, 1000, 1002, 1003 # any event mouse
@@ -2595,6 +2612,8 @@ class Terminal
           @autowrap = false
         when 66
           @applicationKeypad = false
+        when 77
+          @horizontalWrap = false
         when 9, 1000, 1002 , 1003 # any event mouse
           @x10Mouse = false
           @vt200Mouse = false
@@ -3175,8 +3194,7 @@ class Terminal
       while i < l
         @screen[i].chars.splice @x, 1
         @screen[i].chars.push @eraseAttr()
-        @screen[i].dirty = true
-        @screen[i].wrap = false
+        @resetLine @screen[i].dirty
         i++
 
   # DEC Special Character and Line Drawing Set.