Simplified and unified layout for performance and maintainance reasons.

Author: MarkusBordihn

package.json

@@ -11,7 +11,7 @@
     "jsdoc": "^3.5.5",
     "npm": "^5.8.0",
     "npm-check-updates": "^2.14.1",
-    "nw": "^0.29.3",
+    "nw": "^0.29.4",
     "nw-builder": "^3.5.1",
     "rimraf": "^2.6.2"
   },

src/mode/default/mod.js

@@ -191,27 +191,20 @@ cwc.mode.default.Mod.prototype.decorateEditor = function() {
 
 
 /**
- * Decorates the Editor layout.
+ * Decorates the Preview / Editor layout.
  */
 cwc.mode.default.Mod.prototype.decorateLayout = function() {
   let layoutInstance = this.helper.getInstance('layout', true);
+  layoutInstance.decorateDefault();
+  if (this.blockly) {
+    layoutInstance.renderEditorContent(cwc.soy.mode.default.Layout.blockly);
+  } else {
+    layoutInstance.renderEditorContent(cwc.soy.mode.default.Layout.editor);
+  }
   if (this.runner) {
-    layoutInstance.decorateDefault();
-    layoutInstance.setFixRightComponentSize(400);
-    if (this.blockly) {
-      layoutInstance.renderMiddleContent(cwc.soy.mode.default.Layout.blockly);
-    } else {
-      layoutInstance.renderMiddleContent(cwc.soy.mode.default.Layout.editor);
-    }
-    layoutInstance.renderRightContent(cwc.soy.mode.default.Layout.runner);
-  } else if (this.blockly) {
-    layoutInstance.decorateDefault(400);
-    layoutInstance.renderMiddleContent(cwc.soy.mode.default.Layout.preview);
-    layoutInstance.renderRightContent(cwc.soy.mode.default.Layout.blockly);
+    layoutInstance.renderPreviewContent(cwc.soy.mode.default.Layout.runner);
   } else {
-    layoutInstance.decorateDefault(700);
-    layoutInstance.renderMiddleContent(cwc.soy.mode.default.Layout.editor);
-    layoutInstance.renderRightContent(cwc.soy.mode.default.Layout.preview);
+    layoutInstance.renderPreviewContent(cwc.soy.mode.default.Layout.preview);
   }
 };
 

src/protocol/low-level/tcp/http_server.js

@@ -92,7 +92,9 @@ cwc.protocol.tcp.HTTPServer.prototype.listen = function(port, address) {
   }
   if (this.port && this.address) {
     this.database_.open();
-    chrome.sockets.tcpServer.create({}, this.handleCreate_.bind(this));
+    chrome.sockets.tcpServer.create({
+      'persistent': false,
+    }, this.handleCreate_.bind(this));
   }
 };
 
@@ -168,6 +170,15 @@ cwc.protocol.tcp.HTTPServer.prototype.getRootURL = function() {
 };
 
 
+/**
+ * Close tcp server.
+ */
+cwc.protocol.tcp.HTTPServer.prototype.close = function() {
+  this.closeSocket_(this.socketId_);
+  this.unlisten();
+};
+
+
 /**
  * HTTP response handler
  * @param {!string} content
@@ -187,7 +198,7 @@ cwc.protocol.tcp.HTTPServer.prototype.httpResponse_ = function(content,
   chrome.sockets.tcp.getInfo(clientSocketId, function(socketInfo) {
     if (!socketInfo['connected']) {
       this.log_.error('Socket is no longer connected', socketInfo);
-      this.disconnectClientSocket_(clientSocketId);
+      this.disconnectSocket_(clientSocketId);
       return;
     }
 
@@ -288,6 +299,15 @@ cwc.protocol.tcp.HTTPServer.prototype.handleCreate_ = function(createInfo) {
  * @private
  */
 cwc.protocol.tcp.HTTPServer.prototype.handleListen_ = function(result) {
+  if (chrome.runtime.lastError) {
+    this.log_.error('Unable to connect to server',
+      chrome.runtime.lastError.message);
+    if (chrome.runtime.lastError.message.includes('ERR_ADDRESS_IN_USE')) {
+      this.port++;
+      this.listen();
+    }
+    return;
+  }
   if (result < 0) {
     this.log_.error('Unable to connect to server', result);
     return;
@@ -378,7 +398,7 @@ cwc.protocol.tcp.HTTPServer.prototype.handleRecieve_ = function(receiveInfo) {
     }
   } else {
     this.log_.info('Unsupported request', data);
-    this.disconnectClientSocket_(receiveInfo['socketId']);
+    this.disconnectSocket_(receiveInfo['socketId']);
   }
 };
 
