Output buttons now adjust when there is limited screen space.

src/html/index.html

@@ -114,10 +114,10 @@
                         <div class="title no-select">
                             Output
                             <div class="btn-group io-btn-group">
-                                <button type="button" class="btn btn-default btn-sm" id="save-to-file"><img src="images/save_as-16x16.png" /> Save to file</button>
-                                <button type="button" class="btn btn-default btn-sm" id="switch"><img src="images/switch-16x16.png" /> Move output to input</button>
-                                <button type="button" class="btn btn-default btn-sm" id="undo-switch" disabled="disabled"><img src="images/undo-16x16.png" /> Undo</button>
-                                <button type="button" class="btn btn-default btn-sm" id="maximise-output"><img src="images/maximise-16x16.png" /> Max</button>
+                                <button type="button" class="btn btn-default btn-sm" id="save-to-file" title="Save to file"><img src="images/save_as-16x16.png" /> Save to file</button>
+                                <button type="button" class="btn btn-default btn-sm" id="switch" title="Move output to input"><img src="images/switch-16x16.png" /> Move output to input</button>
+                                <button type="button" class="btn btn-default btn-sm" id="undo-switch" title="Undo move" disabled="disabled"><img src="images/undo-16x16.png" /> Undo</button>
+                                <button type="button" class="btn btn-default btn-sm" id="maximise-output" title="Maximise"><img src="images/maximise-16x16.png" /> Max</button>
                             </div>
                             <div class="io-info" id="output-info"></div>
                             <div class="io-info" id="output-selection-info"></div>

src/js/views/html/HTMLApp.js

@@ -207,9 +207,12 @@ HTMLApp.prototype.populate_operations_list = function() {
 HTMLApp.prototype.initialise_splitter = function() {
     this.column_splitter = Split(["#operations", "#recipe", "#IO"], {
         sizes: [20, 30, 50],
-        minSize: [240, 325, 500],
+        minSize: [240, 325, 440],
         gutterSize: 4,
-        onDrag: this.manager.controls.adjust_width.bind(this.manager.controls)
+        onDrag: function() {
+            this.manager.controls.adjust_width();
+            this.manager.output.adjust_width();
+        }.bind(this)
     });
 
     this.io_splitter = Split(["#input", "#output"], {
@@ -467,6 +470,7 @@ HTMLApp.prototype.reset_layout = function() {
     this.io_splitter.setSizes([50, 50]);
 
     this.manager.controls.adjust_width();
+    this.manager.output.adjust_width();
 };
 
 

src/js/views/html/OutputWaiter.js

@@ -95,6 +95,32 @@ OutputWaiter.prototype.set_output_info = function(length, lines, duration) {
 };
 
 
+/**
+ * Adjusts the display properties of the output buttons so that they fit within the current width
+ * without wrapping or overflowing.
+ */
+OutputWaiter.prototype.adjust_width = function() {
+    var output          = document.getElementById("output"),
+        save_to_file    = document.getElementById("save-to-file"),
+        switch_io       = document.getElementById("switch"),
+        undo_switch     = document.getElementById("undo-switch"),
+        maximise_output = document.getElementById("maximise-output");
+    
+    if (output.clientWidth < 680) {
+        save_to_file.childNodes[1].nodeValue = "";
+        switch_io.childNodes[1].nodeValue = "";
+        undo_switch.childNodes[1].nodeValue = "";
+        maximise_output.childNodes[1].nodeValue = "";
+    } else {
+        save_to_file.childNodes[1].nodeValue = " Save to file";
+        switch_io.childNodes[1].nodeValue = " Move output to input";
+        undo_switch.childNodes[1].nodeValue = " Undo";
+        maximise_output.childNodes[1].nodeValue =
+            maximise_output.getAttribute("title") === "Maximise" ? " Max" : " Restore";
+    }
+};
+
+
 /**
  * Handler for save click events.
  * Saves the current output to a file, downloaded as a URL octet stream.
@@ -144,16 +170,19 @@ OutputWaiter.prototype.undo_switch_click = function() {
  * Resizes the output frame to be as large as possible, or restores it to its original size.
  */
 OutputWaiter.prototype.maximise_output_click = function(e) {
-    var el = e.target;
-    
-    if (el.textContent.indexOf("Max") >= 0) {
+    var el = e.target.id === "maximise-output" ? e.target : e.target.parentNode;
+
+    if (el.getAttribute("title") === "Maximise") {
         this.app.column_splitter.collapse(0);
         this.app.column_splitter.collapse(1);
         this.app.io_splitter.collapse(0);
 
+        el.setAttribute("title", "Restore");
         el.innerHTML = "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAlUlEQVQ4y93RwQpBQRQG4C9ba1fxBteGPIj38BTejFJKLFnwCJIiCsW1mcV0k9yx82/OzGK+OXMGOpiiLTFjFNiilQI0sQ7IJiAjLKsgGVYB2YdaVO0kwy46/BVQi9ZDNPyQWen2ub/KufS8y7shfkq9tF9U7SC+/YluKvAI9YZeFeCECXJcA3JHP2WgMXJM/ZUcBwxeM+YuSWTgMtUAAAAASUVORK5CYII='> Restore";
+        this.adjust_width();
     } else {
-        this.app.reset_layout();
+        el.setAttribute("title", "Maximise");
         el.innerHTML = "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAi0lEQVQ4y83TMQrCQBCF4S+5g4rJEdJ7KE+RQ1lrIQQCllroEULuoM0Ww3a7aXwwLAzMPzDvLcz4hnooUItT1rsoVNy+4lgLWNL7RlcCmDBij2eCfNCrUITc0dRCrhj8m5otw0O6SV8LuAV3uhrAAa8sJ2Np7KPFawhgscVLjH9bCDhjt8WNKft88w/HjCvuVqu53QAAAABJRU5ErkJggg=='> Max";
+        this.app.reset_layout();
     }
 };

src/static/stats.txt

@@ -1,9 +1,9 @@
 206	source files
-113322	lines
+113355	lines
 4.2M	size
 
 137	JavaScript source files
-104164	lines
+104197	lines
 3.7M	size
 
 79	third party JavaScript source files
@@ -11,7 +11,7 @@
 3.0M	size
 
 58	first party JavaScript source files
-19112	lines
+19145	lines
 724K	size
 
 3.4M	uncompressed JavaScript size