Bug 1511275 - Unify line numbers and source code listings in DOM. r=kats

.gitignore

@@ -11,8 +11,7 @@ clang-plugin/analysis
 /js
 tools/target
 paths
-config.json
 env
 repos
-index
+/index
 addons

docs/a11y.md

@@ -0,0 +1,47 @@
+# Accessibility
+
+This document is very much still under construction.
+
+## Testing
+
+### Software
+
+Use NVDA from https://www.nvaccess.org/.  The current choice is made based on
+internal usage in Mozilla as well as use in the world at large.
+
+Relevant docs:
+- https://marcozehe.wordpress.com/articles/how-to-use-nvda-and-firefox-to-test-your-web-pages-for-accessibility/
+- https://webaim.org/articles/nvda/
+
+### Smoke Test Steps
+
+- Bring up a source listing page.
+- Press NVDA + space to enter virtual buffer mode.
+- Press 't' to select the table.
+- Use ctrl + alt + (arrow keys) to move around the table.  Confirm that the
+  table layout matches the design below, with column 1 being blame, column 2
+  being line numbers, and column 3 being the contents of the source lines.
+- In the first column where there is blame data, press the 'enter' key to toggle
+  the blame pop-up open.
+- Press the down arrow to read the first line of the blame pop-up.  Successive
+  down arrow presses should read the rest of the blame lines.
+
+## Design
+
+### Source Listing
+
+The source lists are exposed as a 3-column table using ARIA roles.
+1. Blame button, toggling it toggles display of the blame popup.
+2. Line number.
+3. Source code for the given line.
+
+Here's an example of a 1-row source listing:
+```html
+<div id="file" class="file" role="table">
+  <div role="row" class="source-line-with-number">
+    <div role="cell"><div class="blame-strip c1" data-blame="a015fb538abbbdcbfe404c320a8fefdc07a6a54e#%#1" role="button" aria-label="blame" aria-expanded="false"></div></div>
+    <div id="l1" role="cell" class="line-number" data-line-number="1"></div>
+    <code role="cell" class="source-line" id="line-1"><span class="syn_comment" >/* -*- Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */</span>
+  </code>
+</div>
+```

static/css/mozsearch.css

@@ -7,6 +7,33 @@
     font-style: normal;
 }
 
+:root {
+  /* ### Highlighting ### */
+  /* Selected source line background color.  This is used when clicking on a
+     line-number (optionally holding ctrl or shift) to select it/a range. */
+  --highlighted-bgcolor: rgb(255, 255, 204);
+
+  /* ### Sticky Headers ### */
+  /* The background color applied to code lines that start a block and stick
+     around until the block is closed. (They have the "stuck" class applied.) */
+  --sticky-header-bgcolor: #ddf;
+  /* The color of the faux border line at the bottom of the last stuck line.
+     In order to avoid reflows, the line isn't actually a "border", but rather
+     a line faked via linear gradient. */
+  --sticky-header-bottom-border-color: blue;
+  /* The gradient transition points.  For a solid line with a hard break,set
+     both values the same, for some kind of smoother gradient, spread them out.
+     (And maybe rewrite the gradients :) */
+  --sticky-header-bottom-border-off1: 90%;
+  --sticky-header-bottom-border-off2: 90%;
+
+  /* ### Blame ### */
+  /* Static blame zebra stripe colors. This may change in the future to be
+     zebra-striping with logarithmic age coloring. */
+  --blame-c1: lightgray;
+  --blame-c2: darkgray;
+}
+
 /**
  * normalize - Remove the gray background color from active links in IE 10.
  */
@@ -119,37 +146,60 @@ td.code {
 td#line-numbers {
     padding: 0;
 }
+
+.source-line-with-number {
+  padding: 0rem 1rem;
+  line-height: 1.3;
+  display: flex;
+}
+
+/* In order to display the line numbers and have them visible to screen readers
+   but not appear in any copy-and-pasted selection, we create a before
+   pseudo-element with generated content. */
+.line-number::before {
+    content: attr(data-line-number);
+}
 .line-number {
-    display: block;
+    display: inline-block;
     cursor: pointer;
-    -moz-user-select: none;
-    -o-user-select: none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     text-align: right;
     padding: 0 0.5rem;
-    position: relative;
+    /* this was originally set on the ".file td:first-child" */
+    color: #aaa;
+    width: 8ex;
 }
 .highlighted,
 .multihighlight {
     background: none repeat scroll 0 0 rgb(255, 255, 204) !important;
 }
