up to date ready to build version with design changes and 0.4.23 library

app/debug/index.js

@@ -63,12 +63,16 @@ module.exports = {
             width: this.debugWidth.toString() + "px",
             height: 'auto'
           });
+          $('.prompt-label').css('margin-left', '8px');
+          $('.console-label').css('margin-left', '5px');
 
         } else {
           container.css({
             width: 'auto',
             height: this.debugWidth > $('#editor-container').height() ? "100px" : this.debugWidth.toString() + "px"
           });
+          $('.prompt-label').css('margin-left', '25px');
+          $('.console-label').css('margin-left', '23px');
         }
       }
     },

app/debug/style.scss

@@ -1,6 +1,5 @@
 #debug {
-  border-radius: 7px;
-  background-color: #F1F1F2;
+  background-color: #eeeeee;
   flex: 1;
   color: #333;
   overflow: auto;
@@ -23,19 +22,31 @@
   width: 100px;
   height: auto;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: flex-start;
   position: relative;
   min-width: 10px;
   min-height: 10px;
 }
 
 #debug-drag {
-  background-color: #C8Cw4C4;
-  width: 10px;
+  background-color: rgba(153, 153, 153, 0.5);
+  padding-top: 2px;
+  height: 18px !important;
   cursor: col-resize;
+  color: #b1b1b1;
+  font-size: 12px;
 }
 
+.prompt-label {
+  margin-left: 25px;
+}
+
+.console-label {
+  margin-left: 23px;
+}
+
+
 body.horizontal {
   #debug-container {
     height: 100px;

app/debug/template.html

@@ -1,2 +1,2 @@
-<div id="debug-drag" v-on="mousedown: startDrag"></div>
+<div id="debug-drag" v-on="mousedown: startDrag"><span class='prompt-label'>>_</span><span class='console-label'>console</span></div>
 <div id="debug" style="font-size:{{$root.settings.fontSize}}px"></div>

app/editor/style.scss

@@ -1,17 +1,21 @@
 #main-container {
-  margin-top: 10px;
+  margin-top: 30px;
   margin-bottom: 10px;
   margin-right: 10px;
   flex: 1;
   display: flex;
   flex-direction: column;
   min-width: 100px;
+  /*padding-top: 21px !important;*/
 }
 
 div#editor-container {
   display: flex;
   flex: 1;
   flex-direction: row;
+  border-top: 1px solid #f4f4f4;
+  border-right: 1px solid #f4f4f4;
+  border-bottom: 1px solid #f4f4f4;
 }
 
 #main {
@@ -20,36 +24,112 @@ div#editor-container {
 }
 
 #editor {
-  font: 14px source-code;
-  border-radius: 7px;
+  font: 16px inconsolata;
   flex: 1;
+  background: #fdfdfd;
 }
 
