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

js/core/css/respec2.css

@@ -108,6 +108,10 @@ table.simple {
     margin-bottom:  0;
 }
 
+.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("hidden");
+            },
+            hide:   function(){
+                $respecUI[0].classList.add("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) {

js/profile-w3c-common.js

@@ -69,13 +69,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/SpecRunner.html

@@ -26,6 +26,11 @@
         var allDeps = ["core/jquery-enhanced"]
           .concat(testFiles);
         require.config({
+          shim: {
+            shortcut: {
+              exports: "shortcut",
+            },
+          },
           baseUrl: "/js/",
           paths: {
             "jquery": "/node_modules/jquery/dist/jquery",

tests/spec/core/ui-spec.js

@@ -0,0 +1,51 @@
+"use strict";
+
+function noOp() {}
+
+function getDisplay(elem){
+  // force layout;
+  window.getComputedStyle(elem).width; // jshint ignore:line
+  return window.getComputedStyle(elem).display;
+}
+
+describe("Core - Ui", function () {
+  var ui;
+  beforeAll(function (done) {
+    require(["core/ui"], function (u) {
+      ui = u;
+      done();
+    });
+  });
+
+  afterAll(function (done) {
+    flushIframes();
+    done();
+  });
+
+  it("shows and hides the UI", function (done) {
+    makeRSDoc(makeStandardOps(), function (doc) {
+
+      // Run with mock arguments
+      ui.run({}, doc, noOp, { pub: noOp });
+
+      // We grab the second one, because it's the one generated by
+      // calling "run" above.
+      var pillContainer = doc.querySelectorAll("#respec-ui")[1];
+
+      // Show it
+      ui.show();
+      var currentDisplay = getDisplay(pillContainer);
+      expect(currentDisplay).toEqual("block");
+
+      // hide it
+      ui.hide();
+      currentDisplay = getDisplay(pillContainer);
+      expect(currentDisplay).toEqual("none");
+
+      // And show it again
+      ui.show();
+      currentDisplay = getDisplay(pillContainer);
+      expect(currentDisplay).toEqual("block");
+    }).then(done);
+  });
+});

tests/test-main.js

@@ -20,12 +20,18 @@ var testFiles = Object.keys(window.__karma__.files)
 var allDeps = ["js/core/jquery-enhanced"].concat(testFiles);
 
 require.config({
+  shim: {
+    shortcut: {
+      exports: "shortcut"
+    },
+  },
   // Karma serves files under /base, which is the basePath from your config file
   baseUrl: "/base/",
   paths: {
     "jquery": "/base/node_modules/jquery/dist/jquery",
     "core/utils": "js/core/utils",
     "core/jquery-enhanced": "js/core/jquery-enhanced",
+    "core/ui": "js/core/ui",
   },
   // dynamically load all test files
   deps: allDeps,

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",