git-reviewer 2.11.0 → 2.13.0

package/public/index.html

@@ -53,28 +53,51 @@
         </button>
       </div>
     </div>
-    <div id="status" class="status"></div>
-
-    <div id="scopeBar" class="scope-bar hidden">
-      <span id="scopeLabel" class="scope-label"></span>
-      <div class="scope-compare">
-        <!-- "since", not "from": `base..HEAD` does not include base's own
-             changes, and a picker that says "compare from x1" invites the
-             reading that x1 is in the diff. -->
-        <label for="compareSelect">Changes since</label>
-        <select id="compareSelect" onchange="compareFromSelection()" aria-label="Review everything after this commit">
-          <option value="">Pick a commit…</option>
-        </select>
-        <input
-          type="text"
-          id="compareBase"
-          placeholder="or a branch, tag or ref"
-          spellcheck="false"
-          autocomplete="off"
-          value="">
-        <button id="compareBtn" onclick="compareFrom()">Compare</button>
-        <button id="scopeResetBtn" class="scope-reset hidden" onclick="resetScope()">Back to latest</button>
+    <div id="status" class="status hidden" role="status" aria-live="polite"></div>
+
+    <div id="scopeBar" class="scope-bar hidden" role="region" aria-label="What is being reviewed">
+      <div class="scope-summary">
+        <div class="scope-text">
+          <span id="scopeLabel" class="scope-label"></span>
+          <span id="scopeMeta" class="scope-meta"></span>
+        </div>
+        <div class="scope-actions">
+          <div id="commitNav" class="commit-nav hidden" role="group" aria-label="Step through commits">
+            <button id="prevCommitBtn" class="scope-action" onclick="stepCommit(-1)"
+              title="Older commit ( [ )" aria-label="Older commit">&#8249;</button>
+            <span id="commitPosition" class="commit-position"></span>
+            <button id="nextCommitBtn" class="scope-action" onclick="stepCommit(1)"
+              title="Newer commit ( ] )" aria-label="Newer commit">&#8250;</button>
+          </div>
+          <button id="allCommitsBtn" class="scope-action hidden" onclick="showAllCommits()">All commits</button>
+          <button id="compareToggle" class="scope-action" onclick="openCompare()"
+            title="Compare two branches, tags or commits">Compare</button>
+          <button id="scopeResetBtn" class="scope-action hidden" onclick="resetScope()">Stop comparing</button>
+        </div>
       </div>
+
+      <!-- GitHub's vocabulary, deliberately: "base" and "compare" are what
+           the people using this already call the two ends of a pull request. -->
+      <div id="compareRow" class="compare-row hidden">
+        <div class="compare-end">
+          <label for="compareBaseSelect">Base</label>
+          <select id="compareBaseSelect" onchange="onPickerChange('base')"></select>
+          <input id="compareBaseOther" class="compare-other hidden" type="text"
+            placeholder="tag, HEAD~5 or sha" spellcheck="false" autocomplete="off"
+            aria-label="Base ref">
+        </div>
+        <button id="compareSwap" class="compare-swap" onclick="swapCompare()"
+          title="Swap base and compare" aria-label="Swap base and compare">&#8644;</button>
+        <div class="compare-end">
+          <label for="compareHeadSelect">Compare</label>
+          <select id="compareHeadSelect" onchange="onPickerChange('head')"></select>
+          <input id="compareHeadOther" class="compare-other hidden" type="text"
+            placeholder="tag, HEAD~5 or sha" spellcheck="false" autocomplete="off"
+            aria-label="Compare ref">
+        </div>
+      </div>
+
+      <p id="scopeNote" class="scope-note hidden"></p>
     </div>
   </header>
 
@@ -172,7 +195,7 @@
           <span class="help-keys">
             <kbd>⌘</kbd><kbd>Enter</kbd> save · <kbd>Esc</kbd> cancel ·
             <kbd>↑</kbd><kbd>↓</kbd><kbd>j</kbd><kbd>k</kbd> files ·
-            <kbd>n</kbd><kbd>p</kbd> comments · <kbd>c</kbd> new comment · <kbd>?</kbd> help
+            <kbd>n</kbd><kbd>p</kbd> comments · <kbd>[</kbd><kbd>]</kbd> commits · <kbd>c</kbd> new comment · <kbd>?</kbd> help
           </span>
           <button class="help-done" onclick="closeHelp()">Got it</button>
         </div>
@@ -180,6 +203,20 @@
     </div>
 
     <aside id="sidebar" class="sidebar hidden">