@@ -389,7 +409,7 @@ cwc.protocol.tcp.HTTPServer.prototype.handleRecieve_ = function(receiveInfo) {
  */
 cwc.protocol.tcp.HTTPServer.prototype.handleRecieveError_ = function(error) {
   if (error['resultCode'] === -100) {
-    this.closeClientSocket_(error['socketId']);
+    this.closeSocket_(error['socketId']);
   } else {
     this.log_.error('Receive Error Handler', error);
   }
@@ -399,17 +419,21 @@ cwc.protocol.tcp.HTTPServer.prototype.handleRecieveError_ = function(error) {
 /**
  * @param {!number} socketId
  */
-cwc.protocol.tcp.HTTPServer.prototype.closeClientSocket_ = function(socketId) {
+cwc.protocol.tcp.HTTPServer.prototype.closeSocket_ = function(socketId) {
+  if (chrome.runtime.lastError) {
+    this.log_.error('Unable to close socket: ',
+      chrome.runtime.lastError.message);
+    return;
+  }
   chrome.sockets.tcp.close(socketId);
 };
 
 
 /**
  * @param {!number} socketId
  */
-cwc.protocol.tcp.HTTPServer.prototype.disconnectClientSocket_ = function(
-    socketId) {
+cwc.protocol.tcp.HTTPServer.prototype.disconnectSocket_ = function(socketId) {
   chrome.sockets.tcp.disconnect(socketId, function() {
-    this.closeClientSocket_(socketId);
+    this.closeSocket_(socketId);
   }.bind(this));
 };

src/server/server.js

@@ -41,9 +41,6 @@ cwc.server.Server = function(helper) {
   /** @type {cwc.protocol.tcp.HTTPServer} */
   this.httpServer = null;
 
-  /** @type {!string} */
-  this.httpServerPrefix = 'http://localhost:8090';
-
   /** @type {!string} */
   this.previewFile = '/preview.html';
 };
@@ -126,7 +123,7 @@ cwc.server.Server.prototype.setPreview = function(content) {
  * @return {!string}
  */
 cwc.server.Server.prototype.getFrameworkFileURL = function(name) {
-  return this.httpServerPrefix + name;
+  return this.getRootURL() + name;
 };
 
 
@@ -142,6 +139,6 @@ cwc.server.Server.prototype.getRootURL = function() {
  * @return {!string}
  */
 cwc.server.Server.prototype.getPreviewURL = function() {
-  return this.httpServerPrefix + this.previewFile + '?' +
+  return this.getRootURL() + this.previewFile + '?' +
     Math.floor(Math.random() * 100000000);
 };

src/ui/blockly/toolbar/blockly_toolbar.js

@@ -281,19 +281,17 @@ cwc.ui.BlocklyToolbar.prototype.updateLibraryButton = function(has_files) {
 
 /**
  * Toggles the current expand state.
- * @param {goog.events.EventLike} e
  */
-cwc.ui.BlocklyToolbar.prototype.expand = function(e) {
-  this.setExpand(true, e.target.closest('.goog-splitpane-second-container'));
+cwc.ui.BlocklyToolbar.prototype.expand = function() {
+  this.setExpand(true);
 };
 
 
 /**
  * Toggles the current expand state.
- * @param {goog.events.EventLike} e
  */
-cwc.ui.BlocklyToolbar.prototype.collapse = function(e) {
-  this.setExpand(false, e.target.closest('.goog-splitpane-second-container'));
+cwc.ui.BlocklyToolbar.prototype.collapse = function() {
+  this.setExpand(false);
 };
 
 
@@ -308,17 +306,12 @@ cwc.ui.BlocklyToolbar.prototype.toggleExpand = function() {
 /**
  * Expands or collapses the current window.
  * @param {boolean} expand
- * @param {boolean=} invert
  */
-cwc.ui.BlocklyToolbar.prototype.setExpand = function(expand, invert = false) {
+cwc.ui.BlocklyToolbar.prototype.setExpand = function(expand) {
   this.expandState = expand;
   let layoutInstance = this.helper.getInstance('layout', true);
   if (layoutInstance) {
-    if (invert) {
-      layoutInstance.setFullscreen(expand, 0);
-    } else {
-      layoutInstance.setFullscreen(expand);
-    }
+    layoutInstance.setFullscreenEditor(expand);
     goog.style.setElementShown(this.nodeExpand, !expand);
     goog.style.setElementShown(this.nodeExpandExit, expand);
   }

src/ui/editor/toolbar/editor_toolbar.js

@@ -437,19 +437,17 @@ cwc.ui.EditorToolbar.prototype.addView = function(name) {
 
 /**
  * Toggles the current expand state.
- * @param {goog.events.EventLike} e
  */
-cwc.ui.EditorToolbar.prototype.expand = function(e) {
-  this.setExpand(true, e.target.closest('.goog-splitpane-second-container'));
+cwc.ui.EditorToolbar.prototype.expand = function() {
+  this.setExpand(true);
 };
 
 
 /**
  * Toggles the current expand state.
- * @param {goog.events.EventLike} e
  */
-cwc.ui.EditorToolbar.prototype.collapse = function(e) {
-  this.setExpand(false, e.target.closest('.goog-splitpane-second-container'));
+cwc.ui.EditorToolbar.prototype.collapse = function() {
+  this.setExpand(false);
 };
 
 
@@ -464,17 +462,12 @@ cwc.ui.EditorToolbar.prototype.toggleExpand = function() {
 /**
  * Expands or collapses the current window.
  * @param {boolean} expand
- * @param {boolean=} invert
  */
-cwc.ui.EditorToolbar.prototype.setExpand = function(expand, invert = false) {
+cwc.ui.EditorToolbar.prototype.setExpand = function(expand) {
   this.expandState = expand;
   let layoutInstance = this.helper.getInstance('layout', true);
   if (layoutInstance) {
-    if (invert) {
-      layoutInstance.setFullscreen(expand, 0);
-    } else {
-      layoutInstance.setFullscreen(expand);
-    }
+    layoutInstance.setFullscreenEditor(expand);
     goog.style.setElementShown(this.nodeExpand, !expand);
     goog.style.setElementShown(this.nodeExpandExit, expand);
   }

src/ui/layout/layout.gss

@@ -21,16 +21,15 @@
 }
 
 #{$prefix}layout-content-overlay {
-  top: 0;
   left: 0;
+  overflow: auto;
   position: absolute;
+  top: 0;
   z-index: 1000;
-  overflow: auto;
 }
 
-#{$prefix}layout-content-left-chrome,
-#{$prefix}layout-content-middle-chrome,
-#{$prefix}layout-content-right-chrome {
+#{$prefix}layout-content-editor-chrome,
+#{$prefix}layout-content-preview-chrome {
   display: flex;
   flex-direction: column;
 }