chrome-devtools-frontend 1.0.940255 → 1.0.942095

package/front_end/third_party/codemirror.next/package.json

@@ -3,21 +3,21 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@codemirror/autocomplete": "0.19.3",
+    "@codemirror/autocomplete": "0.19.5",
     "@codemirror/closebrackets": "0.19.0",
-    "@codemirror/commands": "0.19.4",
+    "@codemirror/commands": "0.19.5",
     "@codemirror/comment": "0.19.0",
-    "@codemirror/fold": "0.19.0",
-    "@codemirror/gutter": "0.19.2",
+    "@codemirror/fold": "0.19.1",
+    "@codemirror/gutter": "0.19.3",
     "@codemirror/highlight": "0.19.6",
     "@codemirror/history": "0.19.0",
     "@codemirror/lang-cpp": "0.19.1",
     "@codemirror/lang-css": "0.19.3",
     "@codemirror/lang-html": "0.19.3",
     "@codemirror/lang-java": "0.19.1",
-    "@codemirror/lang-javascript": "0.19.2",
+    "@codemirror/lang-javascript": "0.19.3",
     "@codemirror/lang-json": "0.19.1",
-    "@codemirror/lang-markdown": "0.19.1",
+    "@codemirror/lang-markdown": "0.19.2",
     "@codemirror/lang-php": "0.19.1",
     "@codemirror/lang-python": "0.19.2",
     "@codemirror/lang-wast": "0.19.0",
@@ -25,13 +25,15 @@
     "@codemirror/language": "0.19.3",
     "@codemirror/legacy-modes": "0.19.0",
     "@codemirror/matchbrackets": "0.19.3",
+    "@codemirror/panel": "0.19.0",
+    "@codemirror/rangeset": "0.19.2",
     "@codemirror/search": "0.19.2",
-    "@codemirror/state": "0.19.2",
+    "@codemirror/state": "0.19.5",
     "@codemirror/stream-parser": "0.19.2",
-    "@codemirror/text": "0.19.4",
-    "@codemirror/tooltip": "0.19.4",
-    "@codemirror/view": "0.19.9",
-    "@lezer/common": "0.15.7",
+    "@codemirror/text": "0.19.5",
+    "@codemirror/tooltip": "0.19.6",
+    "@codemirror/view": "0.19.16",
+    "@lezer/common": "0.15.8",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "rollup-plugin-dts": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",

package/front_end/ui/components/code_highlighter/CodeHighlighter.ts

