Introduce a tab bar

This will make it easier to add a third tab to HtmlReporterV2.

lib/jasmine-core/jasmine-html.js

@@ -35,6 +35,7 @@ jasmineRequire.html = function(j$) {
   j$.private.SymbolsView = jasmineRequire.SymbolsView(j$);
   j$.private.SummaryTreeView = jasmineRequire.SummaryTreeView(j$);
   j$.private.FailuresView = jasmineRequire.FailuresView(j$);
+  j$.private.TabBar = jasmineRequire.TabBar(j$);
   j$.HtmlReporter = jasmineRequire.HtmlReporter(j$);
   j$.HtmlReporterV2Urls = jasmineRequire.HtmlReporterV2Urls(j$);
   j$.HtmlReporterV2 = jasmineRequire.HtmlReporterV2(j$);
@@ -187,16 +188,52 @@ jasmineRequire.HtmlReporter = function(j$) {
       results.appendChild(summary.rootEl);
 
       if (this.#stateBuilder.anyNonTopSuiteFailures) {
-        this.#alerts.addFailureToggle(
-          () => this.#setMenuModeTo('jasmine-failure-list'),
-          () => this.#setMenuModeTo('jasmine-spec-list')
-        );
-
+        this.#addFailureToggle();
         this.#setMenuModeTo('jasmine-failure-list');
         this.#failures.show();
       }
     }
 
+    #addFailureToggle() {
+      const onClickFailures = () => this.#setMenuModeTo('jasmine-failure-list');
+      const onClickSpecList = () => this.#setMenuModeTo('jasmine-spec-list');
+      const failuresLink = createDom(
+        'a',
+        { className: 'jasmine-failures-menu', href: '#' },
+        'Failures'
+      );
+      let specListLink = createDom(
+        'a',
+        { className: 'jasmine-spec-list-menu', href: '#' },
+        'Spec List'
+      );
+
+      failuresLink.onclick = function() {
+        onClickFailures();
+        return false;
+      };
+
+      specListLink.onclick = function() {
+        onClickSpecList();
+        return false;
+      };
+
+      this.#alerts.addBar(
+        createDom(
+          'span',
+          { className: 'jasmine-menu jasmine-bar jasmine-spec-list' },
+          [createDom('span', {}, 'Spec List | '), failuresLink]
+        )
+      );
+      this.#alerts.addBar(
+        createDom(
+          'span',
+          { className: 'jasmine-menu jasmine-bar jasmine-failure-list' },
+          [specListLink, createDom('span', {}, ' | Failures ')]
+        )
+      );
+    }
+
     #find(selector) {
       return this.#getContainer().querySelector(
         '.jasmine_html-reporter ' + selector
@@ -434,6 +471,7 @@ jasmineRequire.AlertsView = function(j$) {
       );
     }
 
