Added scaling to mobile and fixed a few build errors

webapp/package.json

@@ -2,13 +2,15 @@
   "name": "sysbuild-playground-webapp",
   "version": "0.0.0",
   "private": true,
-  "dependencies": {},
+  "dependencies": {
+    "node-sass": "^4.8.3"
+  },
   "devDependencies": {
-    "babel-core": "^6.22.1",
+    "babel-core": "^6.26.0",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-es2015-modules-amd": "^6.18.0",
     "babel-preset-env": "^1.1.8",
-    "babel-register": "^6.18.0",
+    "babel-register": "^6.26.0",
     "chalk": "^1.1.1",
     "deeply": "^2.0.0",
     "eslint": "^3.14.0",

webapp/src/app/gcc-output-parser.js

@@ -50,7 +50,8 @@ class GccOutputParser {
                         text = makefileColNum[3];
                         buildErrorType = 'error';
                     } else {
-                        row = col = 0;
+                        row = 0;
+                        col = 0;
                         const typeTextSplitMatch = gccOutputTypeTextSplitRe.exec(match[2]);
                         if (typeTextSplitMatch) {
                             buildErrorType = typeTextSplitMatch[1];

webapp/src/app/sys-filesystem.js

@@ -22,9 +22,9 @@ class SysFileSystem {
     }
 
     /*------------------------------------------------------------------------------------------------*/
-    /**
+    /*
     *   API for interating with the joined file system
-    **/
+    */
 
     writeFile(path, buf) {
         if (path.charAt(0) !== '/') {
@@ -253,10 +253,10 @@ class SysFileSystem {
     }
 
     /*------------------------------------------------------------------------------------------------*/
-    /**
+    /*
     *   Write all local files (those stored in local storage) to
     *   the Jor1k file system (i.e /home/user)
-    **/
+    */
     syncVM() {
         console.log('Starting Syncing VM File System');
         this.jor1kFS.DeleteDirContents('home/user');
@@ -286,10 +286,10 @@ class SysFileSystem {
     }
 
     /*------------------------------------------------------------------------------------------------*/
-    /**
+    /*
     *   Handling callbacks from file operations done on
     *   the Jor1k VM
-    **/
+    */
     Jor1kNotifyCallBack(info) {
         const path = info.path.substring('home/user'.length, info.path.length);
 

webapp/src/app/sys-runtime.js

@@ -206,7 +206,8 @@ class SysRuntime {
             if (typeof error.type === 'undefined') {
                 // if the errors are not in program.c, invalidate the row and column so that
                 // the editor does not place an annotation
-                error.row = error.col = -1;
+                error.row = -1;
+                error.col = -1;
             }
 
             return {

webapp/src/components/compiler-controls/compiler-controls.html

@@ -1,3 +1,4 @@
+<!--html for compiler controls (for the editor)-->
 <div id="compile-opts-container">
     <div class="row">
         <div class="col-sm-10">

webapp/src/components/editor-compiler-tab/editor-compiler-tab.html

@@ -1,2 +1,2 @@
-<div data-bind="component: { name: 'editor', params: editorParams }"></div>
-<div data-bind="component: { name: 'compiler-controls', params: compilerParams }"></div>
+<div data-bind="component: { name: 'editor', params: editorParams }" id="code-editor-options"></div>
+<div data-bind="component: { name: 'compiler-controls', params: compilerParams }" id="compiler-components"></div>

webapp/src/components/editor/editor.html

@@ -1,5 +1,11 @@
+<!--html for editor-->
 <div id="editor-opts-container">
     <div class="navbar navbar-default">
+        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#user-settings" id="toggle-user-settings">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="glyphicon glyphicon-cog"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="user-settings">
         <form class="navbar-form row">
             <div class="col-md-2">
                 <label class="control-label sr-only" for="editor-theme">Theme</label>
@@ -31,6 +37,7 @@
                 </a>
             </div>
         </form>
+      </div>
     </div>
 </div>
 <div id="code"></div>

webapp/src/components/editor/editor.js

@@ -67,6 +67,32 @@ class Editor {
         this.editorDivId = editorDivId;
         this.aceEditor = ace.edit(editorDivId);
 
+        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+            // Enables scrolling
+            this.aceEditor.setOptions(
+            {
+                minLines: 15,
+                maxLines: 50
+            });
+
+            // Remove clutter
+            const mainLayout = $('#layout').layout();
+            $('.ace_text-input').focus(() => {
+                mainLayout.close('south');
+                mainLayout.state.south.autoClosed = true;
+                $('#compiler-components').hide();
+                $('#editor-opts-container').hide();
+            });
+
+            // Restores webpage layout
+            $('.ace_text-input').focusout(() => {
+                mainLayout.open('south');
+                mainLayout.state.south.autoClosed = false;
+                $('#compiler-components').show();
+                $('#editor-opts-container').show();
+            });
+        }
+
         // Fix for the following Ace warning:
         // "Automatically scrolling cursor into view after selection change this will be disabled
         // in the next version set editor.$blockScrolling = Infinity to disable this message"

webapp/src/components/file-browser/file-browser.js

@@ -39,7 +39,8 @@ class Filebrowser {
     constructor() {
         const readyCallback = () => {
             this.id = '#file-browser-body';
-            const fs = this.fs = SysFileSystem;
+            const fs = SysFileSystem;
+            this.fs = SysFileSystem;
 
             this.editor = SysGlobalObservables.editor;
             SysGlobalObservables.fileBrowser = this;

webapp/src/components/playground-doc-pane/playground-doc-pane.html

@@ -1 +1,2 @@
+<!--html for playground usage/welcome-->
 <div data-bind="html: docHtml"></div>

webapp/src/components/playground-layout/playground-layout.html

@@ -8,7 +8,7 @@
   </div>
 
   <div id="code-container">
-    <editor-pane params="editorPaneTabs: editorPaneTabs, initialTabIndex: 1"></editor-pane>
+    <editor-pane params="editorPaneTabs: editorPaneTabs, initialTabIndex: 0"></editor-pane>
   </div>
 
   <div id="doc-tty-container">

webapp/src/components/playground-layout/playground-layout.js

@@ -22,7 +22,13 @@ class PlaygroundLayout {
         const openManPageCallback = this.openManPage.bind(this);
         editorParams.openManPage = openManPageCallback;
 
-        this.initLayout();
+        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+            // if device is mobile..
+            this.initLayoutMobile();
+            this.createDocsTab(this.docParams);
+            this.createTerminalTab();
+            $('#doc-tty-container').hide();
+        } else this.initLayoutDesktop();
         $('body').css('overflow', 'hidden');
 
         // Prevent accidental backward navigation.
@@ -45,12 +51,25 @@ class PlaygroundLayout {
             }
         });
 
-        this.createVideoSearchTab();
         this.createEditorTab(editorParams, compilerParams);
+        this.createVideoSearchTab();
         this.createFileBrowserTab();
         this.createManPageSearchTab(openManPageCallback);
     }
 
+    createDocsTab(docParams) {
+        this.editorPaneTabs.push({
+            title: 'Intro',
+            closable: false,
+            component: {
+                name: 'playground-doc-pane',
+                params: {
+                    doc: docParams
+                }
+            }
+        });
+    }
+
     createEditorTab(editorParams, compilerParams) {
         this.editorPaneTabs.push({
             title: 'Code',
@@ -79,6 +98,16 @@ class PlaygroundLayout {
         });
     }
 
+    createTerminalTab() {
+        this.editorPaneTabs.push({
+            title: 'Terminal',
+            closable: false,
+            component: {
+                name: 'playground-term-pane'
+            }
+        });
+    }
+
     createVideoSearchTab() {
         this.editorPaneTabs.push({
             title: 'Video Search',
@@ -124,7 +153,7 @@ class PlaygroundLayout {
         $('#editor-tabs-bar').find('span:contains("' + addedTabName + '")').click();
     }
 
-    initLayout() {
+    initLayoutDesktop() {
         const mainNavBarHeightPx = 51;
         this.navbarTopMargin = mainNavBarHeightPx + 'px';
 
@@ -185,6 +214,41 @@ class PlaygroundLayout {
         };
     }
 
+    initLayoutMobile() {
+        const mainNavBarHeightPx = 51;
+        this.navbarTopMargin = mainNavBarHeightPx + 'px';
+
+        let navBarHeightPx = 33;
+        if (!this.showLessonNavigation) {
+            navBarHeightPx = 0;
+        }
+
+        const mainLayout = $('#layout').layout({
+            livePaneResizing: true,
+
+            north__paneSelector: '#navbar-container',
+            center__paneSelector: '#code-container',
+            south__paneSelector: '#footer-container',
+
+            spacing_open: 2,
+
+            north__resizable: false,
+            north__size: mainNavBarHeightPx + navBarHeightPx,
+            north__spacing_open: 0,
+            north__spacing_closed: 0,
+            north__showOverflowOnHover: true,
+
+            south__resizable: false,
+            south__size: 29,
+            south__spacing_open: 0,
+        });
+
+
+        return {
+            mainLayout: mainLayout
+        };
+    }
+
     dispose() {
         $('body').css('overflow', 'auto');
         $(window).off('keydown.playground');

webapp/src/components/playground-term-pane/playground-term-pane.html

@@ -1,3 +1,4 @@
+<!--html for terminal-->
 <div id="tty-container">
     <div class="tty-buttons">
         <button data-bind="visible: fullScreenSupported, click: toggleFullScreen" class="btn btn-xs btn-default">

webapp/src/index.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>
     <title>System Programming</title>
     <link rel="shortcut icon" href="favicon.ico">
     <!-- Google Analytics -->
@@ -49,8 +50,8 @@
       <div id="page" class="container" data-bind="component: { name: route().page, params: route }"></div>
       <div class="footer"><div class="container"><copyright-line></copyright-line></div></div>
       <div id="hidden-term-container" class="hidden">
-        <canvas id="tty0" class="screen" width="640" height="384">Terminal1</canvas>
-        <canvas id="tty1" class="screen" width="640" height="384">Terminal2</canvas>
+        <canvas id="tty0" class="screen" width="640" height="384" tabindex="0">Terminal1</canvas>
+        <canvas id="tty1" class="screen" width="640" height="384" tabindex="1">Terminal2</canvas>
       </div>
       <div id="hidden-vm-stats-container" class="hidden">
         <span id="vm-stats" class="label label-info vm-state-span"></span>

webapp/src/styles/_editor.scss

@@ -27,6 +27,22 @@
     padding-right: 0px !important;
 }
 
+#code {
+    flex: 1 0;
+}
+
+#editor-opts-container {
+    flex: 0 0;
+}
+
+#code-editor-options {
+    display: flex;
+    flex-flow: column nowrap;
+    width: 100%;
+    height: 100%;
+    align-items: stretch;
+}
+
 /* hack for the gcc options + program args + compile button toolbar */
 #compile-opts-container .col-sm-1,
 #compile-opts-container .col-sm-10,