@lvce-editor/static-server 0.80.6 → 0.80.9

package/static/{3af54c5 → ffa9a79}/packages/diff-view/dist/diffViewWorkerMain.js

@@ -64,7 +64,7 @@ const Object$1 = 1;
 const Number$1 = 2;
 const Array$1 = 3;
 const String$1 = 4;
-const Boolean = 5;
+const Boolean$1 = 5;
 const Function = 6;
 const Null = 7;
 const Unknown = 8;
@@ -85,7 +85,7 @@ const getType = value => {
       }
       return Object$1;
     case 'boolean':
-      return Boolean;
+      return Boolean$1;
     default:
       return Unknown;
   }
@@ -1147,11 +1147,12 @@ const SetFocusContext = 'Viewlet.setFocusContext';
 const SetValueByName = 'Viewlet.setValueByName';
 
 const {
-  invoke: invoke$4,
+  invoke: invoke$5,
   set: set$8
 } = create$1(218_933);
 
 const {
+  invoke: invoke$4,
   set: set$7
 } = create$1(ErrorWorker);
 
@@ -1340,19 +1341,25 @@ const terminate = () => {
   globalThis.close();
 };
 
+const defaultAllowedLinkSchemes = ['http', 'https', 'file'];
+
 const createDefaultState = () => ({
+  allowedLinkSchemes: defaultAllowedLinkSchemes,
   assetDir: '',
   contentLeft: '',
   contentRight: '',
   deltaY: 0,
   diffMode: 'side-by-side',
+  errorLeftCodeFrame: '',
   errorLeftMessage: '',
   errorLeftStack: '',
+  errorRightCodeFrame: '',
   errorRightMessage: '',
   errorRightStack: '',
   finalDeltaY: 0,
   focus: 0,
   gitRoot: '',
+  gutterWidthVariable: 9,
   handleOffset: 0,
   headerHeight: 40,
   height: 100,
@@ -1413,11 +1420,12 @@ const {
   set,
   wrapCommand} = create();
 
+const clamp = (value, minimum, maximum) => {
+  return Math.min(Math.max(value, minimum), maximum);
+};
+
 const SASH_WIDTH = 4;
 const DEFAULT_MINIMUM_PANE_WIDTH = 50;
-const clamp$1 = (value, minimum, maximum) => {
-  return Math.max(minimum, Math.min(value, maximum));
-};
 const getAvailableSize = size => {
   return Math.max(size - SASH_WIDTH, 0);
 };
@@ -1440,7 +1448,7 @@ const getClampedLeftWidth = (width, leftWidth) => {
   const availableWidth = getAvailableSize(width);
   const minimumPaneWidth = getMinimumPaneWidth(width);
   const maximumLeftWidth = availableWidth - minimumPaneWidth;
-  return clamp$1(leftWidth, minimumPaneWidth, maximumLeftWidth);
+  return clamp(leftWidth, minimumPaneWidth, maximumLeftWidth);
 };
 const getRightWidth = (width, leftWidth) => {
   return getAvailableSize(width) - leftWidth;
@@ -1458,7 +1466,7 @@ const getClampedPaneSize = (size, leftWidth) => {
   const availableSize = getAvailableSize(size);
   const minimumPaneWidth = Math.min(DEFAULT_MINIMUM_PANE_WIDTH, Math.floor(availableSize / 2));
   const maximumLeftWidth = availableSize - minimumPaneWidth;
-  return clamp$1(leftWidth, minimumPaneWidth, maximumLeftWidth);
+  return clamp(leftWidth, minimumPaneWidth, maximumLeftWidth);
 };
 const getRemainingPaneSize = (size, leftWidth) => {
   return getAvailableSize(size) - leftWidth;
@@ -1488,7 +1496,7 @@ const create2 = (id, uri, x, y, width, height, workspacePath, platform, assetDir
 };
 
 const isEqual$3 = (oldState, newState) => {
-  return oldState.deltaY === newState.deltaY && oldState.diffMode === newState.diffMode && oldState.finalDeltaY === newState.finalDeltaY && oldState.height === newState.height && oldState.itemHeight === newState.itemHeight && oldState.layout === newState.layout && oldState.leftWidth === newState.leftWidth && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY && oldState.rightWidth === newState.rightWidth && oldState.scrollBarHeight === newState.scrollBarHeight && oldState.totalLineCount === newState.totalLineCount;
+  return oldState.deltaY === newState.deltaY && oldState.diffMode === newState.diffMode && oldState.finalDeltaY === newState.finalDeltaY && oldState.gutterWidthVariable === newState.gutterWidthVariable && oldState.height === newState.height && oldState.itemHeight === newState.itemHeight && oldState.layout === newState.layout && oldState.leftWidth === newState.leftWidth && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY && oldState.rightWidth === newState.rightWidth && oldState.scrollBarHeight === newState.scrollBarHeight && oldState.totalLineCount === newState.totalLineCount;
 };
 
 const isEqual$2 = (oldState, newState) => {
@@ -1536,99 +1544,6 @@ const handleContextMenu = (state, button, clientX, clientY) => {
   return state;
 };
 
-const handleSashPointerDown = (state, clientX, clientY) => {
-  const isVertical = state.layout === 'vertical';
-  return {
-    ...state,
-    isResizing: true,
-    resizeOffsetX: isVertical ? 0 : clientX - state.x - state.leftWidth,
-    resizeOffsetY: isVertical ? clientY - state.y - state.leftWidth : 0
-  };
-};
-
-const getSashPointerMoveWidths = (state, clientX, clientY) => {
-  if (state.layout === 'vertical') {
-    const rawTopHeight = clientY - state.y - state.resizeOffsetY;
-    const leftWidth = getClampedPaneSize(state.height, rawTopHeight);
-    const rightWidth = getRemainingPaneSize(state.height, leftWidth);
-    return {
-      leftWidth,
-      rightWidth
-    };
-  }
-  const rawLeftWidth = clientX - state.x - state.resizeOffsetX;
-  const leftWidth = getClampedLeftWidth(state.width, rawLeftWidth);
-  const rightWidth = getRightWidth(state.width, leftWidth);
-  return {
-    leftWidth,
-    rightWidth
-  };
-};
-const handleSashPointerMove = (state, clientX, clientY) => {
-  if (!state.isResizing) {
-    return state;
-  }
-  const {
-    leftWidth,
-    rightWidth
-  } = getSashPointerMoveWidths(state, clientX, clientY);
-  return {
-    ...state,
-    leftWidth,
-    rightWidth
-  };
-};
-
-const handleSashPointerUp = (state, clientX, clientY) => {
-  if (!state.isResizing) {
-    return state;
-  }
-  const {
-    leftWidth,
-    rightWidth
-  } = getSashPointerMoveWidths(state, clientX, clientY);
-  return {
-    ...state,
-    isResizing: false,
-    leftWidth,
-    resizeOffsetX: 0,
-    resizeOffsetY: 0,
-    rightWidth
-  };
-};
-
-const getScrollBarThumbTop = (height, scrollBarHeight, deltaY, finalDeltaY) => {
-  const scrollRange = Math.max(height - scrollBarHeight, 0);
-  if (scrollRange === 0 || finalDeltaY <= 0) {
-    return 0;
-  }
-  return deltaY / finalDeltaY * scrollRange;
-};
-
-const normalizeFloatingPointError = value => {
-  return Number(value.toPrecision(16));
-};
-const handleScrollBarPointerDown = (state, clientY) => {
-  if (!state.scrollBarActive) {
-    return state;
-  }
-  const thumbTop = getScrollBarThumbTop(state.height, state.scrollBarHeight, state.deltaY, state.finalDeltaY);
-  return {
-    ...state,
-    isScrollBarDragging: true,
-    scrollBarDragOffsetY: normalizeFloatingPointError(clientY - state.y - thumbTop)
-  };
-};
-
-const getDeltaYFromScrollBarThumbTop = (height, scrollBarHeight, thumbTop, finalDeltaY) => {
-  const scrollRange = Math.max(height - scrollBarHeight, 0);
-  if (scrollRange === 0 || finalDeltaY <= 0) {
-    return 0;
-  }
-  const clampedThumbTop = Math.min(Math.max(thumbTop, 0), scrollRange);
-  return clampedThumbTop / scrollRange * finalDeltaY;
-};
-
 const getNumberOfVisibleItems = (height, itemHeight) => {
   if (itemHeight <= 0) {
     return 0;
@@ -1646,9 +1561,6 @@ const getScrollBarHeight = (height, contentHeight, minimumSliderSize) => {
   return Math.max(height / contentHeight * height, minimumSliderSize);
 };
 
-const clamp = (value, minimum, maximum) => {
-  return Math.min(Math.max(value, minimum), maximum);
-};
 const getScrollState = (height, itemHeight, totalLineCount, minimumSliderSize, deltaY) => {
   const safeItemHeight = Math.max(itemHeight, 1);
   const safeTotalLineCount = Math.max(totalLineCount, 1);
@@ -1773,38 +1685,168 @@ const getVisibleLines = (content, totalLineCount, inlineChanges, minLineY, maxLi
     }));
   }
   const lines = content ? content.split('\n') : [''];
-  return getVisibleInlineDiffRows(inlineChanges).slice(minLineY, maxLineY).map((visibleRow, index) => {
-    const lineNumber = minLineY + index + 1;
+  return getVisibleInlineDiffRows(inlineChanges).slice(minLineY, maxLineY).map(visibleRow => {
     const inlineChange = side === 'left' ? visibleRow.leftChange : visibleRow.rightChange;
     const type = inlineChange ? getVisibleLineType(inlineChange, side) : VisibleLineType.Normal;
     const lineIndex = inlineChange ? side === 'left' ? inlineChange.leftIndex : inlineChange.rightIndex : -1;
     const tokens = inlineChange && lineIndex >= 0 ? getTokens(tokenizedLines, lineIndex, getLine(lines, lineIndex)) : [];
     return {
-      lineNumber,
+      lineNumber: lineIndex >= 0 ? lineIndex + 1 : -1,
       tokens,
       type
     };
   });
 };
 
-const getVisibleLinesState = state => {
-  const {
-    contentLeft,
-    contentRight,
-    inlineChanges,
-    maxLineY,
-    minLineY,
-    tokenizedLinesLeft,
-    tokenizedLinesRight,
-    totalLineCountLeft,
-    totalLineCountRight
-  } = state;
+const getVisibleLinesState = ({
+  contentLeft,
+  contentRight,
+  inlineChanges,
+  maxLineY,
+  minLineY,
+  tokenizedLinesLeft,
+  tokenizedLinesRight,
+  totalLineCountLeft,
+  totalLineCountRight
+}) => {
   return {
     visibleLinesLeft: getVisibleLines(contentLeft, totalLineCountLeft, inlineChanges, minLineY, maxLineY, 'left', tokenizedLinesLeft),
     visibleLinesRight: getVisibleLines(contentRight, totalLineCountRight, inlineChanges, minLineY, maxLineY, 'right', tokenizedLinesRight)
   };
 };
 
+const getNextPaneSizes$1 = (state, width, height) => {
+  const totalPaneSize = state.leftWidth + state.rightWidth;
+  const ratio = totalPaneSize === 0 ? 0.5 : state.leftWidth / totalPaneSize;
+  const size = state.layout === 'vertical' ? height : width;
+  return getPaneSizes(size, ratio);
+};
+const handleResize = (state, width, height) => {
+  if (state.width === width && state.height === height) {
+    return state;
+  }
+  const {
+    leftWidth,
+    rightWidth
+  } = getNextPaneSizes$1(state, width, height);
+  const scrollState = getScrollState(height, state.itemHeight, state.totalLineCount, state.minimumSliderSize, state.deltaY);
+  const nextState = {
+    ...state,
+    height,
+    leftWidth,
+    rightWidth,
+    width,
+    ...scrollState
+  };
+  return {
+    ...nextState,
+    ...getVisibleLinesState({
+      contentLeft: nextState.contentLeft,
+      contentRight: nextState.contentRight,
+      inlineChanges: nextState.inlineChanges,
+      maxLineY: nextState.maxLineY,
+      minLineY: nextState.minLineY,
+      tokenizedLinesLeft: nextState.tokenizedLinesLeft,
+      tokenizedLinesRight: nextState.tokenizedLinesRight,
+      totalLineCountLeft: nextState.totalLineCountLeft,
+      totalLineCountRight: nextState.totalLineCountRight
+    })
+  };
+};
+
+const handleSashPointerDown = (state, clientX, clientY) => {
+  const isVertical = state.layout === 'vertical';
+  return {
+    ...state,
+    isResizing: true,
+    resizeOffsetX: isVertical ? 0 : clientX - state.x - state.leftWidth,
+    resizeOffsetY: isVertical ? clientY - state.y - state.leftWidth : 0
+  };
+};
+
+const getSashPointerMoveWidths = (state, clientX, clientY) => {
+  if (state.layout === 'vertical') {
+    const rawTopHeight = clientY - state.y - state.resizeOffsetY;
+    const leftWidth = getClampedPaneSize(state.height, rawTopHeight);
+    const rightWidth = getRemainingPaneSize(state.height, leftWidth);
+    return {
+      leftWidth,
+      rightWidth
+    };
+  }
+  const rawLeftWidth = clientX - state.x - state.resizeOffsetX;
+  const leftWidth = getClampedLeftWidth(state.width, rawLeftWidth);
+  const rightWidth = getRightWidth(state.width, leftWidth);
+  return {
+    leftWidth,
+    rightWidth
+  };
+};
+const handleSashPointerMove = (state, clientX, clientY) => {
+  if (!state.isResizing) {
+    return state;
+  }
+  const {
+    leftWidth,
+    rightWidth
+  } = getSashPointerMoveWidths(state, clientX, clientY);
+  return {
+    ...state,
+    leftWidth,
+    rightWidth
+  };
+};
+
+const handleSashPointerUp = (state, clientX, clientY) => {
+  if (!state.isResizing) {
+    return state;
+  }
+  const {
+    leftWidth,
+    rightWidth
+  } = getSashPointerMoveWidths(state, clientX, clientY);
+  return {
+    ...state,
+    isResizing: false,
+    leftWidth,
+    resizeOffsetX: 0,
+    resizeOffsetY: 0,
+    rightWidth
+  };
+};
+
+const getScrollBarThumbTop = (height, scrollBarHeight, deltaY, finalDeltaY) => {
+  const scrollRange = Math.max(height - scrollBarHeight, 0);
+  if (scrollRange === 0 || finalDeltaY <= 0) {
+    return 0;
+  }
+  return deltaY / finalDeltaY * scrollRange;
+};
+
+const normalizeFloatingPointError = value => {
+  return Number(value.toPrecision(16));
+};
+const handleScrollBarPointerDown = (state, clientY) => {
+  if (!state.scrollBarActive) {
+    return state;
+  }
+  const thumbTop = getScrollBarThumbTop(state.height, state.scrollBarHeight, state.deltaY, state.finalDeltaY);
+  return {
+    ...state,
+    isScrollBarDragging: true,
+    scrollBarDragOffsetY: normalizeFloatingPointError(clientY - state.y - thumbTop)
+  };
+};
+
+const getDeltaYFromScrollBarThumbTop = (height, scrollBarHeight, thumbTop, finalDeltaY) => {
+  const scrollRange = Math.max(height - scrollBarHeight, 0);
+  if (scrollRange === 0 || finalDeltaY <= 0) {
+    return 0;
+  }
+  const clampedThumbTop = Math.min(Math.max(thumbTop, 0), scrollRange);
+  return clampedThumbTop / scrollRange * finalDeltaY;
+};
+
 const handleScrollBarPointerMove = (state, clientY) => {
   if (!state.isScrollBarDragging) {
     return state;
@@ -1816,8 +1858,15 @@ const handleScrollBarPointerMove = (state, clientY) => {
     ...state,
     ...scrollState,
     ...getVisibleLinesState({
-      ...state,
-      ...scrollState
+      contentLeft: state.contentLeft,
+      contentRight: state.contentRight,
+      inlineChanges: state.inlineChanges,
+      maxLineY: scrollState.maxLineY,
+      minLineY: scrollState.minLineY,
+      tokenizedLinesLeft: state.tokenizedLinesLeft,
+      tokenizedLinesRight: state.tokenizedLinesRight,
+      totalLineCountLeft: state.totalLineCountLeft,
+      totalLineCountRight: state.totalLineCountRight
     })
   };
 };
@@ -1841,16 +1890,46 @@ const getWheelDeltaY = (deltaMode, deltaY, itemHeight, height) => {
       return deltaY;
   }
 };
-const handleWheel = (state, deltaMode, deltaY) => {
-  const nextDeltaY = state.deltaY + getWheelDeltaY(deltaMode, deltaY, state.itemHeight, state.height);
-  const scrollState = getScrollState(state.height, state.itemHeight, state.totalLineCount, state.minimumSliderSize, nextDeltaY);
+
+const handleWheel = (state, deltaMode, eventDeltaY) => {
+  if (!state.scrollBarActive) {
+    return state;
+  }
+  const {
+    contentLeft,
+    contentRight,
+    deltaY,
+    height,
+    inlineChanges,
+    itemHeight,
+    minimumSliderSize,
+    tokenizedLinesLeft,
+    tokenizedLinesRight,
+    totalLineCount,
+    totalLineCountLeft,
+    totalLineCountRight
+  } = state;
+  const nextDeltaY = deltaY + getWheelDeltaY(deltaMode, eventDeltaY, itemHeight, height);
+  const scrollState = getScrollState(height, itemHeight, totalLineCount, minimumSliderSize, nextDeltaY);
+  const {
+    visibleLinesLeft,
+    visibleLinesRight
+  } = getVisibleLinesState({
+    contentLeft,
+    contentRight,
+    inlineChanges,
+    maxLineY: scrollState.maxLineY,
+    minLineY: scrollState.minLineY,
+    tokenizedLinesLeft,
+    tokenizedLinesRight,
+    totalLineCountLeft,
+    totalLineCountRight
+  });
   return {
     ...state,
     ...scrollState,
-    ...getVisibleLinesState({
-      ...state,
-      ...scrollState
-    })
+    visibleLinesLeft,
+    visibleLinesRight
   };
 };
 
@@ -1907,24 +1986,16 @@ const initializeErrorWorker = async () => {
 };
 
 const createExtensionManagementWorkerRpc = async () => {
-  try {
-    const rpc = await create$4({
-      commandMap: {},
-      send: port => sendMessagePortToExtensionManagementWorker(port, 0)
-    });
-    return rpc;
-  } catch (error) {
-    throw new VError(error, `Failed to create extension management rpc`);
-  }
+  const rpc = await create$3({
+    commandMap: {},
+    send: port => sendMessagePortToExtensionManagementWorker(port, 0)
+  });
+  return rpc;
 };
 
 const initializeExtensionManagementWorker = async () => {
-  try {
-    const rpc = await createExtensionManagementWorkerRpc();
-    set$5(rpc);
-  } catch {
-    // ignore
-  }
+  const rpc = await createExtensionManagementWorkerRpc();
+  set$5(rpc);
 };
 
 const initializeFileSystemWorker = async () => {
@@ -2001,6 +2072,38 @@ const getErrorStack = error => {
   return '';
 };
 
+const getString = value => {
+  return typeof value === 'string' ? value : '';
+};
+const getCodeFrame = preparedError => {
+  return getString(preparedError.codeFrame) || getString(preparedError.codeframe);
+};
+const normalizePreparedError = (error, preparedError) => {
+  const fallbackMessage = getErrorMessage(error);
+  const fallbackStack = getErrorStack(error);
+  if (!preparedError || typeof preparedError !== 'object') {
+    return {
+      codeFrame: '',
+      message: fallbackMessage,
+      stack: fallbackStack
+    };
+  }
+  const errorLike = preparedError;
+  return {
+    codeFrame: getCodeFrame(errorLike),
+    message: getString(errorLike.message) || fallbackMessage,
+    stack: getString(errorLike.stack) || fallbackStack
+  };
+};
+const prepareError = async error => {
+  try {
+    const preparedError = await invoke$4('Errors.prepare', error);
+    return normalizePreparedError(error, preparedError);
+  } catch {
+    return normalizePreparedError(error, undefined);
+  }
+};
+
 const getPath = (protocol, uri) => {
   if (!uri) {
     return '';
@@ -2061,14 +2164,17 @@ const loadFileContent = async uri => {
     const content = await readFile(uri);
     return {
       content,
+      errorCodeFrame: '',
       errorMessage: '',
       errorStack: ''
     };
   } catch (error) {
+    const prettyError = await prepareError(error);
     return {
       content: '',
-      errorMessage: getErrorMessage(error),
-      errorStack: getErrorStack(error)
+      errorCodeFrame: prettyError.codeFrame,
+      errorMessage: prettyError.message,
+      errorStack: prettyError.stack
     };
   }
 };
@@ -2078,15 +2184,23 @@ const loadFileContents = async (uriLeft, uriRight) => {
   return {
     contentLeft: leftResult.content,
     contentRight: rightResult.content,
+    errorLeftCodeFrame: leftResult.errorCodeFrame,
     errorLeftMessage: leftResult.errorMessage,
     errorLeftStack: leftResult.errorStack,
+    errorRightCodeFrame: rightResult.errorCodeFrame,
     errorRightMessage: rightResult.errorMessage,
     errorRightStack: rightResult.errorStack
   };
 };
 
+const lineNumberCharWidth = 9;
+const getGutterWidthVariable = maxLineNumber => {
+  const maxLineNumberCharCount = String(Math.max(maxLineNumber, 1)).length;
+  return maxLineNumberCharCount * lineNumberCharWidth;
+};
+
 const getInlineDiffChanges = (linesLeft, linesRight) => {
-  return invoke$4('Diff.diffInline', linesLeft, linesRight);
+  return invoke$5('Diff.diffInline', linesLeft, linesRight);
 };
 
 const getInlineDiffState = async (contentLeft, contentRight) => {
@@ -2220,17 +2334,17 @@ const getInlineDiffRows = (contentLeft, contentRight) => {
   return rows;
 };
 
-const getDisplayedContent = (content, errorMessage, errorStack) => {
+const getDisplayedContent = (content, errorMessage, errorCodeFrame, errorStack) => {
   if (!errorMessage) {
     return content;
   }
-  return errorStack ? `${errorMessage}\n\n${errorStack}` : errorMessage;
+  return [errorMessage, errorCodeFrame, errorStack].filter(Boolean).join('\n\n');
 };
-const getTotalLineCount = (diffMode, contentLeft, contentRight, errorLeftMessage, errorLeftStack, errorRightMessage, errorRightStack, renderModeLeft, renderModeRight) => {
+const getTotalLineCount = (diffMode, contentLeft, contentRight, errorLeftMessage, errorLeftCodeFrame, errorLeftStack, errorRightMessage, errorRightCodeFrame, errorRightStack, renderModeLeft, renderModeRight) => {
   if (diffMode === 'inline' && renderModeLeft === 'text' && renderModeRight === 'text' && !errorLeftMessage && !errorRightMessage) {
     return getInlineDiffRows(contentLeft, contentRight).length;
   }
-  return Math.max(renderModeLeft === 'image' ? 1 : getLineCount(getDisplayedContent(contentLeft, errorLeftMessage, errorLeftStack)), renderModeRight === 'image' ? 1 : getLineCount(getDisplayedContent(contentRight, errorRightMessage, errorRightStack)));
+  return Math.max(renderModeLeft === 'image' ? 1 : getLineCount(getDisplayedContent(contentLeft, errorLeftMessage, errorLeftCodeFrame, errorLeftStack)), renderModeRight === 'image' ? 1 : getLineCount(getDisplayedContent(contentRight, errorRightMessage, errorRightCodeFrame, errorRightStack)));
 };
 
 const loadImageSrc = async uri => {
@@ -2371,7 +2485,10 @@ const loadSyntaxHighlighting = async (contentLeft, contentRight, uriLeft, uriRig
   }
 };
 
-const reloadContent = async (state, contentLeft, contentRight, errorLeftMessage, errorLeftStack, errorRightMessage, errorRightStack) => {
+const loadImages = async (renderModeLeft, renderModeRight, errorLeftMessage, errorRightMessage, uriLeft, uriRight) => {
+  return Promise.all([renderModeLeft === 'image' && !errorLeftMessage ? loadImageSrc(uriLeft) : Promise.resolve(''), renderModeRight === 'image' && !errorRightMessage ? loadImageSrc(uriRight) : Promise.resolve('')]);
+};
+const reloadContent = async (state, contentLeft, contentRight, errorLeftMessage, errorLeftCodeFrame, errorLeftStack, errorRightMessage, errorRightCodeFrame, errorRightStack) => {
   const {
     assetDir,
     height,
@@ -2385,10 +2502,11 @@ const reloadContent = async (state, contentLeft, contentRight, errorLeftMessage,
   } = state;
   const renderModeLeft = getRenderMode(uriLeft, knownImageExtensions);
   const renderModeRight = getRenderMode(uriRight, knownImageExtensions);
-  const displayedContentLeft = getDisplayedContent(contentLeft, errorLeftMessage, errorLeftStack);
-  const displayedContentRight = getDisplayedContent(contentRight, errorRightMessage, errorRightStack);
+  const displayedContentLeft = getDisplayedContent(contentLeft, errorLeftMessage, errorLeftCodeFrame, errorLeftStack);
+  const displayedContentRight = getDisplayedContent(contentRight, errorRightMessage, errorRightCodeFrame, errorRightStack);
   const totalLineCountLeft = renderModeLeft === 'image' ? 1 : getLineCount(displayedContentLeft);
   const totalLineCountRight = renderModeRight === 'image' ? 1 : getLineCount(displayedContentRight);
+  const gutterWidthVariable = getGutterWidthVariable(Math.max(totalLineCountLeft, totalLineCountRight));
   const canComputeInlineDiff = renderModeLeft === 'text' && renderModeRight === 'text' && !errorLeftMessage && !errorRightMessage;
   const {
     inlineChanges,
@@ -2400,15 +2518,18 @@ const reloadContent = async (state, contentLeft, contentRight, errorLeftMessage,
   const canHighlightLeft = renderModeLeft === 'text' && !errorLeftMessage;
   const canHighlightRight = renderModeRight === 'text' && !errorRightMessage;
   const syntaxHighlightingState = canHighlightLeft || canHighlightRight ? await loadSyntaxHighlighting(contentLeft, contentRight, uriLeft, uriRight, platform, assetDir) : undefined;
-  const [imageSrcLeft, imageSrcRight] = await Promise.all([renderModeLeft === 'image' && !errorLeftMessage ? loadImageSrc(uriLeft) : Promise.resolve(''), renderModeRight === 'image' && !errorRightMessage ? loadImageSrc(uriRight) : Promise.resolve('')]);
+  const [imageSrcLeft, imageSrcRight] = await loadImages(renderModeLeft, renderModeRight, errorLeftMessage, errorRightMessage, uriLeft, uriRight);
   const nextState = {
     ...state,
     contentLeft,
     contentRight,
+    errorLeftCodeFrame,
     errorLeftMessage,
     errorLeftStack,
+    errorRightCodeFrame,
     errorRightMessage,
     errorRightStack,
+    gutterWidthVariable,
     imageSrcLeft,
     imageSrcRight,
     initial: false,
@@ -2424,9 +2545,24 @@ const reloadContent = async (state, contentLeft, contentRight, errorLeftMessage,
     totalLineCountRight,
     ...getScrollState(height, itemHeight, totalLineCount, minimumSliderSize, minLineY * itemHeight)
   };
+  const {
+    visibleLinesLeft,
+    visibleLinesRight
+  } = getVisibleLinesState({
+    contentLeft: nextState.contentLeft,
+    contentRight: nextState.contentRight,
+    inlineChanges: nextState.inlineChanges,
+    maxLineY: nextState.maxLineY,
+    minLineY: nextState.minLineY,
+    tokenizedLinesLeft: nextState.tokenizedLinesLeft,
+    tokenizedLinesRight: nextState.tokenizedLinesRight,
+    totalLineCountLeft: nextState.totalLineCountLeft,
+    totalLineCountRight: nextState.totalLineCountRight
+  });
   return {
     ...nextState,
-    ...getVisibleLinesState(nextState)
+    visibleLinesLeft,
+    visibleLinesRight
   };
 };
 
@@ -2438,8 +2574,10 @@ const loadContent = async (state, savedState) => {
   const {
     contentLeft,
     contentRight,
+    errorLeftCodeFrame,
     errorLeftMessage,
     errorLeftStack,
+    errorRightCodeFrame,
     errorRightMessage,
     errorRightStack
   } = await loadFileContents(uriLeft, uriRight);
@@ -2449,11 +2587,12 @@ const loadContent = async (state, savedState) => {
     minLineY,
     uriLeft,
     uriRight
-  }, contentLeft, contentRight, errorLeftMessage, errorLeftStack, errorRightMessage, errorRightStack);
+  }, contentLeft, contentRight, errorLeftMessage, errorLeftCodeFrame, errorLeftStack, errorRightMessage, errorRightCodeFrame, errorRightStack);
 };
 
 const getCss = () => {
   return `
+.DiffEditorErrorCodeFrame,
 .DiffEditorErrorStack {
   background: rgba(0, 0, 0, 0.22);
   border: 1px solid rgba(255, 255, 255, 0.08);
@@ -2483,37 +2622,110 @@ const getCss = () => {
   `;
 };
 
+const AddedColor = 'rgba(46, 160, 67, 0.72)';
+const DeletedColor = 'rgba(248, 81, 73, 0.72)';
+const formatPercentage = value => {
+  return String(Number(value.toFixed(4)));
+};
+const getScrollBarMarkerType = changeType => {
+  if (changeType === Insertion) {
+    return 'added';
+  }
+  if (changeType === Deletion) {
+    return 'deleted';
+  }
+  return '';
+};
+const getScrollBarMarkerColor = type => {
+  if (type === 'added') {
+    return AddedColor;
+  }
+  return DeletedColor;
+};
+const getScrollBarMarkersForSide = (rows, side, totalLineCount) => {
+  const markers = [];
+  let start = 0;
+  let activeType = '';
+  for (let index = 0; index < rows.length; index++) {
+    const row = rows[index];
+    const change = side === 'left' ? row.leftChange : row.rightChange;
+    const nextType = getScrollBarMarkerType(change?.type);
+    if (nextType === activeType) {
+      continue;
+    }
+    if (activeType) {
+      markers.push({
+        color: getScrollBarMarkerColor(activeType),
+        end: index / totalLineCount * 100,
+        start: start / totalLineCount * 100
+      });
+    }
+    activeType = nextType;
+    start = index;
+  }
+  if (activeType) {
+    markers.push({
+      color: getScrollBarMarkerColor(activeType),
+      end: rows.length / totalLineCount * 100,
+      start: start / totalLineCount * 100
+    });
+  }
+  return markers;
+};
+const getScrollBarMarkerBackgroundImage = ({
+  color,
+  end,
+  start
+}) => {
+  const formattedStart = formatPercentage(start);
+  const formattedEnd = formatPercentage(end);
+  return `linear-gradient(to bottom, transparent ${formattedStart}%, ${color} ${formattedStart}%, ${color} ${formattedEnd}%, transparent ${formattedEnd}%)`;
+};
+const getScrollBarBackgroundImage = (inlineChanges, totalLineCount) => {
+  if (inlineChanges.length === 0 || totalLineCount === 0) {
+    return 'none';
+  }
+  const rows = getVisibleInlineDiffRows(inlineChanges);
+  const markers = [...getScrollBarMarkersForSide(rows, 'left', totalLineCount), ...getScrollBarMarkersForSide(rows, 'right', totalLineCount)];
+  if (markers.length === 0) {
+    return 'none';
+  }
+  return markers.map(getScrollBarMarkerBackgroundImage).join(', ');
+};
+
 const renderCss = (oldState, newState) => {
   const {
     deltaY,
     finalDeltaY,
+    gutterWidthVariable,
     height,
     id,
+    inlineChanges,
     itemHeight,
     leftWidth,
-    maxLineY,
-    minLineY,
     rightWidth,
     scrollBarHeight,
     totalLineCount
   } = newState;
-  const topSpacerHeight = minLineY * itemHeight;
-  const bottomSpacerHeight = Math.max(totalLineCount - maxLineY, 0) * itemHeight;
   const scrollBarThumbTop = getScrollBarThumbTop(height, scrollBarHeight, deltaY, finalDeltaY);
+  const scrollBarBackgroundImage = getScrollBarBackgroundImage(inlineChanges, totalLineCount);
   const {
     layout
   } = newState;
   const staticCss = getCss();
+  const gutterWidth = 'var(--GutterWidth)';
+  const gutterPaddingWidth = 20;
+  const inlineGutterExtraWidth = 9 + gutterPaddingWidth;
   const css = `
 :root {
   --ItemHeight: ${itemHeight}px;
   --LeftWidth: ${leftWidth}px;
   --RightWidth: ${rightWidth}px;
+  --GutterWidth: ${gutterWidthVariable}px;
   --DiffEditorHeight: ${height}px;
   --EditorRowHeight: ${itemHeight}px;
-  --TopSpacerHeight: ${topSpacerHeight}px;
-  --BottomSpacerHeight: ${bottomSpacerHeight}px;
   --ScrollBarHeight: ${scrollBarHeight}px;
+  --ScrollBarBackgroundImage: ${scrollBarBackgroundImage};
   --ScrollBarThumbTop: ${scrollBarThumbTop}px;
 }
 
@@ -2566,6 +2778,11 @@ const renderCss = (oldState, newState) => {
   padding: 0 8px 0 12px;
   text-align: right;
   user-select: none;
+  width: calc(${gutterWidth} + ${gutterPaddingWidth}px);
+}
+
+.InlineDiffEditor .DiffEditorGutter {
+  width: calc(${gutterWidth} * 2 + ${inlineGutterExtraWidth}px);
 }
 
 .DiffEditorLineNumber {
@@ -2575,8 +2792,14 @@ const renderCss = (oldState, newState) => {
   white-space: pre;
 }
 
+.DiffEditorLineNumberEmpty {
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
 .DiffEditorRows {
   contain: strict;
+  cursor: text;
   flex: 1;
   font-family: monospace;
   min-width: 0;
@@ -2651,14 +2874,6 @@ const renderCss = (oldState, newState) => {
   font-weight: 600;
 }
 
-.DiffEditorSpacerTop {
-  height: var(--TopSpacerHeight);
-}
-
-.DiffEditorSpacerBottom {
-  height: var(--BottomSpacerHeight);
-}
-
 .Sash {
   flex-shrink: 0;
 }
@@ -2673,8 +2888,9 @@ const renderCss = (oldState, newState) => {
   height: ${getSashWidth()}px;
 }
 
-.ScrollBar {
-  background: rgba(128, 128, 128, 0.15);
+.DiffScrollBar {
+  background-color: rgba(128, 128, 128, 0.15);
+  background-image: var(--ScrollBarBackgroundImage);
   border-radius: 4px;
   height: 100%;
   position: absolute;
@@ -2683,7 +2899,7 @@ const renderCss = (oldState, newState) => {
   width: 8px;
 }
 
-.ScrollBarThumb {
+.DiffScrollBarThumb {
   background: rgba(128, 128, 128, 0.45);
   border-radius: 4px;
   cursor: pointer;
@@ -2706,6 +2922,10 @@ const renderFocusContext = (oldState, newState) => {
   return [SetFocusContext, id, focus];
 };
 
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+
 const text = data => {
   return {
     childCount: 0,
@@ -3006,14 +3226,14 @@ const DiffEditor = 'DiffEditor';
 const DiffEditorContent = 'DiffEditorContent';
 const DiffEditorContentLeft = 'DiffEditorContentLeft';
 const DiffEditorContentRight = 'DiffEditorContentRight';
+const DiffEditorErrorCodeFrame = 'DiffEditorErrorCodeFrame';
 const DiffEditorError = 'DiffEditorError';
 const DiffEditorErrorMessage = 'DiffEditorErrorMessage';
 const DiffEditorErrorStack = 'DiffEditorErrorStack';
 const DiffEditorErrorStackLink = 'DiffEditorErrorStackLink';
-const DiffEditorSpacerBottom = 'DiffEditorSpacerBottom';
-const DiffEditorSpacerTop = 'DiffEditorSpacerTop';
 const DiffEditorGutter = 'DiffEditorGutter';
 const DiffEditorLineNumber = 'DiffEditorLineNumber';
+const DiffEditorLineNumberEmpty = 'DiffEditorLineNumberEmpty';
 const DiffEditorRows = 'DiffEditorRows';
 const DiffEditorHorizontal = 'DiffEditorHorizontal';
 const DiffEditorVertical = 'DiffEditorVertical';
@@ -3025,8 +3245,8 @@ const InlineDiffEditorContent = 'InlineDiffEditorContent';
 const Sash = 'Sash';
 const SashHorizontal = 'SashHorizontal';
 const SashVertical = 'SashVertical';
-const ScrollBar = 'ScrollBar';
-const ScrollBarThumb = 'ScrollBarThumb';
+const DiffScrollBar = 'DiffScrollBar';
+const DiffScrollBarThumb = 'DiffScrollBarThumb';
 const Viewlet = 'Viewlet';
 
 const HandleClickAt = 1;
@@ -3051,15 +3271,43 @@ const parentNode = {
   type: Div
 };
 const getLineNumberDom = lineNumber => {
-  return [parentNode, text(String(lineNumber))];
+  return [parentNode, text(lineNumber === -1 ? '' : String(lineNumber))];
 };
 
-const getGutterDom = visibleLines => {
+const getEmptyLineNumberDom = (emptyLineCount, itemHeight) => {
+  return {
+    childCount: 0,
+    className: DiffEditorLineNumberEmpty,
+    style: `height: ${emptyLineCount * itemHeight}px;`,
+    type: Div
+  };
+};
+const getGutterDom = (visibleLines, itemHeight) => {
+  const children = [];
+  let childCount = 0;
+  let emptyLineCount = 0;
+  for (const line of visibleLines) {
+    if (line.lineNumber === -1) {
+      emptyLineCount++;
+      continue;
+    }
+    if (emptyLineCount > 0) {
+      children.push(getEmptyLineNumberDom(emptyLineCount, itemHeight));
+      childCount++;
+      emptyLineCount = 0;
+    }
+    children.push(...getLineNumberDom(line.lineNumber));
+    childCount++;
+  }
+  if (emptyLineCount > 0) {
+    children.push(getEmptyLineNumberDom(emptyLineCount, itemHeight));
+    childCount++;
+  }
   return [{
-    childCount: visibleLines.length,
+    childCount,
     className: DiffEditorGutter,
     type: Div
-  }, ...visibleLines.flatMap(line => getLineNumberDom(line.lineNumber))];
+  }, ...children];
 };
 
 const getRowsDom = (rowsChildCount, rows) => {
@@ -3067,18 +3315,10 @@ const getRowsDom = (rowsChildCount, rows) => {
     childCount: rowsChildCount,
     className: DiffEditorRows,
     type: Div
-  }, {
-    childCount: 0,
-    className: DiffEditorSpacerTop,
-    type: Div
-  }, ...rows, {
-    childCount: 0,
-    className: DiffEditorSpacerBottom,
-    type: Div
-  }];
+  }, ...rows];
 };
 
-const getContentDomWithLineNumbers = (contentClassName, visibleLines, rowsChildCount, rows) => {
+const getContentDomWithLineNumbers = (contentClassName, visibleLines, rowsChildCount, rows, itemHeight = 20) => {
   return [{
     childCount: 1,
     className: DiffEditorContent,
@@ -3087,7 +3327,7 @@ const getContentDomWithLineNumbers = (contentClassName, visibleLines, rowsChildC
     childCount: 2,
     className: contentClassName,
     type: Div
-  }, ...getGutterDom(visibleLines), ...getRowsDom(rowsChildCount, rows)];
+  }, ...getGutterDom(visibleLines, itemHeight), ...getRowsDom(rowsChildCount, rows)];
 };
 
 const getContentDomWithoutLineNumbers = (contentClassName, rowsChildCount, rows) => {
@@ -3099,37 +3339,52 @@ const getContentDomWithoutLineNumbers = (contentClassName, rowsChildCount, rows)
     childCount: rowsChildCount,
     className: contentClassName,
     type: Div
-  }, {
-    childCount: 0,
-    className: DiffEditorSpacerTop,
+  }, ...rows];
+};
+
+const getErrorCodeFrameDom = codeFrame => {
+  if (!codeFrame) {
+    return [];
+  }
+  const lines = codeFrame.split('\n');
+  return [{
+    childCount: lines.length,
+    className: DiffEditorErrorCodeFrame,
     type: Div
-  }, ...rows, {
-    childCount: 0,
-    className: DiffEditorSpacerBottom,
+  }, ...lines.flatMap(line => [{
+    childCount: 1,
     type: Div
-  }];
+  }, text(line)])];
 };
 
-const stackLocationRegex = /((?:https?:\/\/|file:\/\/\/?|\/)[^\s)]+):(\d+):(\d+)\)?$/;
-const getStackLineLink = stackLine => {
-  const match = stackLine.match(stackLocationRegex);
-  if (!match) {
-    return '';
-  }
-  const [, location] = match;
-  if (location.startsWith('/')) {
-    return `file://${location}`;
+const getStackLineHref = (location, allowedLinkSchemes) => {
+  const scheme = location.startsWith('/') ? 'file' : location.slice(0, location.indexOf(':'));
+  if (allowedLinkSchemes.includes(scheme)) {
+    return scheme === 'file' ? `file://${location.startsWith('file://') ? location.slice('file://'.length) : location}` : location;
   }
-  return location;
+  return '#';
 };
-const getStackLineLabel = href => {
-  if (!href) {
+
+const getStackLineLabel = location => {
+  if (!location) {
     return '';
   }
-  const pathname = href.startsWith('file://') ? href.slice('file://'.length) : href;
+  const pathname = location.startsWith('file://') ? location.slice('file://'.length) : location;
   const fileName = pathname.slice(pathname.lastIndexOf('/') + 1);
   return `(${fileName})`;
 };
+
+const stackLocationRegex = /((?:[a-zA-Z][a-zA-Z0-9+.-]*:\/\/|\/)[^\s)]+):(\d+):(\d+)\)?$/;
+
+const getStackLineLocation = stackLine => {
+  const match = stackLine.match(stackLocationRegex);
+  if (!match) {
+    return '';
+  }
+  const [, location] = match;
+  return location;
+};
+
 const getStackLinePrefix = stackLine => {
   const match = stackLine.match(stackLocationRegex);
   if (!match) {
@@ -3137,18 +3392,20 @@ const getStackLinePrefix = stackLine => {
   }
   return stackLine.slice(0, stackLine.length - match[0].length).replace(/\($/, '');
 };
-const getErrorStackLineDom = stackLine => {
-  const href = getStackLineLink(stackLine);
-  if (!href) {
+
+const getErrorStackLineDom = (stackLine, allowedLinkSchemes) => {
+  const location = getStackLineLocation(stackLine);
+  if (!location) {
     return [{
       childCount: 1,
       type: Div
     }, text(stackLine)];
   }
   const prefix = getStackLinePrefix(stackLine);
-  const label = getStackLineLabel(href);
+  const href = getStackLineHref(location, allowedLinkSchemes);
+  const label = getStackLineLabel(location);
   return [{
-    childCount: 1,
+    childCount: prefix ? 2 : 1,
     type: Div
   }, ...(prefix ? [text(prefix)] : []), {
     childCount: 1,
@@ -3159,7 +3416,8 @@ const getErrorStackLineDom = stackLine => {
     type: A
   }, text(label)];
 };
-const getErrorStackDom = errorStack => {
+
+const getErrorStackDom = (errorStack, allowedLinkSchemes = defaultAllowedLinkSchemes) => {
   if (!errorStack) {
     return [];
   }
@@ -3168,11 +3426,11 @@ const getErrorStackDom = errorStack => {
     childCount: stackLines.length,
     className: DiffEditorErrorStack,
     type: Div
-  }, ...stackLines.flatMap(getErrorStackLineDom)];
+  }, ...stackLines.flatMap(stackLine => getErrorStackLineDom(stackLine, allowedLinkSchemes))];
 };
 
-const getErrorDom = (contentClassName, errorMessage, errorStack) => {
-  const childCount = errorStack ? 2 : 1;
+const getErrorDom = (contentClassName, errorMessage, errorCodeFrame, errorStack, allowedLinkSchemes = defaultAllowedLinkSchemes) => {
+  const childCount = 1 + Number(Boolean(errorCodeFrame)) + Number(Boolean(errorStack));
   return [{
     childCount: 1,
     className: DiffEditorContent,
@@ -3185,10 +3443,10 @@ const getErrorDom = (contentClassName, errorMessage, errorStack) => {
     childCount: 1,
     className: DiffEditorErrorMessage,
     type: Div
-  }, text(errorMessage), ...getErrorStackDom(errorStack)];
+  }, text(errorMessage), ...getErrorCodeFrameDom(errorCodeFrame), ...getErrorStackDom(errorStack, allowedLinkSchemes)];
 };
 
-const getRowClassName$1 = (type, side) => {
+const getRowClassName = type => {
   if (type === VisibleLineType.Removed) {
     return EditorRowDeletion;
   }
@@ -3209,53 +3467,39 @@ const getTokenDom = token => {
   }, text(token.text)];
 };
 
-const getLineDom = (line, side) => {
+const getLineDom = line => {
   const children = line.tokens.length === 0 ? [text('')] : line.tokens.flatMap(getTokenDom);
   const childCount = line.tokens.length === 0 ? 1 : line.tokens.length;
   return [{
     childCount,
-    className: getRowClassName$1(line.type),
+    className: getRowClassName(line.type),
     type: Div
   }, ...children];
 };
 
-const getVisibleLinesDom = (visibleLines, side) => {
+const getVisibleLinesDom = visibleLines => {
   return visibleLines.flatMap(line => getLineDom(line));
 };
 
-const getContentDom = (contentClassName, content, errorMessage, errorStack, lineNumbers, totalLineCount, minLineY, maxLineY, inlineChanges, side, tokenizedLines = [], visibleLines = []) => {
+const getContentDom = (contentClassName, content, errorMessage, errorCodeFrame, errorStack, allowedLinkSchemes, lineNumbers, totalLineCount, minLineY, maxLineY, inlineChanges, side, tokenizedLines = [], visibleLines = [], itemHeight = 20) => {
   if (errorMessage) {
-    return getErrorDom(contentClassName, errorMessage, errorStack);
+    return getErrorDom(contentClassName, errorMessage, errorCodeFrame, errorStack, allowedLinkSchemes);
   }
   const lines = visibleLines.length > 0 ? visibleLines : getVisibleLines(content, totalLineCount, inlineChanges, minLineY, maxLineY, side, tokenizedLines);
   const rows = getVisibleLinesDom(lines);
-  const rowsChildCount = lines.length + 2;
+  const rowsChildCount = lines.length;
   if (lineNumbers) {
-    return getContentDomWithLineNumbers(contentClassName, lines, rowsChildCount, rows);
+    return getContentDomWithLineNumbers(contentClassName, lines, rowsChildCount, rows, itemHeight);
   }
   return getContentDomWithoutLineNumbers(contentClassName, rowsChildCount, rows);
 };
 
-const getContentLeftDom = (contentLeft, errorMessage = '', errorStack = '', lineNumbers = true, totalLineCount = contentLeft ? contentLeft.split('\n').length : 1, minLineY = 0, maxLineY = totalLineCount, inlineChanges = [], tokenizedLines = [], visibleLines = []) => {
-  return getContentDom(DiffEditorContentLeft, contentLeft, errorMessage, errorStack, lineNumbers, totalLineCount, minLineY, maxLineY, inlineChanges, 'left', tokenizedLines, visibleLines);
-};
-
-const getContentRightDom = (contentRight, errorMessage = '', errorStack = '', lineNumbers = true, totalLineCount = contentRight ? contentRight.split('\n').length : 1, minLineY = 0, maxLineY = totalLineCount, inlineChanges = [], tokenizedLines = [], visibleLines = []) => {
-  return getContentDom(DiffEditorContentRight, contentRight, errorMessage, errorStack, lineNumbers, totalLineCount, minLineY, maxLineY, inlineChanges, 'right', tokenizedLines, visibleLines);
+const getContentLeftDom = (contentLeft, errorMessage = '', errorCodeFrame = '', errorStack = '', allowedLinkSchemes = defaultAllowedLinkSchemes, lineNumbers = true, totalLineCount = contentLeft ? contentLeft.split('\n').length : 1, minLineY = 0, maxLineY = totalLineCount, inlineChanges = [], tokenizedLines = [], visibleLines = [], itemHeight = 20) => {
+  return getContentDom(DiffEditorContentLeft, contentLeft, errorMessage, errorCodeFrame, errorStack, allowedLinkSchemes, lineNumbers, totalLineCount, minLineY, maxLineY, inlineChanges, 'left', tokenizedLines, visibleLines, itemHeight);
 };
 
-const getScrollBarDom = () => {
-  return [{
-    childCount: 1,
-    className: ScrollBar,
-    type: Div
-  }, {
-    childCount: 0,
-    className: ScrollBarThumb,
-    name: 'scrollBarThumb',
-    onPointerDown: HandleScrollBarPointerDown,
-    type: Div
-  }];
+const getContentRightDom = (contentRight, errorMessage = '', errorCodeFrame = '', errorStack = '', allowedLinkSchemes = defaultAllowedLinkSchemes, lineNumbers = true, totalLineCount = contentRight ? contentRight.split('\n').length : 1, minLineY = 0, maxLineY = totalLineCount, inlineChanges = [], tokenizedLines = [], visibleLines = [], itemHeight = 20) => {
+  return getContentDom(DiffEditorContentRight, contentRight, errorMessage, errorCodeFrame, errorStack, allowedLinkSchemes, lineNumbers, totalLineCount, minLineY, maxLineY, inlineChanges, 'right', tokenizedLines, visibleLines, itemHeight);
 };
 
 const getInlineDiffLineNumberText = row => {
@@ -3263,6 +3507,7 @@ const getInlineDiffLineNumberText = row => {
   const right = row.lineNumberRight === null ? '-' : String(row.lineNumberRight);
   return `${left} ${right}`;
 };
+
 const getInlineDiffLineNumberDom = row => {
   return [{
     childCount: 1,
@@ -3270,7 +3515,8 @@ const getInlineDiffLineNumberDom = row => {
     type: Div
   }, text(getInlineDiffLineNumberText(row))];
 };
-const getRowClassName = row => {
+
+const getInlineDiffRowClassName = row => {
   switch (row.type) {
     case InlineDiffRowType.Deletion:
       return EditorRowDeletion;
@@ -3280,7 +3526,8 @@ const getRowClassName = row => {
       return EditorRow;
   }
 };
-const getRowText = row => {
+
+const getInlineDiffRowText = row => {
   switch (row.type) {
     case InlineDiffRowType.Deletion:
       return `- ${row.text}`;
@@ -3290,19 +3537,35 @@ const getRowText = row => {
       return `  ${row.text}`;
   }
 };
+
 const getInlineDiffRowDom = row => {
   return [{
     childCount: 1,
-    className: getRowClassName(row),
+    className: getInlineDiffRowClassName(row),
+    type: Div
+  }, text(getInlineDiffRowText(row))];
+};
+
+const getScrollBarDom = () => {
+  return [{
+    childCount: 1,
+    className: DiffScrollBar,
+    type: Div
+  }, {
+    childCount: 0,
+    className: DiffScrollBarThumb,
+    name: 'scrollBarThumb',
+    onPointerDown: HandleScrollBarPointerDown,
     type: Div
-  }, text(getRowText(row))];
+  }];
 };
+
 const getInlineDiffEditorVirtualDom = (contentLeft, contentRight, lineNumbers, minLineY, maxLineY) => {
   const rows = getInlineDiffRows(contentLeft, contentRight);
   const visibleRows = rows.slice(minLineY, maxLineY);
   const contentChildCount = lineNumbers ? 2 : 1;
   const scrollBarActive = visibleRows.length < rows.length;
-  const rowsChildCount = visibleRows.length + 2;
+  const rowsChildCount = visibleRows.length;
   const lineNumberDom = lineNumbers ? [{
     childCount: visibleRows.length,
     className: DiffEditorGutter,
@@ -3311,7 +3574,7 @@ const getInlineDiffEditorVirtualDom = (contentLeft, contentRight, lineNumbers, m
   const scrollBarDom = scrollBarActive ? getScrollBarDom() : [];
   return [{
     childCount: scrollBarActive ? 2 : 1,
-    className: `${Viewlet} ${DiffEditor} ${InlineDiffEditor}`,
+    className: mergeClassNames(Viewlet, DiffEditor, InlineDiffEditor),
     type: Div
   }, {
     childCount: contentChildCount,
@@ -3321,15 +3584,7 @@ const getInlineDiffEditorVirtualDom = (contentLeft, contentRight, lineNumbers, m
     childCount: rowsChildCount,
     className: DiffEditorRows,
     type: Div
-  }, {
-    childCount: 0,
-    className: DiffEditorSpacerTop,
-    type: Div
-  }, ...visibleRows.flatMap(getInlineDiffRowDom), {
-    childCount: 0,
-    className: DiffEditorSpacerBottom,
-    type: Div
-  }, ...scrollBarDom];
+  }, ...visibleRows.flatMap(getInlineDiffRowDom), ...scrollBarDom];
 };
 
 const getSashDom = sashLayoutClass => ({
@@ -3342,14 +3597,18 @@ const getSashDom = sashLayoutClass => ({
 
 const getDiffEditorVirtualDom = state => {
   const {
+    allowedLinkSchemes,
     contentLeft,
     contentRight,
     diffMode,
+    errorLeftCodeFrame,
     errorLeftMessage,
     errorLeftStack,
+    errorRightCodeFrame,
     errorRightMessage,
     errorRightStack,
     inlineChanges,
+    itemHeight,
     layout,
     lineNumbers,
     maxLineY,
@@ -3371,8 +3630,8 @@ const getDiffEditorVirtualDom = state => {
   const showLineNumbers = lineNumbers && renderModeLeft === 'text' && renderModeRight === 'text';
   const diffEditorLayoutClass = layout === 'vertical' ? DiffEditorVertical : DiffEditorHorizontal;
   const sashLayoutClass = layout === 'vertical' ? SashHorizontal : SashVertical;
-  const leftDom = getContentLeftDom(contentLeft, errorLeftMessage, errorLeftStack, showLineNumbers, totalLineCountLeft, minLineY, maxLineY, inlineChanges, tokenizedLinesLeft, visibleLinesLeft);
-  const rightDom = getContentRightDom(contentRight, errorRightMessage, errorRightStack, showLineNumbers, totalLineCountRight, minLineY, maxLineY, inlineChanges, tokenizedLinesRight, visibleLinesRight);
+  const leftDom = getContentLeftDom(contentLeft, errorLeftMessage, errorLeftCodeFrame, errorLeftStack, allowedLinkSchemes, showLineNumbers, totalLineCountLeft, minLineY, maxLineY, inlineChanges, tokenizedLinesLeft, visibleLinesLeft, itemHeight);
+  const rightDom = getContentRightDom(contentRight, errorRightMessage, errorRightCodeFrame, errorRightStack, allowedLinkSchemes, showLineNumbers, totalLineCountRight, minLineY, maxLineY, inlineChanges, tokenizedLinesRight, visibleLinesRight, itemHeight);
   const scrollBarDom = scrollBarActive ? getScrollBarDom() : [];
   const dom = [{
     childCount: scrollBarActive ? 4 : 3,
@@ -3534,7 +3793,7 @@ const setDiffMode = (state, diffMode) => {
   if (state.diffMode === diffMode) {
     return state;
   }
-  const totalLineCount = getTotalLineCount(diffMode, state.contentLeft, state.contentRight, state.errorLeftMessage, state.errorLeftStack, state.errorRightMessage, state.errorRightStack, state.renderModeLeft, state.renderModeRight);
+  const totalLineCount = getTotalLineCount(diffMode, state.contentLeft, state.contentRight, state.errorLeftMessage, state.errorLeftCodeFrame, state.errorLeftStack, state.errorRightMessage, state.errorRightCodeFrame, state.errorRightStack, state.renderModeLeft, state.renderModeRight);
   const scrollState = getScrollState(state.height, state.itemHeight, totalLineCount, state.minimumSliderSize, state.deltaY);
   const nextState = {
     ...state,
@@ -3544,7 +3803,17 @@ const setDiffMode = (state, diffMode) => {
   };
   return {
     ...nextState,
-    ...getVisibleLinesState(nextState)
+    ...getVisibleLinesState({
+      contentLeft: nextState.contentLeft,
+      contentRight: nextState.contentRight,
+      inlineChanges: nextState.inlineChanges,
+      maxLineY: nextState.maxLineY,
+      minLineY: nextState.minLineY,
+      tokenizedLinesLeft: nextState.tokenizedLinesLeft,
+      tokenizedLinesRight: nextState.tokenizedLinesRight,
+      totalLineCountLeft: nextState.totalLineCountLeft,
+      totalLineCountRight: nextState.totalLineCountRight
+    })
   };
 };
 
@@ -3578,6 +3847,7 @@ const commandMap = {
   'DiffView.diff2': diff2,
   'DiffView.getCommandIds': getCommandIds,
   'DiffView.handleContextMenu': wrapCommand(handleContextMenu),
+  'DiffView.handleResize': wrapCommand(handleResize),
   'DiffView.handleSashPointerDown': wrapCommand(handleSashPointerDown),
   'DiffView.handleSashPointerMove': wrapCommand(handleSashPointerMove),
   'DiffView.handleSashPointerUp': wrapCommand(handleSashPointerUp),