+    // TODO: remove this once HtmlReporterV2 doesn't use it
     addFailureToggle(onClickFailures, onClickSpecList) {
       const failuresLink = createDom(
         'a',
@@ -456,14 +494,20 @@ jasmineRequire.AlertsView = function(j$) {
         return false;
       };
 
-      this.#createAndAdd('jasmine-menu jasmine-bar jasmine-spec-list', [
-        createDom('span', {}, 'Spec List | '),
-        failuresLink
-      ]);
-      this.#createAndAdd('jasmine-menu jasmine-bar jasmine-failure-list', [
-        specListLink,
-        createDom('span', {}, ' | Failures ')
-      ]);
+      this.rootEl.appendChild(
+        createDom(
+          'span',
+          { className: 'jasmine-menu jasmine-bar jasmine-spec-list' },
+          [createDom('span', {}, 'Spec List | '), failuresLink]
+        )
+      );
+      this.rootEl.appendChild(
+        createDom(
+          'span',
+          { className: 'jasmine-menu jasmine-bar jasmine-failure-list' },
+          [specListLink, createDom('span', {}, ' | Failures ')]
+        )
+      );
     }
 
     addGlobalFailure(failure) {
@@ -946,6 +990,9 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
 
   const { createDom, noExpectations } = j$.private.htmlReporterUtils;
 
+  const specListTabId = 'jasmine-specListTab';
+  const failuresTabId = 'jasmine-failuresTab';
+
   /**
    * @class HtmlReporterV2
    * @classdesc Displays results and allows re-running individual specs and suites.
@@ -974,6 +1021,7 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
     // Sub-views
     #alerts;
     #statusBar;
+    #tabBar;
     #progress;
     #banner;
     #failures;
@@ -1011,6 +1059,22 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
       this.#statusBar = new j$.private.OverallStatusBar(this.#urlBuilder);
       this.#statusBar.showRunning();
       this.#alerts.addBar(this.#statusBar.rootEl);
+
+      this.#tabBar = new j$.private.TabBar(
+        [
+          { id: specListTabId, label: 'Spec List' },
+          { id: failuresTabId, label: 'Failures' }
+        ],
+        tabId => {
+          if (tabId === specListTabId) {
+            this.#setMenuModeTo('jasmine-spec-list');
+          } else {
+            this.#setMenuModeTo('jasmine-failure-list');
+          }
+        }
+      );
+      this.#alerts.addBar(this.#tabBar.rootEl);
+
       this.#progress = new ProgressView();
       this.#banner = new j$.private.Banner(
         this.#queryString.navigateWithNewParam.bind(this.#queryString),
@@ -1103,13 +1167,11 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
       results.appendChild(summary.rootEl);
 
       if (this.#stateBuilder.anyNonTopSuiteFailures) {
-        this.#alerts.addFailureToggle(
-          () => this.#setMenuModeTo('jasmine-failure-list'),
-          () => this.#setMenuModeTo('jasmine-spec-list')
-        );
-
-        this.#setMenuModeTo('jasmine-failure-list');
-        this.#failures.show();
+        this.#tabBar.showTab(specListTabId);
+        this.#tabBar.showTab(failuresTabId);
+        this.#tabBar.selectTab(failuresTabId);
+      } else {
+        this.#tabBar.selectTab(specListTabId);
       }
     }
 
@@ -1148,7 +1210,6 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
       this.rootEl.value = this.rootEl.value + 1;
 
       if (result.status === 'failed') {
-        // TODO: also a non-color indicator
         this.rootEl.classList.add('failed');
       }
     }
@@ -1665,3 +1726,81 @@ jasmineRequire.SymbolsView = function(j$) {
 
   return SymbolsView;
 };
+
+jasmineRequire.TabBar = function(j$) {
+  const createDom = j$.private.htmlReporterUtils.createDom;
+
+  class TabBar {
+    #tabs;
+    #onSelectTab;
+
+    // tabSpecs should be an array of {id, label}.
+    // All tabs are initially not visible and not selected.
+    constructor(tabSpecs, onSelectTab) {
+      this.#onSelectTab = onSelectTab;
+      this.#tabs = [];
+      this.#tabs = tabSpecs.map(ts => new Tab(ts, () => this.selectTab(ts.id)));
+
+      this.rootEl = createDom(
+        'span',
+        { className: 'jasmine-menu jasmine-bar' },
+        this.#tabs.map(t => t.rootEl)
+      );
+    }
+
+    showTab(id) {
+      for (const tab of this.#tabs) {
+        if (tab.rootEl.id === id) {
+          tab.setVisibility(true);
+        }
+      }
+    }
+
+    selectTab(id) {
+      for (const tab of this.#tabs) {
+        tab.setSelected(tab.rootEl.id === id);
+      }
+
+      this.#onSelectTab(id);
+    }
+  }
+
+  class Tab {
+    #spec;
+    #onClick;
+
+    constructor(spec, onClick) {
+      this.#spec = spec;
+      this.#onClick = onClick;
+      this.rootEl = createDom(
+        'span',
+        { id: spec.id, className: 'jasmine-tab jasmine-hidden' },
+        this.#createLink()
+      );
+    }
+
+    setVisibility(visible) {
+      this.rootEl.classList.toggle('jasmine-hidden', !visible);
+    }
+
+    setSelected(selected) {
+      if (selected) {
+        this.rootEl.textContent = this.#spec.label;
+      } else {
+        this.rootEl.textContent = '';
+        this.rootEl.appendChild(this.#createLink());
+      }
+    }
+
+    #createLink() {
+      const link = createDom('a', { href: '#' }, this.#spec.label);
+      link.addEventListener('click', e => {
+        e.preventDefault();
+        this.#onClick();
+      });
+      return link;
+    }
+  }
+
+  return TabBar;
+};

lib/jasmine-core/jasmine.css

@@ -323,4 +323,12 @@ body {
 }
 .jasmine_html-reporter .jasmine-debug-log .jasmine-debug-log-msg {
   white-space: pre;
+}
+
+.jasmine-hidden {
+  display: none;
+}
+
+.jasmine-tab + .jasmine-tab:before {
+  content: " | ";
 }