Merge pull request #659 from noflo/fix_mobile_safari

Improve error reporting

.travis.yml

@@ -2,11 +2,19 @@ language: node_js
 sudo: false
 node_js:
 - '4.2'
+addons:
+  apt:
+    sources:
+    - ubuntu-toolchain-r-test
+    packages:
+    - g++-4.8
 before_install:
 - if [[ `npm -v` != 3* ]]; then npm i -g npm@3; fi
 before_script:
 - npm install -g grunt-cli
 env:
+  matrix:
+  - CXX=g++-4.8
   global:
   - secure: SqpDxIE0eAc0s9lvm+djIcS+y+778NeoZrRSsnF6+8b6K7pYjM9A41WdYFLhcP2fb/keVKcG9nbpwtYdTXGjhe59NFHM0gE3GjML/hpfy8Y7djEIdnt3EGjNEkXAd8pB9NCMyxNUjYgUUF6w7splOR1rViXpdyig8StGtfunM+k=
   - secure: MGOSVmfg+zl8lco7IYcSzYVAuS9VkhK0z2z8/bcZmCeRmPh+IaeSfEaeHka1Swcr4rO0IWj4bU9fqjp8IjA/8ntlbnSZcPM4QJ0SQaXLUGOsNnmIE8X0eLe8xKKFw682qUUdm+nowtdFiCF07+aRBzLYwAzSlevZVl3NuwALrBM=

app/main.js

