Settings is split into tabs

The page had grown to nineteen sections on one long scroll.  They are now in
five tabs: Scanning, What it looks for, Sign in, Reports, and Web and
external sites.  Each tab shows only its sections, with Save right below.

It is still one form, so saving from any tab keeps everything on the others.
A link to a section, such as /settings#external, opens the tab it is on,
the last tab used comes back after a save, and a field the browser refuses
on a tab that is not showing opens that tab instead of stopping the save
without a word.  Without script every section shows, as before.

The page title also had the settings script inside it, which some browsers
showed as text in the tab.

Author: hackrange

app/web/help_text.py

@@ -305,3 +305,24 @@
 def sections() -> list:
     """The sections, in page order, as plain dictionaries for the template."""
     return [{"id": key, "nav": nav, **body} for key, nav, body in SECTIONS]
+
+
+# The tabs on the Settings page, and which sections each one holds.  Every
+# section is in exactly one, which a test checks, so a new section cannot be
+# left on no tab and quietly never shown.
+TABS = [
+    ("scanning", "Scanning", ["accounts", "scan", "branches", "people", "limits"]),
+    ("findings", "What it looks for", ["credentials", "code", "dependencies",
+                                       "intel", "fidelity", "sensitivity"]),
+    ("signin", "Sign in", ["signin", "sessions"]),
+    ("reports", "Reports", ["output", "reports", "display"]),
+    ("web", "Web and external sites", ["domains", "webtest", "external"]),
+]
+
+
+def tabs() -> list:
+    """-> [{id, label, sections: [{id, nav}]}] in page order."""
+    names = {key: nav for key, nav, _body in SECTIONS}
+    return [{"id": key, "label": label,
+             "sections": [{"id": s, "nav": names.get(s, s)} for s in ids]}
+            for key, label, ids in TABS]

app/web/routes_pages.py

@@ -3565,6 +3565,7 @@ def settings_page(request: Request, msg: str = "", kind: str = "",
     from app.core import rule_mutes, settings_store as store
     from app.core.models import RuleMute
     from app.web.help_text import sections as help_sections
+    from app.web.help_text import tabs as settings_tabs
 
     with session_scope() as db:
         context = _shared(db, user)
@@ -3573,7 +3574,7 @@ def settings_page(request: Request, msg: str = "", kind: str = "",
             # The links across the top and the ? beside each heading come from
             # the same list, so a section cannot end up in one and not the
             # other.
-            help_sections=help_sections(),
+            help_sections=help_sections(), settings_tabs=settings_tabs(),
             values=store.all_values(db),
             rulesets=store.RULESETS,
             muted_notes=store.MUTED_RULE_NOTES,

app/web/static/app.css

@@ -1108,3 +1108,9 @@ th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
 .ext-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem; }
 @media (max-width: 1100px) { .ext-grid { grid-template-columns: 1fr; } }
 .engine-list td { vertical-align: top; }
+
+/* The Settings page tabs.  The same pills as the section bar, with the
+   chosen one filled in. */
+.settings-tabs a { font-size: .85rem; padding: .35rem .9rem; }
+.settings-tabs a.active { color: var(--text); border-color: var(--border-strong);
+  background: var(--bg-sunk); font-weight: 600; }

app/web/static/settings.js

@@ -22,3 +22,95 @@
   picker.addEventListener("change", apply);
   apply();
 })();
