Scroll view shows up/down caret overlay indicating content is above or below the fold

Author: Brian Vaughn

packages/react-devtools-scheduling-profiler/src/content-views/constants.js

@@ -73,6 +73,7 @@ export let COLORS = {
   REACT_SUSPENSE_UNRESOLVED_EVENT: '',
   REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: '',
   REACT_WORK_BORDER: '',
+  SCROLL_CARET: '',
   TEXT_COLOR: '',
   TIME_MARKER_LABEL: '',
   WARNING_BACKGROUND: '',
@@ -172,6 +173,7 @@ export function updateColorsToMatchTheme(): void {
     REACT_WORK_BORDER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-work-border',
     ),
+    SCROLL_CARET: computedStyle.getPropertyValue('--color-scroll-caret'),
     TEXT_COLOR: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-text-color',
     ),

packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js

@@ -16,6 +16,7 @@ import type {
 } from './useCanvasInteraction';
 import type {Rect} from './geometry';
 import type {ScrollState} from './utils/scrollState';
+import type {ViewRefs} from './Surface';
 
 import {Surface} from './Surface';
 import {View} from './View';
@@ -26,6 +27,11 @@ import {
   translateState,
 } from './utils/scrollState';
 import {MOVE_WHEEL_DELTA_THRESHOLD} from './constants';
+import {COLORS} from '../content-views/constants';
+
+const CARET_MARGIN = 3;
+const CARET_WIDTH = 5;
+const CARET_HEIGHT = 3;
 
 // TODO VerticalScrollView Draw caret over top+center and/or bottom+center to indicate scrollable content.
 export class VerticalScrollView extends View {
@@ -49,6 +55,54 @@ export class VerticalScrollView extends View {
     return this._contentView.desiredSize();
   }
 
+  draw(context: CanvasRenderingContext2D, viewRefs: ViewRefs) {
+    super.draw(context, viewRefs);
+
+    // Show carets if there's scroll overflow above or below the viewable area.
+    if (this.frame.size.height > CARET_HEIGHT * 2 + CARET_MARGIN * 3) {
+      const offset = this._scrollState.offset;
+      const desiredSize = this._contentView.desiredSize();
+
+      const above = offset;
+      const below = this.frame.size.height - desiredSize.height - offset;
+
+      if (above < 0 || below < 0) {
+        const {visibleArea} = this;
+        const {x, y} = visibleArea.origin;
+        const {width, height} = visibleArea.size;
+        const horizontalCenter = x + width / 2;
+
+        const halfWidth = CARET_WIDTH;
+        const left = horizontalCenter + halfWidth;
+        const right = horizontalCenter - halfWidth;
+
+        if (above < 0) {
+          const topY = y + CARET_MARGIN;
+
+          context.beginPath();
+          context.moveTo(horizontalCenter, topY);
+          context.lineTo(left, topY + CARET_HEIGHT);
+          context.lineTo(right, topY + CARET_HEIGHT);
+          context.closePath();
+          context.fillStyle = COLORS.SCROLL_CARET;
+          context.fill();
+        }
+
+        if (below < 0) {
+          const bottomY = y + height - CARET_MARGIN;
+
+          context.beginPath();
+          context.moveTo(horizontalCenter, bottomY);
+          context.lineTo(left, bottomY - CARET_HEIGHT);
+          context.lineTo(right, bottomY - CARET_HEIGHT);
+          context.closePath();
+          context.fillStyle = COLORS.SCROLL_CARET;
+          context.fill();
+        }
+      }
+    }
+  }
+
   /**
    * Reference to the content view. This view is also the only view in
    * `this.subviews`.

packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js

@@ -559,6 +559,7 @@ export function updateThemeVariables(
     'color-scheduling-profiler-react-work-border',
     documentElements,
   );
+  updateStyleHelper(theme, 'color-scroll-caret', documentElements);
   updateStyleHelper(theme, 'color-shadow', documentElements);
   updateStyleHelper(theme, 'color-tab-selected-border', documentElements);
   updateStyleHelper(theme, 'color-text', documentElements);

packages/react-devtools-shared/src/devtools/views/root.css

@@ -113,6 +113,7 @@
   --light-color-search-match-current: #f7923b;
   --light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.1);
   --light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);
+  --light-color-scroll-caret: #d1d1d1;
   --light-color-shadow: rgba(0, 0, 0, 0.25);
   --light-color-tab-selected-border: #0088fa;
   --light-color-text: #000000;
@@ -239,6 +240,7 @@
   --dark-color-search-match-current: #f7923b;
   --dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);
   --dark-color-selected-tree-highlight-inactive: rgba(255, 255, 255, 0.05);
+  --dark-color-scroll-caret: #4f5766;
   --dark-color-shadow: rgba(0, 0, 0, 0.5);
   --dark-color-tab-selected-border: #178fb9;
   --dark-color-text: #ffffff;