@@ -1,6 +1,3 @@
-console.time('noflo-ui-init');
-console.time('polymer-ready');
-
 var exported = {
   noflo: require('noflo'),
   underscore: require('underscore'),
@@ -19,7 +16,7 @@ window.require = function (moduleName) {
   throw new Error('Module ' + moduleName + ' not available');
 };
 
-window.addEventListener('polymer-ready', function() {
+window.addEventListener('WebComponentsReady', function() {
   var noflo = require('noflo');
   var runtime = require('noflo-runtime-webrtc');
 
@@ -29,12 +26,14 @@ window.addEventListener('polymer-ready', function() {
   var loadGraphs = function(callback) {
     noflo.graph.loadJSON(mainGraph, function (err, g) {
       if (err) {
-        throw err;
+        callback(err);
+        return;
       }
       g.baseDir = baseDir;
       noflo.createNetwork(g, function (err, n) {
         if (err) {
-          throw err;
+          callback(err);
+          return;
         }
         n.on('process-error', function (err) {
           console.log(err);
@@ -47,7 +46,8 @@ window.addEventListener('polymer-ready', function() {
     var secret = Math.random().toString(36).substring(7);
     noflo.graph.loadJSON(mainGraph, function (err, graph) {
       if (err) {
-        console.log(err);
+        callback(err);
+        return;
       }
       graph.baseDir = baseDir;
       var runtimeOptions = {
@@ -79,13 +79,17 @@ window.addEventListener('polymer-ready', function() {
     });
   };
 
-  console.timeEnd('polymer-ready');
-  document.body.classList.remove('loading');
   window.nofloStarted = false;
-  console.time('noflo-prepare');
   var load = (false) ? loadGraphsDebuggable : loadGraphs;
-  load(function() {
-      console.timeEnd('noflo-prepare');
-      console.timeEnd('noflo-ui-init');
+  load(function(err) {
+    if (err) {
+      throw err;
+    }
+    document.body.classList.remove('loading');
+    window.nofloStarted = true;
+    setTimeout(function () {
+      var loader = document.getElementById('loading');
+      document.body.removeChild(loader);
+    }, 400);
   });
 });

css/noflo-ui.css

@@ -15,25 +15,46 @@ body {
   -webkit-tap-highlight-color: transparent; /* "turn off" link highlight */
 }
 
-#loading {
-  display: none;
+body #loading {
+  opacity: 0;
+  -webkit-transition: opacity 0.3s ease-in;
+  -moz-transition: opacity 0.3s ease-in;
+  -ms-transition: opacity 0.3s ease-in;
+  -o-transition: opacity 0.3s ease-in;
+  z-index: -1;
+  width: 400px;
+  color: white;
+  text-align: center;
+  top: calc(50% - 18px);
+  left: calc(50% - 200px);
+  font-size: 36px;
+  position: fixed;
 }
 
 body.loading #loading {
   display: block;
-  position: fixed;
+  opacity: 1;
   top: calc(50% - 18px);
   left: calc(50% - 200px);
   font-size: 36px;
-  color: white;
   animation: pulsate 2s ease-in-out;
   animation-iteration-count: infinite;
   -webkit-animation: pulsate 2s ease-in-out;
   -webkit-animation-iteration-count: infinite;
-  width: 400px;
   text-align: center;
   z-index: 10;
 }
+body noflo-ui {
+  opacity: 1;
+  transition: opacity 0.3s ease-in;
+  -webkit-transition: opacity 0.3s ease-in;
+  -moz-transition: opacity 0.3s ease-in;
+  -ms-transition: opacity 0.3s ease-in;
+  -o-transition: opacity 0.3s ease-in;
+}
+body.loading noflo-ui {
+  opacity: 0;
+}
 @keyframes pulsate {
   0% {
     transform: scale(1.0, 1.0);

graphs/PrepareStorage.fbp

@@ -1,4 +1,3 @@
-
 INPORT=Open.NAME:NAME
 OUTPORT=Errors.OUT:ERROR
 OUTPORT=Open.DB:DB

graphs/ProjectRuntime.fbp

@@ -11,6 +11,7 @@ HoldConnection(ui/HoldRuntimeConnection) CONTEXT -> IN ConnectedContext(core/Mer
 'runtime' -> KEY GetDefinition(objects/GetObjectKey)
 HoldConnection CONNECT -> IN GetDefinition
 GetDefinition OUT -> DEFINITION Connect(runtime/ConnectRuntime)
+'10000' -> TIMEOUT Connect
 'body' -> SELECTOR GetParent(dom/GetElement) ELEMENT -> ELEMENT Connect
 'runtime' -> KEY AddRuntime(ui/SetToContext)
 GetDefinition OBJECT -> CONTEXT AddRuntime

graphs/RuntimeStorage.fbp

@@ -32,11 +32,11 @@ PopulateRuntimeData OUT -> CONTEXT DirectRuntime(ui/DirectRuntime)
 DirectRuntime CONTEXT -> IN MergeContextPreSubscribe
 
 # Get components list when connecting to new runtime
-ProjectRuntime CONNECTED -> RUNTIME ListComponents(runtime/ListComponents)
-DirectRuntime RUNTIME -> RUNTIME ListComponents
-ListComponents OUT -> IN UpdateLibrary(ui/UpdateComponentLibrary)
-ProjectRuntime CONNECTED -> RUNTIME UpdateLibrary
+ProjectRuntime RUNTIME -> RUNTIME UpdateLibrary(ui/UpdateComponentLibrary)
 DirectRuntime RUNTIME -> RUNTIME UpdateLibrary
+ProjectRuntime RUNTIME -> RUNTIME ListComponents(runtime/ListComponents)
+DirectRuntime RUNTIME -> RUNTIME ListComponents
+ListComponents OUT -> IN UpdateLibrary
 UpdateLibrary OUT -> IN MergeContext
 ListComponents ERROR -> IN ShowErrors
 

graphs/main.fbp

@@ -43,3 +43,7 @@ Router ROUTE -> IN Dispatch
 # Handle resizes
 ListenWindow WIDTH -> WIDTH AppView
 ListenWindow HEIGHT -> HEIGHT AppView
+
+# Display storage errors
+PrepareStorage ERROR -> ERROR ErrorToCtx(ui/ErrorToContext) OUT -> CONTEXT AppView
+PrepareStorage ERROR ->  IN ShowErrors

index.dist.html

@@ -60,7 +60,7 @@
     <link rel="stylesheet" href="./css/noflo-ui.css">
     <link rel="import" href="./css/noflo-ui-shadow.html">
   </head>
-  <body class="$NOFLO_THEME">
+  <body class="$NOFLO_THEME loading">
     <!-- $NOFLO_APP_ANALYTICS -->
     <div id="loading">$NOFLO_APP_LOADING</div>
     <noflo-ui id="container"></noflo-ui>

package.json

@@ -37,13 +37,13 @@
     "noflo-objects": "~0.1.13",
     "noflo-polymer": "~0.2.0",
     "noflo-routers": "~0.2.2",
-    "noflo-runtime": "~0.3.4",
+    "noflo-runtime": "~0.3.8",
     "noflo-runtime-base": "^0.7.3",
     "noflo-runtime-webrtc": "~0.7.3",
     "noflo-strings": "~0.1.12",
     "rtc": "^3.4.0",
     "the-graph": "^0.6.0",
-    "webcomponents.js": "0.6.0"
+    "webcomponents.js": "^0.6.0"
   },
   "devDependencies": {
     "chai": "^3.5.0",
@@ -65,7 +65,7 @@
     "grunt-vulcanize": "^0.4.2",
     "grunt-zip": "^0.17.0",
     "mocha": "^3.2.0",
-    "syn": "0.1.5",
+    "syn": "0.2.2",
     "yaml-include-loader": "^1.0.0"
   },
   "scripts": {

spec/runner.html

@@ -16,8 +16,13 @@
     </style>
     <script src="../node_modules/mocha/mocha.js"></script>
     <script src="../node_modules/chai/chai.js"></script>
-    <script src="../node_modules/syn/dist/syn.js"></script>
-    <script>window.Syn = window.syn;  window.checkSupport = function(m) { return true; }</script>
+    <script src="../node_modules/syn/dist/global/syn.js"></script>
+    <script>
+      window.Syn = window.syn;
+      window.checkSupport = function(m) {
+        return true;
+      }
+    </script>
     <script>mocha.setup('bdd');</script>
   </head>
   <body>