+      <!-- The commits a review is made of, when it is made of commits. Click
+           one to review it on its own; shift-click a second to review the run
+           between them -- the same gesture a pull request's commit picker
+           uses, so it does not have to be learned twice. -->
+      <section id="commitsSection" class="commits-section hidden" aria-labelledby="commitsTitle">
+        <div class="sidebar-header">
+          <h2 id="commitsTitle">Commits</h2>
+          <span id="commitCount" class="file-count"></span>
+        </div>
+        <p class="commits-hint">Click one · <kbd>Shift</kbd>-click a run · <kbd>[</kbd><kbd>]</kbd> step</p>
+        <ol id="commitsList" class="commits-list" role="listbox" aria-label="Commits" aria-multiselectable="true"></ol>
+        <p id="commitsTruncated" class="commits-truncated hidden"></p>
+      </section>
+
       <div class="sidebar-header">
         <h2>Changed Files</h2>
         <span id="fileCount" class="file-count"></span>

package/public/style.css

@@ -1878,89 +1878,341 @@ button:disabled {
   text-align: center;
 }
 
-/* What the review is of, and how to change it.
+/* ---------------------------------------------------------------------------
+ * What the review is of, and how to change it.
  *
- * Its own row under the status line rather than beside the repository
- * controls: choosing a repository and choosing which of its commits to look
- * at are two different decisions, and crowding them made the header read as
- * one long form. */
+ * Its own block under the status line rather than beside the repository
+ * controls: choosing a repository and choosing which two points of it to look
+ * between are different decisions, and crowding them into one row made the
+ * header read as one long form.
+ * ------------------------------------------------------------------------ */
+
 .scope-bar {
+  margin-top: 8px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  background: #f6f8fa;
+  border: 1px solid #e1e4e8;
+  font-size: 13px;
+  color: #24292e;
+}
+
+.scope-summary {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 8px 16px;
-  margin-top: 8px;
-  padding: 8px 12px;
-  border-radius: 6px;
-  background: #f3f4f6;
-  border-left: 3px solid #6a737d;
-  font-size: 13px;
 }
 
