chrome-devtools-frontend/front_end/ui/components/text_editor/theme.ts

Chrome DevTools UI

// Copyright 2021 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';

export const editorTheme = CM.EditorView.theme({
  '&.cm-editor': {
    color: 'color: var(--color-text-primary)',
    cursor: 'auto',
    '&.cm-focused': {
      outline: 'none',
    },
  },

  '.cm-scroller': {
    lineHeight: '1.2em',
    fontFamily: 'var(--source-code-font-family)',
    fontSize: 'var(--source-code-font-size)',
  },

  '.cm-panels': {
    backgroundColor: 'var(--color-background-elevation-1)',
  },

  '.cm-selectionMatch': {
    backgroundColor: 'var(--color-selection-highlight)',
  },

  '.cm-cursor': {
    borderLeft: '1px solid var(--color-background-inverted)',
  },

  '&.cm-readonly .cm-cursor': {
    display: 'none',
  },

  '.cm-cursor-secondary': {
    borderLeft: '1px solid var(--color-secondary-cursor)',
  },

  '.cm-selectionBackground': {
    background: 'var(--color-editor-selection)',
  },

  '&.cm-focused .cm-selectionBackground': {
    background: 'var(--color-editor-selection)',
  },

  '.cm-gutters': {
    borderRight: '1px solid var(--color-details-hairline)',
    whiteSpace: 'nowrap',
    backgroundColor: 'var(--color-background)',
  },

  '.cm-gutters .cm-foldGutterElement': {
    cursor: 'pointer',
    opacity: '0%',
    transition: 'opacity 0.2s',
  },

  '.cm-gutters .cm-foldGutterElement-folded, .cm-gutters:hover .cm-foldGutterElement': {
    opacity: '100%',
  },

  '.cm-lineNumbers': {
    overflow: 'visible',
    minWidth: '40px',
  },
  '.cm-lineNumbers .cm-gutterElement': {
    color: 'var(--color-line-number)',
    padding: '0 3px 0 9px',
  },

  '.cm-foldPlaceholder': {
    background: 'transparent',
    border: 'none',
    color: 'var(--color-text-secondary)',
  },

  '.cm-matchingBracket, .cm-nonmatchingBracket': {
    background: 'transparent',
    borderBottom: 'none',
  },

  '&:focus-within .cm-matchingBracket': {
    color: 'inherit',
    backgroundColor: 'var(--color-matching-bracket-background)',
    borderBottom: '1px solid var(--color-matching-bracket-underline)',
  },

  '&:focus-within .cm-nonmatchingBracket': {
    backgroundColor: 'var(--color-nonmatching-bracket-background)',
    borderBottom: '1px solid var(--color-nonmatching-bracket-underline)',
  },

  '.cm-trailingWhitespace': {
    backgroundColor: 'var(--color-trailing-whitespace)',
  },

  '.cm-highlightedTab': {
    display: 'inline-block',
    position: 'relative',
    '&:before': {
      content: '""',
      borderBottom: '1px solid var(--color-text-secondary)',
      position: 'absolute',
      left: '5%',
      bottom: '50%',
      width: '90%',
      pointerEvents: 'none',
    },
  },

  '.cm-highlightedSpaces:before': {
    color: 'var(--color-text-secondary)',
    content: 'attr(data-display)',
    position: 'absolute',
    pointerEvents: 'none',
  },

  '.cm-placeholder': {
    color: 'var(--color-text-secondary)',
  },

  '.cm-completionHint': {
    color: 'var(--color-text-secondary)',
  },

  '.cm-tooltip': {
    boxShadow: 'var(--drop-shadow)',
    backgroundColor: 'var(--color-background-elevation-1)',
  },

  '.cm-argumentHints': {
    pointerEvents: 'none',
    padding: '0 4px',
    whiteSpace: 'nowrap',
    lineHeight: '20px',
    marginBottom: '4px',
    width: 'fit-content',
  },

  '.cm-tooltip.cm-tooltip-autocomplete > ul': {
    backgroundColor: 'var(--color-background)',
    maxHeight: '25em',
    minWidth: '16em',
    '& > li': {
      display: 'flex',
      justifyContent: 'space-between',
      border: '1px solid var(--color-background)',
    },
    '& > li.cm-secondaryCompletion': {
      display: 'flex',
      backgroundColor: 'var(--color-background-elevation-1)',
      borderColor: 'var(--color-background-elevation-1)',
      justifyContent: 'space-between',
      '&::before': {
        content: '">"',
        fontWeight: 'bold',
        color: 'var(--color-primary-variant)',
        marginRight: '5px',
      },
    },
    '& > li:hover': {
      backgroundColor: 'var(--item-hover-color)',
    },
    '& > li[aria-selected]': {
      backgroundColor: 'var(--color-selected-option-background)',
      borderColor: 'var(--color-selected-option-background)',
      '&, &.cm-secondaryCompletion::before': {
        color: 'var(--color-selected-option)',
      },
      '&::after': {
        content: '"tab"',
        color: 'var(--color-button-primary-text)',
        border: '1px solid var(--color-selected-option-outline)',
        borderRadius: '2px',
        marginLeft: '5px',
        padding: '1px 3px',
        fontSize: '10px',
        lineHeight: '10px',
      },
    },
  },

  '.cm-tooltip.cm-tooltip-autocomplete.cm-conservativeCompletion > ul > li[aria-selected]': {
    backgroundColor: 'var(--color-background)',
    border: '1px dotted var(--color-text-primary)',
    '&, &.cm-secondaryCompletion::before': {
      color: 'var(--color-text-primary)',
    },
    '&::after': {
      border: '1px solid var(--color-button-secondary-border)',
      color: 'var(--color-text-secondary)',
    },
  },

  '.cm-completionMatchedText': {
    textDecoration: 'none',
    fontWeight: 'bold',
  },

  '.cm-highlightedLine': {
    animation: 'cm-fading-highlight 2s 0s',
  },

  '@keyframes cm-fading-highlight': {
    from: {
      backgroundColor: 'var(--color-highlighted-line)',
    },
    to: {
      backgroundColor: 'transparent',
    },
  },
});