diff --git a/js/core/css/respec2.css b/js/core/css/respec2.css index f7ec63d394..b8ccdecb31 100644 --- a/js/core/css/respec2.css +++ b/js/core/css/respec2.css @@ -108,6 +108,10 @@ table.simple { margin-bottom: 0; } +.hidden { + display: none; +} + @media print { .removeOnSave { display: none; diff --git a/js/core/ui.js b/js/core/ui.js index 7b0c7068e7..d53851e694 100644 --- a/js/core/ui.js +++ b/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 = $("
", doc) + var $div = $respecUI = $("
", 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) { diff --git a/js/profile-w3c-common.js b/js/profile-w3c-common.js index 1699a0c231..64a0a9dc93 100644 --- a/js/profile-w3c-common.js +++ b/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(); + }) }); } ); diff --git a/tests/SpecRunner.html b/tests/SpecRunner.html index e79d032bc7..8868ef460d 100644 --- a/tests/SpecRunner.html +++ b/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", diff --git a/tests/spec/core/ui-spec.js b/tests/spec/core/ui-spec.js new file mode 100644 index 0000000000..4e77b552b1 --- /dev/null +++ b/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); + }); +}); diff --git a/tests/test-main.js b/tests/test-main.js index 6959880399..655f236e25 100644 --- a/tests/test-main.js +++ b/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, diff --git a/tests/testFiles.json b/tests/testFiles.json index e7d4a23284..a49d297585 100644 --- a/tests/testFiles.json +++ b/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",