@@ -2,56 +2,50 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
-
-let highlightStyle: CodeMirror.HighlightStyle|null = null;
-
-function importCM(): Promise<typeof CodeMirror> {
-  return import('../../../third_party/codemirror.next/codemirror.next.js');
-}
-
-export function getHighlightStyle(modCM: typeof CodeMirror): CodeMirror.HighlightStyle {
-  if (!highlightStyle) {
-    const t = modCM.tags;
-    highlightStyle = modCM.HighlightStyle.define([
-      {tag: t.variableName, class: 'token-variable'},
-      {tag: t.propertyName, class: 'token-property'},
-      {tag: [t.typeName, t.className, t.namespace, t.macroName], class: 'token-type'},
-      {tag: [t.special(t.name), t.constant(t.className)], class: 'token-variable-special'},
-      {tag: t.definition(t.name), class: 'token-definition'},
-      {tag: t.standard(t.variableName), class: 'token-builtin'},
-
-      {tag: [t.number, t.literal, t.unit], class: 'token-number'},
-      {tag: t.string, class: 'token-string'},
-      {tag: [t.special(t.string), t.regexp, t.escape], class: 'token-string-special'},
-      {tag: [t.atom, t.labelName, t.bool], class: 'token-atom'},
-
-      {tag: t.keyword, class: 'token-keyword'},
-      {tag: [t.comment, t.quote], class: 'token-comment'},
-      {tag: t.meta, class: 'token-meta'},
-      {tag: t.invalid, class: 'token-invalid'},
-
-      {tag: t.tagName, class: 'token-tag'},
-      {tag: t.attributeName, class: 'token-attribute'},
-      {tag: t.attributeValue, class: 'token-attribute-value'},
-
-      {tag: t.inserted, class: 'token-inserted'},
-      {tag: t.deleted, class: 'token-deleted'},
-      {tag: t.heading, class: 'token-heading'},
-      {tag: t.link, class: 'token-link'},
-      {tag: t.strikethrough, class: 'token-strikethrough'},
-      {tag: t.strong, class: 'token-strong'},
-      {tag: t.emphasis, class: 'token-emphasis'},
-    ]);
-  }
-  return highlightStyle;
-}
+import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
+
+const t = CodeMirror.tags;
+
+export const highlightStyle: CodeMirror.HighlightStyle = CodeMirror.HighlightStyle.define([
+  {tag: t.variableName, class: 'token-variable'},
+  {tag: t.propertyName, class: 'token-property'},
+  {tag: [t.typeName, t.className, t.namespace, t.macroName], class: 'token-type'},
+  {tag: [t.special(t.name), t.constant(t.className)], class: 'token-variable-special'},
+  {tag: t.definition(t.name), class: 'token-definition'},
+  {tag: t.standard(t.variableName), class: 'token-builtin'},
+
+  {tag: [t.number, t.literal, t.unit], class: 'token-number'},
+  {tag: t.string, class: 'token-string'},
+  {tag: [t.special(t.string), t.regexp, t.escape], class: 'token-string-special'},
+  {tag: [t.atom, t.labelName, t.bool], class: 'token-atom'},
+
+  {tag: t.keyword, class: 'token-keyword'},
+  {tag: [t.comment, t.quote], class: 'token-comment'},
+  {tag: t.meta, class: 'token-meta'},
+  {tag: t.invalid, class: 'token-invalid'},
+
+  {tag: t.tagName, class: 'token-tag'},
+  {tag: t.attributeName, class: 'token-attribute'},
+  {tag: t.attributeValue, class: 'token-attribute-value'},
+
+  {tag: t.inserted, class: 'token-inserted'},
+  {tag: t.deleted, class: 'token-deleted'},
+  {tag: t.heading, class: 'token-heading'},
+  {tag: t.link, class: 'token-link'},
+  {tag: t.strikethrough, class: 'token-strikethrough'},
+  {tag: t.strong, class: 'token-strong'},
+  {tag: t.emphasis, class: 'token-emphasis'},
+]);
 
 export async function create(code: string, mimeType: string): Promise<CodeHighlighter> {
-  const CM = await importCM();
   const language = await languageFromMIME(mimeType);
-  const tree = language ? language.language.parser.parse(code) : new CM.Tree(CM.NodeType.none, [], [], code.length);
-  return new CodeHighlighter(code, tree, CM);
+  let tree: CodeMirror.Tree;
+  if (language) {
+    tree = language.language.parser.parse(code);
+  } else {
+    tree = new CodeMirror.Tree(CodeMirror.NodeType.none, [], [], code.length);
+  }
+  return new CodeHighlighter(code, tree);
 }
 
 export async function highlightNode(node: Element, mimeType: string): Promise<void> {
@@ -71,57 +65,55 @@ export async function highlightNode(node: Element, mimeType: string): Promise<vo
 }
 
 export async function languageFromMIME(mimeType: string): Promise<CodeMirror.LanguageSupport|null> {
-  const CM = await importCM();
-
   switch (mimeType) {
     case 'text/javascript':
-      return (await CM.javascript()).javascript();
+      return CodeMirror.javascript.javascript();
     case 'text/jsx':
-      return (await CM.javascript()).javascript({jsx: true});
+      return CodeMirror.javascript.javascript({jsx: true});
     case 'text/typescript':
-      return (await CM.javascript()).javascript({typescript: true});
+      return CodeMirror.javascript.javascript({typescript: true});
     case 'text/typescript-jsx':
-      return (await CM.javascript()).javascript({typescript: true, jsx: true});
+      return CodeMirror.javascript.javascript({typescript: true, jsx: true});
 
     case 'text/css':
     case 'text/x-scss':
-      return (await CM.css()).css();
+      return CodeMirror.css.css();
 
     case 'text/html':
-      return (await CM.html()).html();
+      return CodeMirror.html.html();
 
     case 'application/xml':
-      return (await CM.xml()).xml();
+      return (await CodeMirror.xml()).xml();
 
     case 'text/webassembly':
-      return (await CM.wast()).wast();
+      return (await CodeMirror.wast()).wast();
 
     case 'text/x-c++src':
-      return (await CM.cpp()).cpp();
+      return (await CodeMirror.cpp()).cpp();
 
     case 'text/x-java':
-      return (await CM.java()).java();
+      return (await CodeMirror.java()).java();
 
     case 'application/json':
-      return (await CM.json()).json();
+      return (await CodeMirror.json()).json();
 
     case 'application/x-httpd-php':
-      return (await CM.php()).php();
+      return (await CodeMirror.php()).php();
 
     case 'text/x-python':
-      return (await CM.python()).python();
+      return (await CodeMirror.python()).python();
 
     case 'text/markdown':
-      return (await CM.markdown()).markdown();
+      return (await CodeMirror.markdown()).markdown();
 
     case 'text/x-sh':
-      return new CM.LanguageSupport(await CM.shell());
+      return new CodeMirror.LanguageSupport(await CodeMirror.shell());
 
     case 'text/x-coffeescript':
-      return new CM.LanguageSupport(await CM.coffeescript());
+      return new CodeMirror.LanguageSupport(await CodeMirror.coffeescript());
 
     case 'text/x-clojure':
-      return new CM.LanguageSupport(await CM.clojure());
+      return new CodeMirror.LanguageSupport(await CodeMirror.clojure());
 
     default:
       return null;
@@ -129,7 +121,7 @@ export async function languageFromMIME(mimeType: string): Promise<CodeMirror.Lan
 }
 
 export class CodeHighlighter {
-  constructor(readonly code: string, readonly tree: CodeMirror.Tree, private readonly modCM: typeof CodeMirror) {
+  constructor(readonly code: string, readonly tree: CodeMirror.Tree) {
   }
 
   highlight(token: (text: string, style: string) => void): void {
@@ -144,7 +136,7 @@ export class CodeHighlighter {
         pos = to;
       }
     };
-    this.modCM.highlightTree(this.tree, getHighlightStyle(this.modCM).match, (from, to, style) => {
+    CodeMirror.highlightTree(this.tree, highlightStyle.match, (from, to, style) => {
       flush(from, '');
       flush(to, style);
     }, from, to);

package/front_end/ui/components/data_grid/dataGrid.css

@@ -120,21 +120,23 @@ th.firstVisibleColumn {
 }
 
 [aria-sort="descending"]::after {
-  content: " ";
-  border-left: 0.3em solid transparent;
-  border-right: 0.3em solid transparent;
-  border-top: 0.3em solid var(--color-text-primary);
+  content: "";
+  width: 0;
+  border-left: 0.4em solid transparent;
+  border-right: 0.4em solid transparent;
+  border-top: 0.4em solid var(--color-text-secondary);
   position: absolute;
   right: 0.5em;
-  top: 0.6em;
+  top: 0.85em;
 }
 
 [aria-sort="ascending"]::after {
-  content: " ";
-  border-bottom: 0.3em solid var(--color-text-primary);
-  border-left: 0.3em solid transparent;
-  border-right: 0.3em solid transparent;
+  content: "";
+  width: 0;
+  border-bottom: 0.4em solid var(--color-text-secondary);
+  border-left: 0.4em solid transparent;
+  border-right: 0.4em solid transparent;
   position: absolute;
   right: 0.5em;
-  top: 0.6em;
+  top: 0.7em;
 }

package/front_end/ui/components/docs/css_overview/start_view.html

@@ -0,0 +1,25 @@
+<!--
+  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.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>CSS Overview Start View</title>
+    <style>
+      #container {
+        width: 80%;
+        border: 1px solid black;
+        padding: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+    </div>
+    <script type="module" src="./start_view.js"></script>
+  </body>
+</html>

package/front_end/ui/components/docs/css_overview/start_view.ts

@@ -0,0 +1,14 @@
+// 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 FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
+import * as CSSOverviewComponents from '../../../../panels/css_overview/components/components.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+
+await ComponentHelpers.ComponentServerSetup.setup();
+await FrontendHelpers.initializeGlobalVars();
+
+const component = new CSSOverviewComponents.CSSOverviewStartView.CSSOverviewStartView();
+
+document.getElementById('container')?.appendChild(component);

package/front_end/ui/components/docs/panel_feedback/basic.html

@@ -0,0 +1,25 @@
+<!--
+  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.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Panel Feedback</title>
+    <style>
+      #container {
+        width: 80%;
+        border: 1px solid black;
+        padding: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+    </div>
+    <script type="module" src="./basic.js"></script>
+  </body>
+</html>

package/front_end/ui/components/docs/panel_feedback/basic.ts

@@ -0,0 +1,20 @@
+// 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 FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
+import * as PanelFeedback from '../../../components/panel_feedback/panel_feedback.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+
+await ComponentHelpers.ComponentServerSetup.setup();
+await FrontendHelpers.initializeGlobalVars();
+
+const component = new PanelFeedback.PanelFeedback.PanelFeedback();
+
+component.data = {
+  feedbackUrl: 'https://www.example.com',
+  quickStartUrl: 'https://www.example.com',
+  quickStartLinkText: 'Quick start: get started with the Recorder',
+};
+
+document.getElementById('container')?.appendChild(component);

package/front_end/ui/components/docs/panel_feedback/button.html

@@ -0,0 +1,25 @@
+<!--
+  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.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Feedback button</title>
+    <style>
+      #container {
+        width: 80%;
+        border: 1px solid black;
+        padding: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+    </div>
+    <script type="module" src="./button.js"></script>
+  </body>
+</html>

package/front_end/ui/components/docs/panel_feedback/button.ts

@@ -0,0 +1,18 @@
+// 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 FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
+import * as PanelFeedback from '../../../components/panel_feedback/panel_feedback.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+
+await ComponentHelpers.ComponentServerSetup.setup();
+await FrontendHelpers.initializeGlobalVars();
+
+const component = new PanelFeedback.FeedbackButton.FeedbackButton();
+
+component.data = {
+  feedbackUrl: 'https://www.example.com',
+};
+
+document.getElementById('container')?.appendChild(component);

package/front_end/ui/components/helpers/get-stylesheet.ts

@@ -56,4 +56,5 @@ export const CSS_RESOURCES_TO_LOAD_INTO_RUNTIME = [
   'ui/legacy/components/source_frame/jsonView.css',
   'ui/legacy/searchableView.css',
   'ui/legacy/toolbar.css',
+  'ui/legacy/inspectorViewTabbedPane.css',
 ];

package/front_end/ui/components/panel_feedback/FeedbackButton.ts

@@ -0,0 +1,67 @@
+// 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 Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as ComponentHelpers from '../../components/helpers/helpers.js';
+import * as LitHtml from '../../lit-html/lit-html.js';
+import * as Buttons from '../buttons/buttons.js';
+
+const UIStrings = {
+  /**
+   * @description The title of the button that leads to the feedback form.
+   */
+  feedback: 'Feedback',
+};
+
+const str_ = i18n.i18n.registerUIStrings('ui/components/panel_feedback/FeedbackButton.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const feedbackIconUrl = new URL('../../../Images/feedback_button_icon.svg', import.meta.url).toString();
+
+export interface FeedbackButtonData {
+  feedbackUrl: string;
+}
+export class FeedbackButton extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-feedback-button`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.render.bind(this);
+
+  #props: FeedbackButtonData = {
+    feedbackUrl: '',
+  };
+
+  set data(data: FeedbackButtonData) {
+    this.#props = data;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  #onFeedbackClick(): void {
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(this.#props.feedbackUrl);
+  }
+
+  private render(): void {
+    if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
+      throw new Error('FeedbackButton render was not scheduled');
+    }
+
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      <${Buttons.Button.Button.litTagName}
+          @click=${this.#onFeedbackClick}
+          .iconUrl=${feedbackIconUrl}
+          .variant=${Buttons.Button.Variant.SECONDARY}
+      >${i18nString(UIStrings.feedback)}</${Buttons.Button.Button.litTagName}>
+      `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-feedback-button', FeedbackButton);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-feedback-button': FeedbackButton;
+  }
+}

package/front_end/ui/components/panel_feedback/PanelFeedback.ts

@@ -0,0 +1,100 @@
+// 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 i18n from '../../../core/i18n/i18n.js';
+import * as ComponentHelpers from '../../components/helpers/helpers.js';
+import * as LitHtml from '../../lit-html/lit-html.js';
+import * as IconButton from '../icon_button/icon_button.js';
+
+import panelFeedbackStyles from './panelFeedback.css.js';
+
+const UIStrings = {
+  /**
+  *@description Introduction sentence to convey the feature is being actively worked on and we are looking for feedback.
+  */
+  previewText: 'Our team is actively working on this feature and we would love to know what you think.',
+  /**
+  *@description Link text the user can click to provide feedback to the team.
+  */
+  previewTextFeedbackLink: 'Send us your feedback.',
+  /**
+  *@description Title of the UI section that shows the user that this feature is in preview. Used as the main heading. Not a verb.
+  */
+  previewFeature: 'Preview feature',
+  /**
+  *@description Title of the section to the quick start video and documentation on experimental panels.
+  */
+  videoAndDocumentation: 'Video and documentation',
+};
+
+const str_ = i18n.i18n.registerUIStrings('ui/components/panel_feedback/PanelFeedback.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const previewFeatureUrl = new URL('../../../Images/ic_preview_feature.svg', import.meta.url).toString();
+const videoThumbnailUrl = new URL('../../../Images/preview_feature_video_thumbnail.svg', import.meta.url).toString();
+
+export interface PanelFeedbackData {
+  feedbackUrl: string;
+  quickStartUrl: string;
+  quickStartLinkText: string;
+}
+export class PanelFeedback extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-panel-feedback`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.render.bind(this);
+
+  #props: PanelFeedbackData = {
+    feedbackUrl: '',
+    quickStartUrl: '',
+    quickStartLinkText: '',
+  };
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [panelFeedbackStyles];
+  }
+
+  set data(data: PanelFeedbackData) {
+    this.#props = data;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  private render(): void {
+    if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
+      throw new Error('PanelFeedback render was not scheduled');
+    }
+
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      <div class="preview">
+        <h2 class="flex">
+          <${IconButton.Icon.Icon.litTagName} .data=${{
+            iconPath: previewFeatureUrl,
+            width: '24px',
+            height: '24px',
+            color: 'var(--color-primary)',
+          } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}> ${i18nString(UIStrings.previewFeature)}
+        </h2>
+        <p>${i18nString(UIStrings.previewText)} <x-link href=${this.#props.feedbackUrl}>${i18nString(UIStrings.previewTextFeedbackLink)}</x-link></p>
+        <div class="video">
+          <div class="thumbnail">
+            <img src=${videoThumbnailUrl} role="presentation" />
+          </div>
+          <div class="video-description">
+            <h3>${i18nString(UIStrings.videoAndDocumentation)}</h3>
+            <x-link class="quick-start-link" href=${this.#props.quickStartUrl}>${this.#props.quickStartLinkText}</x-link>
+          </div>
+        </div>
+      </div>
+      `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-panel-feedback', PanelFeedback);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-panel-feedback': PanelFeedback;
+  }
+}

package/front_end/ui/components/panel_feedback/panelFeedback.css

@@ -0,0 +1,76 @@
+/*
+ * 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.
+ */
+
+/**
+ * Copyright 2021 Google LLC. All rights reserved.
+ */
+
+:host {
+  display: block;
+}
+
+.preview {
+  padding: 12px 16px;
+  border: 1px solid var(--color-details-hairline);
+  color: var(--color-text-primary);
+  font-size: 13px;
+  line-height: 20px;
+  border-radius: 12px;
+  margin: 42px 0;
+  letter-spacing: 0.01em;
+}
+
+h2 {
+  color: var(--color-primary);
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: 0.01em;
+  margin: 9px 0 14px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-weight: normal;
+}
+
+h3 {
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: 0.04em;
+  color: var(--color-text-primary);
+  margin-bottom: 2px;
+  font-weight: normal;
+}
+
+.preview p {
+  margin-bottom: 24px;
+}
+
+.thumbnail {
+  height: 92px;
+}
+
+.video {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 20px;
+}
+
+x-link { /* stylelint-disable-line selector-type-no-unknown */
+  color: var(--color-primary);
+  text-decoration-line: underline;
+}
+
+x-link.quick-start-link { /* stylelint-disable-line selector-type-no-unknown */
+  font-size: 14px;
+  line-height: 22px;
+  letter-spacing: 0.04em;
+}
+
+.video-description {
+  min-width: min-content;
+  flex-basis: min-content;
+  flex-grow: 1;
+}