content/static: directory tree fixes

- Reduces padding inside of directories rows.
- Directories expand when entering text search.

Change-Id: Idba574f0b6ca71d6bb940553f2a3e727b07218ef
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/290070
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>
Reviewed-by: Julie Qiu <julie@golang.org>

content/static/css/unit_directories.css

@@ -37,7 +37,7 @@
   border-bottom: 0.0625rem solid var(--gray-8);
   max-width: 32rem;
   min-width: 12rem;
-  padding: 0.5rem 1rem;
+  padding: 0.25rem 1rem;
   word-break: break-word;
 }
 .UnitDirectories th {

content/static/js/table.js

@@ -25,12 +25,15 @@ export class ExpandableRowsTableController {
     this.toggles.forEach(t => {
       t.addEventListener('click', e => {
         this.handleToggleClick(e);
-        this.updateVisibleItems();
       });
     });
     this.expandAll?.addEventListener('click', () => {
-      this.handleExpandAllClick();
-      this.updateVisibleItems();
+      this.expandAllItems();
+    });
+    document.addEventListener('keydown', e => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+        this.expandAllItems();
+      }
     });
   }
   handleToggleClick(e) {
@@ -43,11 +46,13 @@ export class ExpandableRowsTableController {
     const isExpanded = target?.getAttribute('aria-expanded') === 'true';
     target?.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
     e.stopPropagation();
+    this.updateVisibleItems();
   }
-  handleExpandAllClick() {
+  expandAllItems() {
     this.table
       .querySelectorAll('[aria-expanded=false]')
       .forEach(t => t.setAttribute('aria-expanded', 'true'));
+    this.updateVisibleItems();
   }
   updateVisibleItems() {
     this.toggles.forEach(t => {

content/static/js/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["table.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["table.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAeH,MAAM,OAAO,6BAA6B;IASxC,YAAY,KAAuB,EAAE,SAA6B;QAChE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,gBAAgB,CAAsB,sBAAsB,CAAC,CAAC;QACnF,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAMO,aAAa;QACnB,KAAK,MAAM,CAAC,IAAI,CAAC,oBAAoB,EAAE,sBAAsB,EAAE,SAAS,CAAC,EAAE;YACzE,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;gBAChD,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;gBAChE,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;YACvB,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YACvB,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;gBAC9B,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;YAC5B,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,EAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YAC7C,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE;YACvC,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;gBAC7C,IAAI,CAAC,cAAc,EAAE,CAAC;aACvB;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,iBAAiB,CAAC,CAAa;QACrC,IAAI,MAAM,GAAG,CAAC,CAAC,aAA2C,CAAC;QAC3D,IAAI,CAAC,MAAM,EAAE,YAAY,CAAC,eAAe,CAAC,EAAE;YAC1C,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAC/B,yBAAyB,MAAM,EAAE,YAAY,CAAC,eAAe,CAAC,IAAI,CACnE,CAAC;SACH;QACD,MAAM,UAAU,GAAG,MAAM,EAAE,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,CAAC;QACpE,MAAM,EAAE,YAAY,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QACrE,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,KAAK;aACP,gBAAgB,CAAC,uBAAuB,CAAC;aACzC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;QACzD,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YACvB,MAAM,UAAU,GAAG,CAAC,EAAE,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,CAAC;YAC/D,MAAM,MAAM,GAAG,CAAC,EAAE,YAAY,CAAC,eAAe,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YACtE,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,EAAE;gBACnB,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;gBAChD,IAAI,UAAU,EAAE;oBACd,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;oBACjC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;iBACpC;qBAAM;oBACL,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;oBAChC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;iBACrC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;CACF"}

content/static/js/table.test.ts

@@ -87,4 +87,10 @@ describe('ExpandableRowsTableController', () => {
     expect(document.querySelector('#hidden-row-id-1').classList).toContain('visible');
     expect(document.querySelector('#hidden-row-id-2').classList).toContain('visible');
   });
+
+  it('expands rows when entering text search', () => {
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'f', ctrlKey: true }));
+    expect(document.querySelector('#hidden-row-id-1').classList).toContain('visible');
+    expect(document.querySelector('#hidden-row-id-2').classList).toContain('visible');
+  });
 });

content/static/js/table.ts

@@ -53,12 +53,16 @@ export class ExpandableRowsTableController {
     this.toggles.forEach(t => {
       t.addEventListener('click', e => {
         this.handleToggleClick(e);
-        this.updateVisibleItems();
       });
     });
     this.expandAll?.addEventListener('click', () => {
-      this.handleExpandAllClick();
-      this.updateVisibleItems();
+      this.expandAllItems();
+    });
+
+    document.addEventListener('keydown', e => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+        this.expandAllItems();
+      }
     });
   }
 
@@ -72,12 +76,14 @@ export class ExpandableRowsTableController {
     const isExpanded = target?.getAttribute('aria-expanded') === 'true';
     target?.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
     e.stopPropagation();
+    this.updateVisibleItems();
   }
 
-  private handleExpandAllClick() {
+  private expandAllItems() {
     this.table
       .querySelectorAll('[aria-expanded=false]')
       .forEach(t => t.setAttribute('aria-expanded', 'true'));
+    this.updateVisibleItems();
   }
 
   private updateVisibleItems() {