Hunk Separators: add hidden expand all button (#496)

* Hunk Separators: add expand all button that's hidden by default for custom css

* Add hover decoration to line click

Author: amadeus

packages/diffs/src/managers/InteractionManager.ts

@@ -26,6 +26,7 @@ interface TokenCache {
 interface ExpandCache {
   hunkIndex: number | undefined;
   direction: ExpansionDirections;
+  all: boolean;
 }
 
 export type LogTypes = 'click' | 'move' | 'both' | 'none';
@@ -77,6 +78,7 @@ interface ExpandoEventProps {
   type: 'line-info';
   hunkIndex: number;
   direction: ExpansionDirections;
+  all: boolean;
 }
 
 export type GetHoveredLineResult<TMode extends InteractionManagerMode> =
@@ -517,8 +519,8 @@ export class InteractionManager<TMode extends InteractionManagerMode> {
         if (isExpandoPointerTarget(target) && onHunkExpand != null) {
           onHunkExpand(
             target.hunkIndex,
-            event.shiftKey ? 'both' : target.direction,
-            event.shiftKey ? Number.POSITIVE_INFINITY : undefined
+            target.all || event.shiftKey ? 'both' : target.direction,
+            target.all || event.shiftKey ? Number.POSITIVE_INFINITY : undefined
           );
           break;
         }
@@ -1458,7 +1460,11 @@ export class InteractionManager<TMode extends InteractionManagerMode> {
         continue;
       }
 
-      if (expandInfo == null && element.hasAttribute('data-expand-button')) {
+      if (
+        expandInfo == null &&
+        (element.hasAttribute('data-expand-button') ||
+          element.hasAttribute('data-unmodified-lines'))
+      ) {
         expandInfo = {
           hunkIndex: undefined,
           direction: (() => {
@@ -1470,6 +1476,7 @@ export class InteractionManager<TMode extends InteractionManagerMode> {
             }
             return 'both';
           })(),
+          all: element.hasAttribute('data-expand-all-button'),
         };
         continue;
       }
@@ -1501,6 +1508,7 @@ export class InteractionManager<TMode extends InteractionManagerMode> {
         type: 'line-info',
         hunkIndex: expandInfo.hunkIndex,
         direction: expandInfo.direction,
+        all: expandInfo.all,
       } as ResolvedPointerTarget<TMode>;
     }
 

packages/diffs/src/style.css

@@ -753,6 +753,11 @@
     background-color: var(--diffs-bg-separator);
   }
 
+  [data-expand-index] [data-separator-content]:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
   [data-expand-button] {
     justify-content: center;
     flex-shrink: 0;
@@ -765,6 +770,10 @@
     &:hover {
       color: var(--diffs-fg);
     }
+
+    &[data-expand-all-button] {
+      display: none;
+    }
   }
 
   [data-expand-down] [data-icon] {

packages/diffs/src/utils/createSeparator.ts

@@ -44,6 +44,7 @@ export function createSeparator({
   isFirstHunk,
   isLastHunk,
 }: CreateSeparatorProps): HASTElement {
+  let buttonCount = 0;
   const children = [];
   if (type === 'metadata' && content != null) {
     children.push(
@@ -63,12 +64,15 @@ export function createSeparator({
             !isFirstHunk && !isLastHunk ? 'both' : isFirstHunk ? 'down' : 'up'
           )
         );
+        buttonCount++;
       } else {
         if (!isFirstHunk) {
           contentChildren.push(createExpandButton('up'));
+          buttonCount++;
         }
         if (!isLastHunk) {
           contentChildren.push(createExpandButton('down'));
+          buttonCount++;
         }
       }
     }
@@ -85,14 +89,25 @@ export function createSeparator({
         properties: { 'data-separator-content': '' },
       })
     );
+    if (chunked && expandIndex != null) {
+      contentChildren.push(
+        createHastElement({
+          tagName: 'span',
+          children: [createTextNodeElement('Expand All')],
+          properties: {
+            'data-expand-button': '',
+            'data-expand-all-button': '',
+          },
+        })
+      );
+    }
     children.push(
       createHastElement({
         tagName: 'div',
         children: contentChildren,
         properties: {
           'data-separator-wrapper': '',
-          'data-separator-multi-button':
-            contentChildren.length > 2 ? '' : undefined,
+          'data-separator-multi-button': buttonCount > 1 ? '' : undefined,
         },
       })
     );