Fix(ui): dont show till respecIsReady (closes #410)

* fix(profile-w3c-common): forgot to include fetch poly for Safari

* Chore(.travis.yml): use latest firefox

* Fix(ui): dont show till respecIsReady (closes #410)

js/core/css/respec2.css

@@ -108,6 +108,10 @@ table.simple {
     margin-bottom:  0;
 }
 
+.respec-hidden {
+    display: none;
+}
+
 @media print {
     .removeOnSave {
         display: none;

js/core/ui.js

@@ -31,6 +31,7 @@ define(
         ,   warnings = []
         ,   buttons = {}
         ,   $respecButton
+        ,   $respecUI
         ,   errWarn = function (msg, arr, butName, bg, title) {
                 arr.push(msg);
                 if (!buttons[butName]) {
@@ -98,10 +99,16 @@ define(
         ;
         var conf, doc, msg;
         var ui = {
+            show:   function(){
+                $respecUI[0].classList.remove("respec-hidden");
+            },
+            hide:   function(){
+                $respecUI[0].classList.add("respec-hidden");
+            },
             run:    function (_conf, _doc, cb, _msg) {
                 conf = _conf, doc = _doc, msg = _msg;
                 msg.pub("start", "core/ui");
-                var $div = $("<div id='respec-ui' class='removeOnSave'></div>", doc)
+                var $div = $respecUI = $("<div id='respec-ui' class='removeOnSave'></div>", doc)
                                 .css({
                                     position:   "fixed"
                                 ,   top:        "20px"
@@ -134,6 +141,7 @@ define(
                     if (buttons.warning) buttons.warning.click();
                 });
                 msg.pub("end", "core/ui");
+                this.hide();
                 cb();
             }
         ,   addCommand: function (label, module, keyShort) {
@@ -219,6 +227,7 @@ define(
                     ;
             }
         };
+        window.respecUI = ui;
         if (window.respecEvents) respecEvents.sub("error", function (details) {
             ui.error(details);
         });

js/profile-w3c-common.js

@@ -71,13 +71,21 @@ define([
     "ui/search-specref",
   ],
   function(domReady, runner, ui) {
-    var args = Array.prototype.slice.call(arguments);
+    var args = Array.from(arguments);
     domReady(function() {
       ui.addCommand("Save Snapshot", "ui/save-html", "Ctrl+Shift+Alt+S");
       ui.addCommand("About ReSpec", "ui/about-respec", "Ctrl+Shift+Alt+A");
       ui.addCommand("Definition List", "ui/dfn-list", "Ctrl+Shift+Alt+D");
       ui.addCommand("Search Specref DB", "ui/search-specref", "Ctrl+Shift+Alt+space");
-      runner.runAll(args);
+      runner
+        .runAll(args)
+        .then(document.respectIsReady)
+        .then(ui.show)
+        .catch(function(err){
+          console.error(err);
+          // even if things go critically bad, we should still try to show the UI
+          ui.show();
+        })
     });
   }
 );

tests/spec/core/ui-spec.js

@@ -0,0 +1,24 @@
+"use strict";
+
+describe("Core - Ui", function () {
+  afterAll(function (done) {
+    flushIframes();
+    done();
+  });
+
+  it("shows and hides the UI", function (done) {
+    makeRSDoc(makeStandardOps(), function (doc) {
+      var ui = doc.defaultView.respecUI;
+      var pillContainer = doc.querySelector("#respec-ui");
+      // Initially, it should be showing
+      expect(pillContainer.classList.contains("respec-hidden")).toBe(false);
+      ui.show();
+      // showing it doesn't change it from showing
+      expect(pillContainer.classList.contains("respec-hidden")).toBe(false);
+      ui.hide();
+      expect(pillContainer.classList.contains("respec-hidden")).toBe(true);
+      ui.show();
+      expect(pillContainer.classList.contains("respec-hidden")).toBe(false);
+    }).then(done);
+  });
+});

tests/testFiles.json

@@ -22,6 +22,7 @@
   "spec/core/section-refs-spec.js",
   "spec/core/structure-spec.js",
   "spec/core/style-spec.js",
+  "spec/core/ui-spec.js",
   "spec/core/utils-spec.js",
   "spec/core/webidl-contiguous-spec.js",
   "spec/core/webidl-oldschool-spec.js",