Added "terminate" button and automatic focus for the preview.

Author: MarkusBordihn

package-lock.json

@@ -145,6 +145,9 @@ cwc.Cache.prototype.getFile = function(name) {
  */
 cwc.Cache.prototype.addLibraryFile = function(name, content) {
   let filename = name.includes('/library/') ? name : '/library/' + name;
+  if (content.includes('data:')) {
+    content = atob(content.split(',')[1]);
+  }
   this.database_.addFile(filename, content, '__library__');
 };
 

src/cache/cache.js

@@ -157,6 +157,7 @@ cwc.mode.Modder.prototype.postMode = function(mode = this.mode) {
     this.setAutoUpdate(true);
   } else if (modeConfig.runPreview) {
     this.runPreview();
+    this.helper.getInstance('preview').focus();
   }
 
   // Handle file data, if needed.
@@ -261,6 +262,7 @@ cwc.mode.Modder.prototype.syncLibrary = function() {
 
 /**
  * Runs the preview.
+ * @param {boolean} focus
  */
 cwc.mode.Modder.prototype.runPreview = function() {
   let previewInstance = this.helper.getInstance('preview');

src/mode/modder.js

@@ -328,6 +328,11 @@ cwc.ui.Library.prototype.getFiles = function() {
  * @param {string=} optType
  */
 cwc.ui.Library.prototype.addFile = function(name, content, optType) {
+  let cacheInstance = this.helper.getInstance('cache');
+  if (cacheInstance) {
+    cacheInstance.addLibraryFile(name, content);
+  }
+
   let fileInstance = this.helper.getInstance('file');
   if (fileInstance) {
     let newFile = fileInstance.addLibraryFile(name, content, optType);

src/ui/library/library.js

@@ -251,23 +251,32 @@ cwc.ui.PreviewInfobar.prototype.addMessage = function(event) {
   let logLevel = goog.debug.Logger.Level.getPredefinedLevel('ALL');
   let logLevelName = 'Unknown';
 
-  if (level == cwc.ui.PreviewInfobarLevel.DEBUG) {
-    this.debugNum = (this.debugNum || 0) + 1;
-    logLevel = goog.debug.Logger.Level.getPredefinedLevel('FINE');
-    logLevelName = 'Debug';
-    message = goog.debug.expose(event);
-  } else if (level == cwc.ui.PreviewInfobarLevel.INFO) {
-    this.infoNum = (this.infoNum || 0) + 1;
-    logLevel = goog.debug.Logger.Level.getPredefinedLevel('INFO');
-    logLevelName = 'Info';
-  } else if (level == cwc.ui.PreviewInfobarLevel.WARN) {
-    this.warnNum = (this.warnNum || 0) + 1;
-    logLevel = goog.debug.Logger.Level.getPredefinedLevel('WARNING');
-    logLevelName = 'Warn';
-  } else if (level == cwc.ui.PreviewInfobarLevel.ERROR) {
-    this.errorNum = (this.errorNum || 0) + 1;
-    logLevel = goog.debug.Logger.Level.getPredefinedLevel('SEVERE');
-    logLevelName = 'Error';
+  switch (level) {
+    case cwc.ui.PreviewInfobarLevel.DEBUG:
+      this.debugNum = (this.debugNum || 0) + 1;
+      logLevel = goog.debug.Logger.Level.getPredefinedLevel('FINE');
+      logLevelName = 'Debug';
+      message = goog.debug.expose(event);
+      break;
+    case cwc.ui.PreviewInfobarLevel.INFO:
+      this.infoNum = (this.infoNum || 0) + 1;
+      logLevel = goog.debug.Logger.Level.getPredefinedLevel('INFO');
+      logLevelName = 'Info';
+      break;
+    case cwc.ui.PreviewInfobarLevel.WARN:
+      if (message.startsWith('AudioParam value setter') ||
+          message.startsWith('GainNode.gain.value setter')) {
+        return;
+      }
+      this.warnNum = (this.warnNum || 0) + 1;
+      logLevel = goog.debug.Logger.Level.getPredefinedLevel('WARNING');
+      logLevelName = 'Warn';
+      break;
+    case cwc.ui.PreviewInfobarLevel.ERROR:
+      this.errorNum = (this.errorNum || 0) + 1;
+      logLevel = goog.debug.Logger.Level.getPredefinedLevel('SEVERE');
+      logLevelName = 'Error';
+      break;
   }
 
   this.addLogRecord(logLevel, message, logLevelName);

src/ui/preview/infobar/preview_infobar.js

@@ -143,19 +143,28 @@ cwc.ui.Preview.prototype.decorate = function(node) {
     this.statusbar.decorate(nodeStatusbar);
   }
 
-  // Statusbutton and actions
+  // Status Button and actions
   let nodeStatusButton = goog.dom.getElement(this.prefix + 'statusbutton');
   if (nodeStatusButton) {
     this.statusButton.decorate(nodeStatusButton)
       .setBrowserAction(this.openInBrowser.bind(this))
-      .setFullscreenAction(function() {
+      .setFullscreenAction(() => {
         this.helper.getInstance('layout').setFullscreenPreview(true);
-      }.bind(this))
-      .setFullscreenExitAction(function() {
+        this.focus();
+      })
+      .setFullscreenExitAction(() => {
         this.helper.getInstance('layout').setFullscreenPreview(false);
-      }.bind(this))
-      .setReloadAction(this.refresh.bind(this))
-      .setRunAction(this.run.bind(this))
+        this.focus();
+      })
+      .setReloadAction(() => {
+        this.refresh();
+        this.focus();
+      })
+      .setTerminateAction(this.terminate.bind(this))
+      .setRunAction(() => {
+        this.run();
+        this.focus();
+      })
       .setStopAction(this.stop.bind(this));
   }
 
@@ -382,6 +391,7 @@ cwc.ui.Preview.prototype.setAutoUpdate = function(active) {
           goog.ui.Component.EventType.CHANGE, this.delayAutoUpdate, false,
           this);
     }
+    this.focus();
   } else if (!active && this.autoUpdateEvent) {
     this.log_.info('Deactivate AutoUpdate...');
     goog.events.unlistenByKey(this.autoUpdateEvent);
@@ -410,12 +420,18 @@ cwc.ui.Preview.prototype.doAutoUpdate = function() {
   if (!this.autoUpdate) {
     return;
   }
-
   this.log_.info('Perform auto update ...');
   this.run();
 };
 
 
+cwc.ui.Preview.prototype.focus = function() {
+  if (this.content) {
+    this.content.focus();
+  }
+};
+
+
 /**
  * @param {Event=} opt_event
  * @private

src/ui/preview/preview.js

@@ -60,6 +60,9 @@ cwc.ui.StatusButton = function(helper) {
   /** @type {Element} */
   this.nodeReload = null;
 
+    /** @type {Element} */
+  this.nodeTerminate = null;
+
   /** @type {Element} */
   this.nodeFullscreen = null;
 
@@ -99,13 +102,15 @@ cwc.ui.StatusButton.prototype.decorate = function(node) {
   this.nodeFullscreenExit =
     goog.dom.getElement(this.prefix + 'fullscreen_exit');
   this.nodeReload = goog.dom.getElement(this.prefix + 'reload');
+  this.nodeTerminate = goog.dom.getElement(this.prefix + 'terminate');
   this.nodeRun = goog.dom.getElement(this.prefix + 'run');
   this.nodeStop = goog.dom.getElement(this.prefix + 'stop');
 
   goog.style.setElementShown(this.nodeBrowser, false);
   goog.style.setElementShown(this.nodeFullscreen, false);
   goog.style.setElementShown(this.nodeFullscreenExit, false);
   goog.style.setElementShown(this.nodeReload, false);
+  goog.style.setElementShown(this.nodeTerminate, false);
   goog.style.setElementShown(this.nodeRun, true);
   goog.style.setElementShown(this.nodeStop, false);
   return this;
@@ -169,6 +174,18 @@ cwc.ui.StatusButton.prototype.setReloadAction = function(func) {
 };
 
 
+/**
+ * @param {function(?)} func
+ * @return {THIS}
+ * @template THIS
+ */
+cwc.ui.StatusButton.prototype.setTerminateAction = function(func) {
+  goog.style.setElementShown(this.nodeTerminate, true);
+  this.events_.listen('terminate-action', goog.events.EventType.CLICK, func);
+  return this;
+};
+
+
 /**
  * @param {function(?)} func
  * @return {THIS}

src/ui/status_button/status_button.js

@@ -45,6 +45,12 @@
       {param text: 'Collapse View' /}
     {/call}
 
+    {call .actionIcon_ data="all"}
+      {param id: 'terminate' /}
+      {param icon: 'pan_tool' /}
+      {param text: 'Terminate View' /}
+    {/call}
+
     {call .actionIcon_ data="all"}
       {param id: 'reload' /}
       {param icon: 'refresh' /}