+
+/* Tabs.  The page is one long form, and nobody wants to scroll past sign in
+ * to reach the reports.  Only the cards on the chosen tab show; the rest are
+ * hidden, not removed, so the form still sends every field when it is saved.
+ *
+ * The tab comes from the address (#tab-reports, or a section such as
+ * #external), then from the last one used, then the first.  A field the
+ * browser refuses on a tab that is not showing would stop the save without
+ * saying why, so its tab is opened first. */
+(function () {
+  "use strict";
+
+  var links = Array.prototype.slice.call(
+    document.querySelectorAll(".settings-tabs [data-tab]"));
+  if (!links.length) { return; }
+  var owner = {};
+  links.forEach(function (link) {
+    link.getAttribute("data-sections").split(" ").forEach(function (id) {
+      owner[id] = link.getAttribute("data-tab");
+    });
+  });
+
+  function remember(tab) {
+    try { window.sessionStorage.setItem("gcr-settings-tab", tab); } catch (e) { /* private mode */ }
+  }
+
+  function recalled() {
+    try { return window.sessionStorage.getItem("gcr-settings-tab"); } catch (e) { return null; }
+  }
+
+  function show(tab) {
+    links.forEach(function (link) {
+      var on = link.getAttribute("data-tab") === tab;
+      link.classList.toggle("active", on);
+      link.setAttribute("aria-selected", on ? "true" : "false");
+    });
+    Object.keys(owner).forEach(function (id) {
+      var card = document.getElementById(id);
+      if (card) { card.hidden = owner[id] !== tab; }
+    });
+    document.querySelectorAll("[data-on-tab]").forEach(function (node) {
+      node.hidden = node.getAttribute("data-on-tab") !== tab;
+    });
+    remember(tab);
+  }
+
+  function fromHash() {
+    var hash = (window.location.hash || "").replace(/^#/, "");
+    if (hash.indexOf("tab-") === 0 && links.some(function (l) {
+      return l.getAttribute("data-tab") === hash.slice(4); })) {
+      return hash.slice(4);
+    }
+    return owner[hash] || null;
+  }
+
+  links.forEach(function (link) {
+    link.addEventListener("click", function (event) {
+      event.preventDefault();
+      var tab = link.getAttribute("data-tab");
+      show(tab);
+      if (window.history && window.history.replaceState) {
+        window.history.replaceState(null, "", "#tab-" + tab);
+      }
+    });
+  });
+
+  window.addEventListener("hashchange", function () {
+    var tab = fromHash();
+    if (tab) {
+      show(tab);
+      var target = document.getElementById(window.location.hash.slice(1));
+      if (target && owner[target.id]) { target.scrollIntoView(); }
+    }
+  });
+
+  var form = document.getElementById("settings-form");
+  if (form) {
+    form.addEventListener("invalid", function (event) {
+      var card = event.target.closest(".card[id]");
+      if (card && owner[card.id] && card.hidden) { show(owner[card.id]); }
+    }, true);
+  }
+
+  var start = fromHash();
+  var last = recalled();
+  if (!start && last && links.some(function (l) { return l.getAttribute("data-tab") === last; })) {
+    start = last;
+  }
+  show(start || links[0].getAttribute("data-tab"));
+  var direct = document.getElementById((window.location.hash || "").slice(1));
+  if (direct && owner[direct.id]) { direct.scrollIntoView(); }
+})();

app/web/templates/settings.html

@@ -1,16 +1,20 @@
 {% extends "base.html" %}
-{% block title %}Settings &middot; Git Code Review<script src="{{ base }}/static/settings.js?v={{ asset_v('settings.js') }}"></script>
-{% endblock %}
+{% block title %}Settings &middot; Git Code Review{% endblock %}
 {% block content %}
 <div class="page-head">
   <div><h1>Settings</h1>
     <div class="faint small">Everything the scanner needs.  It all lives in the
       database, so nothing here is in a file anybody can clone.</div></div>
 </div>
 
-<nav class="section-nav" aria-label="Sections of this page">
-  {% for section in help_sections %}
-  <a href="#{{ section.id }}">{{ section.nav }}</a>
+{# One tab per group of sections.  Every section stays in the one form, so
+   saving from any tab keeps what is on the others: a hidden field is still
+   sent.  Without script every section shows, the way the page used to. #}
+<nav class="section-nav settings-tabs" role="tablist" aria-label="Settings">
+  {% for tab in settings_tabs %}
+  <a href="#tab-{{ tab.id }}" role="tab" data-tab="{{ tab.id }}"
+     data-sections="{{ tab.sections | map(attribute='id') | join(' ') }}"
+     title="{{ tab.sections | map(attribute='nav') | join(', ') }}">{{ tab.label }}</a>
   {% endfor %}
 </nav>
 
@@ -50,7 +54,7 @@
   </div>
 </div>
 
-<div class="small faint" style="margin:1.2rem 0 .8rem">
+<div class="small faint" style="margin:1.2rem 0 .8rem" data-on-tab="scanning">
   Everything below applies to every account: what to look for, where the reports
   go, how people sign in.  The defaults work as they are.  Every branch, full
   history, live credential verification on, every detector on, reports in /out.