Merge branch 'master' into Issue#1246

client/modules/IDE/components/PreviewFrame.jsx

@@ -334,10 +334,10 @@ class PreviewFrame extends React.Component {
   }
 
   renderSketch() {
-    this.props.clearConsole();
     const doc = this.iframeElement;
     const localFiles = this.injectLocalFiles();
     if (this.props.isPlaying) {
+      this.props.clearConsole();
       srcDoc.set(doc, localFiles);
       if (this.props.endSketchRefresh) {
         this.props.endSketchRefresh();

client/modules/IDE/components/Toolbar.jsx

@@ -116,7 +116,7 @@ class Toolbar extends React.Component {
               }
             }}
           >
-            {this.props.project.name} 
+            <span>{this.props.project.name}</span>
             {
               this.canEditProjectName() &&
               <InlineSVG className="toolbar__edit-name-button" src={editProjectNameUrl} alt="Edit Project Name" />

client/modules/IDE/pages/IDEView.jsx

@@ -191,6 +191,7 @@ class IDEView extends React.Component {
         <Toolbar />
         {this.props.ide.preferencesIsVisible &&
           <Overlay
+            title="Settings"
             ariaLabel="settings"
             closeOverlay={this.props.closePreferences}
           >
@@ -389,6 +390,7 @@ class IDEView extends React.Component {
         }
         { this.props.location.pathname === '/about' &&
           <Overlay
+            title="About"
             previousPath={this.props.ide.previousPath}
             ariaLabel="about"
           >
@@ -397,6 +399,7 @@ class IDEView extends React.Component {
         }
         { this.props.location.pathname === '/feedback' &&
           <Overlay
+            title="Submit Feedback"
             previousPath={this.props.ide.previousPath}
             ariaLabel="submit-feedback"
           >
@@ -405,6 +408,7 @@ class IDEView extends React.Component {
         }
         { this.props.ide.shareModalVisible &&
           <Overlay
+            title="Share"
             ariaLabel="share"
             closeOverlay={this.props.closeShareModal}
           >
@@ -417,6 +421,7 @@ class IDEView extends React.Component {
         }
         { this.props.ide.keyboardShortcutVisible &&
           <Overlay
+            title="Keyboard Shortcuts"
             ariaLabel="keyboard shortcuts"
             closeOverlay={this.props.closeKeyboardShortcutModal}
           >
@@ -425,6 +430,7 @@ class IDEView extends React.Component {
         }
         { this.props.ide.errorType &&
           <Overlay
+            title="Error"
             ariaLabel="error"
             closeOverlay={this.props.hideErrorModal}
           >

client/styles/components/_toolbar.scss

@@ -74,7 +74,6 @@
 	}
 	margin-left: #{10 / $base-font-size}rem;
 	padding-left: #{10 / $base-font-size}rem;
-	height: 70%;
   display: flex;
   align-items: center;
 }
@@ -90,7 +89,8 @@
 		}
 	}
 	cursor: pointer;
-	line-height: #{18 / $base-font-size}rem;
+	display: flex;
+	align-items: center;
 
 	.toolbar__project-name-container--editing & {
 		display: none;
@@ -151,7 +151,6 @@
 	display: inline-block;
 	vertical-align: top;
 	height: #{18 / $base-font-size}rem;
-	margin-left: #{-4 / $base-font-size}rem;
 	& svg {
 		width: #{18 / $base-font-size}rem;
 		height: #{18 / $base-font-size}rem;

developer_docs/README.md

@@ -1,13 +1,13 @@
 This folder contains documents intended for developers of the p5.js Web Editor. 
 
 ## List of Documents
-* [Installation](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/installation.md) - A guide for setting up your development environment
-* [Development](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/development.md) - A guide for adding code to the web editor
-* [Preparing a pull-request](https://github.com/processing/p5.js/blob/master/developer_docs/preparing_a_pull_request.md) - Instructions for how to make a pull-request
-* [Accessibility Guidelines](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/accessibility.md) - Guidelines for writing code to create an accessible application
-* [Deployment](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/deployment.md) - A guide to production deployment, and all platforms that are being used.
+* [Installation](installation.md) - A guide for setting up your development environment
+* [Development](development.md) - A guide for adding code to the web editor
+* [Preparing a pull-request](preparing_a_pull_request.md) - Instructions for how to make a pull-request
+* [Accessibility Guidelines](accessibility.md) - Guidelines for writing code to create an accessible application
+* [Deployment](deployment.md) - A guide to production deployment, and all platforms that are being used.
 
 ## Documents to Create
 * Design Principles - reference [p5.js design principles](https://github.com/processing/p5.js/edit/master/developer_docs/design_principles.md)
 * Issue Labels - reference [p5.js issue labels](https://github.com/processing/p5.js/blob/master/developer_docs/issue_labels.md)
-* File Structure - An explanation of the file structure of this application.
+* File Structure - An explanation of the file structure of this application.