-.ace-gutter {
-    color: #58585b;
-    min-width:52px !important;;
+.ace_scroller {
+  top: 21px !important;
+}
+
+.ace_editor {
+  overflow: visible !important;
+}
+
+.ace_active-line {
+  background: rgba(207, 207, 207, 0.2);
+}
+
+.ace_print-margin {
+  visibility: hidden !important;
+}
+
+.ace_gutter {
+  color: #b5b5b5 !important;
+  background: rgba(153, 153, 153, 0.1) !important;
+  width: 53px !important;
+  border-right: 1px solid rgba(153, 153, 153, 0.3);
+}
+
+.ace_gutter-active-line {
+  margin-top: 21px;  
+}
+
+.ace_gutter-layer {
+  width: 53px !important;
+  margin-top: 21px !important;
 }
 
 .ace_gutter-cell {
   background-image: none !important;
   background-position: 2px center !important;
-  padding-right: 15px !important;;
-}
-
-.ace_info {
-  background-color: #D7E5F5 !important;
+  padding-right: 15px !important;
 }
 
 .ace_warning {
-  background-color: none !important;
-  color: #58585b !important;
+  background-color: rgba(255, 190, 5, 0.3) !important;
 }
 
 .ace_error {
-  background-color: #FF6347 !important;
-  color: #ffffff !important;
+  background-color: rgba(255, 95, 81, 0.3) !important;
+}
+
+
+.ace_function,
+.ace_p5_function {
+    color: #DC3787 !important; /* not p5 pink, but related */
+}
+
+.ace_p5_variable {
+    color: #00A1D3 !important; /* not p5 blue, but related */
+}
+
+/* property, tag, boolean,
+   number, function-name, constant,
+   symbol */
+.ace_numeric,
+.ace_tag {
+    color: #333333 !important;
+}
+
+/* atrule, attr-value, keyword,
+   class-name */
+.ace_type,
+.ace_class,
+.ace_attribute-name {
+    color: #704F21 !important; /* darker brown */
+}
+
+/* selector, attr-name,
+function, builtin */
+.ace_keyword,
+.ace_support {
+  color: #B48318 !important;
+}
+
+/* comment, block-comment, prolog,
+   doctype, cdata */
+.ace_comment {
+    color: #A0A0A0 !important; /* light gray */
 }
 
+/* operator, entity, url,
+variable */
+.ace_string {
+  color: #a67f59 !important; /* og coy a67f59 a light brown */
+}
+
+.ace_operator {
+    color: #333 !important;
+}
+
+/* regex, important */
+.ace_regexp {
+  color: #e90 !important; /* og coy e90 orange */
+}
+
+
 
 body.horizontal {
   div#editor-container {
@@ -60,3 +140,131 @@ body.horizontal {
 .ace_scroller.ace_scroll-left {
   box-shadow: none !important;
 }
+
+/* SEARCH */
+
+.ace_search {
+  background-color: #f4f4f4 !important;
+  box-shadow: 0px 12px 12px rgba(0, 0, 0, 0.16) !important;
+  max-width: 365px !important;
+  width: 365px !important;
+  height: 138px !important;
+  font-family: montserrat !important;
+  font-size: 12px !important;
+  color: #b5b5b5 !important;
+  border-radius: 0 !important;
+  border: none !important;
+  padding: 0 !important;
+  overflow: visible !important;
+}
+
+.ace_replace_form {
+  width: 365px !important;
+  height: 134px !important;
+  background-color: #f4f4f4 !important;
+  box-shadow: 0px 12px 12px rgba(0, 0, 0, 0.16) !important;
+  margin-top: 80px !important;
+  border: none !important;
+  padding: 0 !important;
+}
+
+.ace_search_form .ace_search_field {
+  top: 51px !important; 
+}
+
+.ace_replace_form .ace_search_field {
+  top: 131px !important; 
+}
+
+.ace_search_field {
+  width: 324px !important;
+  height: 40px !important;
+  padding: 10px !important;
+  position: absolute !important;
+  left: 22px !important;
+  background-color: white !important;
+  outline: 0 !important;
+  border: 1px solid #979797 !important;
+}
+
+.ace_search_form {
+  border: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.ace_search_options {
+  margin: 0 !important;
+  padding: 0 !important;
+  position: absolute !important;
+  top: 100px !important;
+  left: 31px !important;
+}
+
+.ace_button {
+  border: none !important;
+  opacity: 0.75 !important;
+  color: #b5b5b5 !important;
+  margin-right: 12px !important;
+
+  &:hover {
+    background-color: none !important;
+    opacity: 0.35 !important;
+  }
+}
+
+.ace_searchbtn, .ace_replacebtn {
+  background-color: rgba(0, 0, 0, 0) !important;
+  border: none !important;
+  color: #b5b5b5 !important;
+  opacity: 0.75 !important;
+  position: absolute !important;
+  height: 20px !important;
+
+  &:hover {
+    opacity: 0.35 !important;
+  }
+}
+
+.ace_searchbtn {
+  top: 100px !important;
+}
+.ace_replacebtn {
+  top: 180px !important;
+}
+
+.ace_search_form button:nth-of-type(1) {
+  left: 257px !important;
+}
+.ace_search_form button:nth-of-type(2) {
+  left: 287px !important;
+}
+.ace_search_form button:nth-of-type(3) {
+  left: 317px !important;
+}
+
+.ace_searchbtn_close {
+  background: url('../images/close-button.svg') !important;
+
+  width: 24px !important;
+  height: 24px !important;
+  position: absolute !important;
+  top: 15px !important;
+  right: 14px !important;
+  fill: #2F2F30 !important;
+  transition: all 0.1s ease !important;
+  margin: 0 !important;
+  padding: 0 !important;
+
+  &:hover {
+    opacity: 0.65 !important;
+  }
+}
+
+.ace_replace_form button:nth-of-type(1) {
+  margin-left: 31px !important;
+}
+
+.ace_replace_form button:nth-of-type(2) {
+  margin-left: 319px !important;
+  width: 27px !important;
+}

app/modes/p5/p5-mode.js

@@ -113,7 +113,7 @@ module.exports = {
     gui.App.clearCache();
 
     if (this.outputWindow) {
-      if (this.settings.runInBrowser) {
+      if ((String(self.settings.runInBrowser) == "true")) {
         gui.Shell.openExternal(url);
       } else {
         this.outputWindow.reloadIgnoringCache();
@@ -124,7 +124,7 @@ module.exports = {
       }
     } else {
       startServer(this.projectPath, this, function(url) {
-        if (self.settings.runInBrowser) {
+        if ((String(self.settings.runInBrowser) === "true")) {
           gui.Shell.openExternal(url);
         } else {
           fs.readFile(Path.join(self.projectPath, 'sketch.js'), function(err, data){

app/settings.js

@@ -1,7 +1,7 @@
 var defaults = {
   fontSize: 14,
   tabSize: 2,
-  tabType: "spaces",
+  tabType: 'spaces',
   theme: 'tomorrow',
   consoleOrientation: 'horizontal',
   showSidebar: false,

app/settings/index.js

@@ -14,9 +14,21 @@ module.exports = {
 
   methods: {
     updateTabSize: function(e) {
-      var parsed = parseInt(e.target.value);
+      var parsed = typeof e === 'number' ? e : parseInt(e.target.value);
       this.tabSize = parsed >= 1 ? parsed : 1;
       this.tabSizeDisplay = this.tabSize;
+    },
+    decreaseTabSize: function(e) {
+      this.updateTabSize(this.tabSize-1);
+    },
+    increaseTabSize: function(e) {
+      this.updateTabSize(this.tabSize+1);
+    },
+    decreaseFontSize: function(e) {
+      this.fontSize--;
+    },
+    increaseFontSize: function(e) {
+      this.fontSize++;
     }
   }