Added UrlInput component to tidy things up a little.

src/components/inputs/StringInput.jsx

@@ -8,10 +8,15 @@ class StringInput extends React.Component {
     style: PropTypes.object,
     default: PropTypes.string,
     onChange: PropTypes.func,
+    onInput: PropTypes.func,
     multi: PropTypes.bool,
     required: PropTypes.bool,
   }
 
+  static defaultProps = {
+    onInput: () => {},
+  }
+
   constructor(props) {
     super(props)
     this.state = {
@@ -57,7 +62,9 @@ class StringInput extends React.Component {
         this.setState({
           editing: true,
           value: e.target.value
-        })
+        }, () => {
+          this.props.onInput(this.state.value);
+        });
       },
       onBlur: () => {
         if(this.state.value!==this.props.value) {

src/components/inputs/UrlInput.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import StringInput from './StringInput'
+import SmallError from '../util/SmallError'
+
+class UrlInput extends React.Component {
+  static propTypes = {
+    "data-wd-key": PropTypes.string,
+    value: PropTypes.string,
+    style: PropTypes.object,
+    default: PropTypes.string,
+    onChange: PropTypes.func,
+    multi: PropTypes.bool,
+    required: PropTypes.bool,
+  }
+
+  state = {
+    error: null,
+  }
+
+  onInput = (url) => {
+    let error;
+    const getProtocol = (url) => {
+      try {
+        const urlObj = new URL(url);
+        return urlObj.protocol;
+      }
+      catch (err) {
+        return undefined;
+      }
+    };
+    const protocol = getProtocol(url);
+    if (
+      protocol &&
+      protocol === "https:" &&
+      window.location.protocol !== "http:"
+    ) {
+      error = (
+        <SmallError>
+        CORs policy won't allow fetching resources served over http from https, use a <code>https://</code> domain
+        </SmallError>
+      );
+    }
+
+    this.setState({error});
+  }
+
+  render () {
+    return (
+      <div>
+        <StringInput
+          {...this.props}
+          onInput={this.onInput}
+        />
+        {this.state.error}
+      </div>
+    );
+  }
+}
+
+export default UrlInput

src/components/modals/SourcesModal.jsx

@@ -158,15 +158,12 @@ class AddSource extends React.Component {
   }
 
   onAdd = () => {
-    this.props.onAdd(this.state.sourceId, this.state.source);
+    const {source, sourceId} = this.state;
+    this.props.onAdd(sourceId, source);
   }
 
   onChangeSource = (source) => {
-    // let error = "CORs policy won't allow fetching resources served over http from https";
-    this.setState({
-      source,
-      error,
-    });
+    this.setState({source});
   }
 
   render() {
@@ -198,15 +195,9 @@ class AddSource extends React.Component {
         mode={this.state.mode}
         source={this.state.source}
       />
-      {this.state.error &&
-        <div className="maputnik-add-source-error" style={{fontSize: "12px", color: "#E57373"}}>
-          Error: {this.state.error}
-        </div>
-      }
       <Button
         className="maputnik-add-source-button"
 				onClick={this.onAdd}
-        disabled={!!this.state.error}
       >
         Add Source
       </Button>

src/components/sources/SourceTypeEditor.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
+import UrlInput from '../inputs/UrlInput'
 import NumberInput from '../inputs/NumberInput'
 import SelectInput from '../inputs/SelectInput'
 import JSONEditor from '../layers/JSONEditor'
@@ -18,7 +19,7 @@ class TileJSONSourceEditor extends React.Component {
   render() {
     return <div>
       <InputBlock label={"TileJSON URL"} doc={latest.source_vector.url.doc}>
-        <StringInput
+        <UrlInput
           value={this.props.source.url}
           onChange={url => this.props.onChange({
             ...this.props.source,
@@ -52,7 +53,7 @@ class TileURLSourceEditor extends React.Component {
     const tiles = this.props.source.tiles || []
     return tiles.map((tileUrl, tileIndex) => {
       return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={latest.source_vector.tiles.doc}>
-        <StringInput
+        <UrlInput
           value={tileUrl}
           onChange={this.changeTileUrl.bind(this, tileIndex)}
         />

src/components/util/SmallError.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import './SmallError.scss';
+
+
+class SmallError extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+  }
+
+  render () {
+    return (
+      <div className="SmallError">
+        Error: {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default SmallError

src/components/util/SmallError.scss

@@ -0,0 +1,7 @@
+@import '../../styles/vars';
+
+.SmallError {
+  color: #E57373;
+  font-size: $font-size-5;
+  margin-top: $margin-2
+}

src/styles/_vars.scss

@@ -0,0 +1,23 @@
+$color-black: #191b20;
+$color-gray: #222429;
+$color-midgray: #303237;
+$color-lowgray: #a4a4a4;
+$color-white: #f0f0f0;
+$color-red: #cf4a4a;
+$color-green: #53b972;
+$margin-1: 3px;
+$margin-2: 5px;
+$margin-3: 10px;
+$margin-4: 30px;
+$margin-5: 40px;
+$font-size-1: 24px;
+$font-size-2: 20px;
+$font-size-3: 18px;
+$font-size-4: 16px;
+$font-size-5: 14px;
+$font-size-6: 12px;
+$font-family: Roboto, sans-serif;
+
+$toolbar-height: 40px;
+$toolbar-offset: 0;
+

src/styles/index.scss

@@ -1,26 +1,4 @@
-$color-black: #191b20;
-$color-gray: #222429;
-$color-midgray: #303237;
-$color-lowgray: #a4a4a4;
-$color-white: #f0f0f0;
-$color-red: #cf4a4a;
-$color-green: #53b972;
-$margin-1: 3px;
-$margin-2: 5px;
-$margin-3: 10px;
-$margin-4: 30px;
-$margin-5: 40px;
-$font-size-1: 24px;
-$font-size-2: 20px;
-$font-size-3: 18px;
-$font-size-4: 16px;
-$font-size-5: 14px;
-$font-size-6: 12px;
-$font-family: Roboto, sans-serif;
-
-$toolbar-height: 40px;
-$toolbar-offset: 0;
-
+@import 'vars';
 @import 'mixins';
 @import 'reset';
 @import 'base';