-td.code {
-    display: block;
+.source-line {
     margin: 0;
     padding: 0;
-    position: relative;
-    z-index: 1;
+    display: inline-block;
+    white-space: pre;
+    flex-grow: 1;
 }
-td pre code {
-    padding: 0 0 0 1em;
-    margin: 0;
-    padding: 0;
-    display: block;
+.source-line-with-number.stuck {
+  background: var(--sticky-header-bgcolor);
+}
+/* As documented on the variables, we use linear gradients to create an apparent
+   bottom border line for the last stuck element.  We do this instead of using
+   `border-bottom: 1px solid blue` because adding a border impacts layout and
+   would cause a reflow.  Whereas the background does not and a cross-fade can
+   be animated if the immediate background-change is too abrupt.
+
+   Note that we also create gradient variants for highlighted lines (because
+   the highlighted line can end up "stuck") and for blame display colors. */
+.source-line-with-number.last-stuck {
+	background: linear-gradient(var(--sticky-header-bgcolor), var(--sticky-header-bgcolor) var(--sticky-header-bottom-border-off1), var(--sticky-header-bottom-border-color) var(--sticky-header-bottom-border-off2), var(--sticky-header-bottom-border-color));
 }
-code a {
+.last-stuck .highlighted,
+.last-stuck .multihighlight {
+	background: linear-gradient(var(--highlighted-bgcolor), var(--highlighted-bgcolor) var(--sticky-header-bottom-border-off1), var(--sticky-header-bottom-border-color) var(--sticky-header-bottom-border-off2), var(--sticky-header-bottom-border-color)) !important;
+}
+
+.source-line a {
     cursor: pointer;
 }
 .code code {
@@ -205,18 +255,10 @@ body {
 
 /**
  * Nesting!
- *
- * Because the search bar thing is position: fixed we need to add an offset to
- * all of our position:sticky "top" directives.  This needs to be the height of
- * the search box.  CSS variables provide us a way to adjust this based on other
- * factors.  Currently the main influencing factor is whether there is a
- * "Showing REVHASH: Commit message" line or if it's empty.  The presence of the
- * line matches up with the "old-rev" class being set on the body, so we use
- * this to decide which hard-coded value to use below.  JS could also update
- * the variable, but we currently don't need to do that.
  */
 
 .nesting-container {
+  display: block;
   position: relative;
 }
 .nesting-depth-1,
@@ -230,47 +272,50 @@ body {
 .nesting-depth-9,
 .nesting-depth-10 {
   position: sticky;
-  background-color: #f8f8f8;
+  /* even with our "stuck" and "last-stuck" classes, it's important to have an
+     opaque background color for these because those classes don't take effect
+     immediately. */
+  background-color: white;
 }
 .nesting-depth-1 {
   top: calc(0 * 12px * 1.3);
-  z-index: 900;
+  z-index: 100;
 }
 .nesting-depth-2 {
   top: calc(1 * 12px * 1.3);
-  z-index: 899;
+  z-index: 99;
 }
 .nesting-depth-3 {
   top: calc(2 * 12px * 1.3);
-  z-index: 898;
+  z-index: 98;
 }
 .nesting-depth-4 {
   top: calc(3 * 12px * 1.3);
-  z-index: 897;
+  z-index: 97;
 }
 .nesting-depth-5 {
   top: calc(4 * 12px * 1.3);
-  z-index: 896;
+  z-index: 96;
 }
 .nesting-depth-6 {
   top: calc(5 * 12px * 1.3);
-  z-index: 895;
+  z-index: 95;
 }
 .nesting-depth-7 {
   top: calc(6 * 12px * 1.3);
-  z-index: 894;
+  z-index: 94;
 }
 .nesting-depth-8 {
   top: calc(7 * 12px * 1.3);
-  z-index: 893;
+  z-index: 93;
 }
 .nesting-depth-9 {
   top: calc(8 * 12px * 1.3);
-  z-index: 892;
+  z-index: 92;
 }
 .nesting-depth-10 {
   top: calc(9 * 12px * 1.3);
-  z-index: 891;
+  z-index: 91;
 }
 
 /* Search results */
@@ -373,7 +418,7 @@ body {
     border-top-left-radius: 0;
     width: auto;
     list-style: none;
-    z-index: 2;
+    z-index: 102;
 }
 .context-menu a {
     display: block;
@@ -390,6 +435,9 @@ body {
 .content {
     padding: 1rem 2rem;
 }
+.content.source-listing {
+    padding: 0.5rem 0rem;
+}
 
 /* Breadcrumbs */
 .path-separator {
@@ -398,7 +446,7 @@ body {
 .breadcrumbs {
     display: inline-block;
     margin: 0;
-    padding: .5rem 0 1rem 0;
+    padding: 1rem;
     text-align: left;
 }
 
@@ -440,7 +488,7 @@ body {
     overflow-y: auto;
     overflow-x: hidden;
     max-height: calc(100% - 150px);
-    z-index: 2;
+    z-index: 102;
 }
 .panel button{
     display: inline-block;
@@ -533,33 +581,48 @@ span[data-symbols].hovered {
     position: absolute;
 }
 
-/* Blame */
+/* ## Blame ## */
+/* the role=cell that holds the role=button `.blame-strip`.  We created a class
+   for this so we could make it `position: relative` so it could create a new
+   containing block for the `.blame-popup` which cannot live beneath the
+   role=button `.blame-strip`. */
+.blame-container {
+  position: relative;
+}
 .blame-strip {
-    top: 0px;
+    display: block;
     width: 20px;
-    left: -20px;
     height: 16px;
-    position: absolute;
+    padding: 0;
+    margin: 0;
 }
+/* blame zebra stripes: we alternate colors whenever the revision a line is from
+   changes between lines. */
 .c1 {
-    background: lightgray;
+    background: var(--blame-c1);
 }
 .c2 {
-    background: darkgray;
+    background: var(--blame-c2);
+}
+.last-stuck div .c1 {
+  	background: linear-gradient(var(--blame-c1), var(--blame-c1) var(--sticky-header-bottom-border-off1), var(--sticky-header-bottom-border-color) var(--sticky-header-bottom-border-off2), var(--sticky-header-bottom-border-color));
+}
+.last-stuck div .c2 {
+  	background: linear-gradient(var(--blame-c2), var(--blame-c2) var(--sticky-header-bottom-border-off1), var(--sticky-header-bottom-border-color) var(--sticky-header-bottom-border-off2), var(--sticky-header-bottom-border-color));
 }
 .blame-popup {
     display: inline !important;
     position: absolute;
     top: 0;
-    left: 0;
+    left: 20px;
     width: 600px;
     padding: 10px;
     background: #404040;
     box-shadow: 3px 3px 3px grey;
     border-radius: 3px;
     color: white;
     text-align: left;
-    z-index: 100;
+    z-index: 200;
     cursor: auto;
     -moz-user-select: text;
     -o-user-select: text;