-/* The scope reads as a sentence rather than a field label, because the case
- * that matters most is "9 commits, and no net change" — which has to be
- * legible as an explanation, not as a value. */
-.scope-label {
-  color: #24292e;
+/* The scope reads as a sentence -- "main → feature/auth" -- rather than as a
+ * labelled field, because the names are the information. */
+.scope-text {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 4px 12px;
   min-width: 0;
 }
 
-.scope-compare {
+.scope-label {
+  font-size: 14px;
+  overflow-wrap: anywhere;
+}
+
+.scope-label strong {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: #fff;
+  border: 1px solid #d1d5da;
+}
+
+.scope-meta {
+  color: #586069;
+}
+
+.scope-actions {
   display: flex;
-  align-items: center;
   gap: 8px;
   flex-shrink: 0;
 }
 
-.scope-compare label {
-  color: #6a737d;
-  white-space: nowrap;
+/* Secondary buttons. The :hover rule is not optional: `button:hover` sets the
+ * primary blue and outranks a single class on specificity, so a secondary
+ * button without its own hover rule turns into dark text on dark blue the
+ * moment the pointer reaches it. That shipped once, on "Back to latest". */
+.scope-action,
+.compare-swap {
+  background: #fff;
+  color: #24292e;
+  border: 1px solid #d1d5da;
+  padding: 5px 12px;
+  font-size: 13px;
 }
 
-.scope-compare input {
-  width: 190px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
+.scope-action:hover,
+.compare-swap:hover {
+  background: #f3f4f6;
+  border-color: #b8bec6;
 }
 
-.scope-reset {
-  background: transparent;
+.scope-action:focus-visible,
+.compare-swap:focus-visible,
+.compare-end select:focus-visible,
+.compare-other:focus-visible {
+  outline: 2px solid #0366d6;
+  outline-offset: 1px;
+}
+
+.compare-row {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: 8px 10px;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid #e1e4e8;
+}
+
+.compare-end {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1 1 240px;
+  min-width: 0;
+}
+
+.compare-end label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #586069;
+}
+
+.compare-end select,
+.compare-other {
+  width: 100%;
+  min-width: 0;
+  font-size: 13px;
+  padding: 6px 8px;
   border: 1px solid #d1d5da;
+  border-radius: 6px;
+  background: #fff;
   color: #24292e;
 }
 
+.compare-other {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+}
+
+.compare-swap {
+  flex: 0 0 auto;
+  font-size: 16px;
+  line-height: 1;
+  padding: 7px 10px;
+}
+
+/* Why the file list looks the way it does. Its own line, in the same quiet
+ * voice as the meta text: this is explanation, not a warning. An empty
+ * comparison is a real answer, and it must not be dressed as an error. */
+.scope-note {
+  margin: 10px 0 0;
+  color: #586069;
+  line-height: 1.45;
+}
+
+.files-empty {
+  padding: 16px 12px;
+  color: #586069;
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+/* Narrow screens: the two ends stack, and the swap button sits between them
+ * rather than overflowing the bar -- which the single-row version did, at
+ * 760px, with the Compare button hanging off the right edge. */
 @media (max-width: 720px) {
-  .scope-compare input {
-    width: 120px;
+  .compare-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .compare-end {
+    flex: 1 1 auto;
+  }
+
+  .compare-swap {
+    align-self: center;
+    transform: rotate(90deg);
+  }
+
+  .scope-actions {
+    width: 100%;
   }
 }
 
-/* The picker carries the common case; the text box beside it carries
- * everything else — a branch, a tag, `HEAD~5`, a sha from somewhere else.
- * Both stay visible rather than one hiding behind a mode, because a control
- * you cannot see is a feature people believe is missing. */
-.scope-compare select {
-  max-width: 320px;
-  font-size: 12px;
-  padding: 4px 6px;
+/* A comment on a file that is not in the current comparison. Kept, not
+ * lost -- dimmed so it reads as "elsewhere", with a line saying so, because a
+ * sidebar entry that looks attached but goes nowhere when clicked reads as a
+ * bug. */
+.comment-item-elsewhere {
+  opacity: 0.72;
+}
+
+.comment-item-elsewhere-note {
+  margin-top: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #6a737d;
+}
+
+/* ---------------------------------------------------------------------------
+ * Commits: the ones a review is made of, above the files they touch.
+ * ------------------------------------------------------------------------ */
+
+.commits-section {
+  border-bottom: 1px solid #e1e4e8;
+}
+
+.commits-hint {
+  margin: 0;
+  padding: 0 20px 8px;
+  font-size: 11px;
+  color: #6a737d;
+}
+
+.commits-hint kbd {
+  font-size: 10px;
+  padding: 0 4px;
   border: 1px solid #d1d5da;
+  border-bottom-width: 2px;
+  border-radius: 3px;
+  background: #fafbfc;
+}
+
+/* A bounded height, so a branch of forty commits does not push the files it
+ * touches off the bottom of the sidebar. */
+.commits-list {
+  list-style: none;
+  margin: 0;
+  padding: 0 8px 8px;
+  max-height: 34vh;
+  overflow-y: auto;
+}
+
+.commit-item {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 6px 10px;
+  margin: 2px 0;
   border-radius: 6px;
-  background: #fff;
+  border-left: 3px solid transparent;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.commit-item:hover {
+  background: #f3f4f6;
+}
+
+.commit-item:focus-visible {
+  outline: 2px solid #0366d6;
+  outline-offset: -2px;
+}
+
+.commit-item-selected {
+  background: #f1f8ff;
+  border-left-color: #0366d6;
+}
+
+.commit-sha {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  color: #0366d6;
+  flex-shrink: 0;
+}
+
+.commit-subject {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: #24292e;
 }
 
-.scope-compare select:disabled {
+.commit-when {
+  flex-shrink: 0;
+  font-size: 11px;
   color: #6a737d;
-  background: #f3f4f6;
 }
 
-@media (max-width: 720px) {
-  .scope-compare {
-    flex-wrap: wrap;
-  }
+.commit-merge {
+  flex-shrink: 0;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: #6f42c1;
+}
 
-  .scope-compare select {
-    max-width: 100%;
-  }
+.commits-truncated {
+  margin: 0;
+  padding: 0 20px 8px;
+  font-size: 11px;
+  color: #6a737d;
+}
+
+/* Stepping one commit at a time, from the scope bar. */
+.commit-nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.commit-nav .scope-action {
+  padding: 5px 10px;
+  font-size: 15px;
+  line-height: 1;
+}
+
+.commit-nav .scope-action:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.commit-nav .scope-action:disabled:hover {
+  background: #fff;
+  border-color: #d1d5da;
+}
+
+.commit-position {
+  min-width: 0;
+  font-size: 12px;
+  color: #586069;
+  white-space: nowrap;
+}
+
+.commit-position:empty {
+  display: none;
+}
+
+/* A commit message keeps its own line breaks; it is prose someone wrote in
+ * paragraphs, and reflowing it into one line loses its lists. */
+.scope-note-message {
+  white-space: pre-line;
+  font-size: 13px;
+  color: #24292e;
+  padding-left: 10px;
+  border-left: 3px solid #d1d5da;
+  max-height: 8.5em;
+  overflow-y: auto;
 }