chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/panels/settings/emulation/devicesSettingsTab.css

@@ -4,16 +4,17 @@
  * found in the LICENSE file.
  */
 
-.devices-settings-tab .settings-container-wrapper {
-  padding-top: 5px;
+.device-card-content {
+  padding-left: 0;
+  padding-right: 0;
 }
 
-.devices-settings-tab .settings-tab.settings-content {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  height: 100%;
-  margin: 0;
+.list {
+  border: none;
+}
+
+#custom-device-add-button {
+  padding: var(--sys-size-5) var(--sys-size-6);
 }
 
 .devices-settings-tab .devices-button-row {
@@ -31,8 +32,8 @@
 }
 
 .devices-list-item {
-  padding: 3px 5px;
-  height: 30px;
+  padding: var(--sys-size-3) var(--sys-size-6);
+  height: var(--sys-size-13);
   display: flex;
   align-items: center;
   flex: auto 1 1;

package/front_end/panels/settings/frameworkIgnoreListSettingsTab.css

@@ -4,62 +4,41 @@
  * found in the LICENSE file.
  */
 
-:host {
-  overflow: hidden;
-}
-
-.header {
-  padding: 0 0 6px;
-  border-bottom: 1px solid var(--sys-color-divider);
-  font-size: 18px;
-  font-weight: normal;
-  flex: none;
-}
-
-.intro {
-  margin-top: 10px;
-}
-
 .ignore-list-option {
   flex: none;
-  padding: 3px 6px;
-  min-height: 30px;
+  display: flex;
+  align-items: center;
+  height: var(--sys-size-13);
 }
 
 .ignore-list-option devtools-button {
+  cursor: pointer;
   position: relative;
   top: var(--sys-size-2);
   margin-left: var(--sys-size-2);
 }
 
-.ignore-list-option-group {
-  margin-top: 13px;
-  margin-bottom: 3px;
-  margin-left: 8px;
-  flex-shrink: 0;
-}
-
 .add-button {
-  margin: 10px 2px;
+  padding: var(--sys-size-5) var(--sys-size-6);
   align-self: flex-start;
   flex: none;
 }
 
 .ignore-list {
-  max-width: 500px;
   flex: 0 1 auto;
 }
 
-.ignore-list-global-enable {
-  padding: 3px 0;
-  color: var(--sys-color-token-subtle);
-  font-size: 120%;
-  margin-top: 17px;
+.enable-ignore-listing, .ignore-list-item, .general-exclusion-group {
+  padding-left: var(--sys-size-4);
+}
+
+.custom-exclusion-group {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .ignore-list-item {
-  padding: 3px 5px;
-  height: 30px;
+  height: var(--sys-size-13);
   display: flex;
   align-items: center;
   position: relative;
@@ -68,7 +47,6 @@
 
 .ignore-list-pattern {
   flex: auto;
-  min-width: 100px;
 }
 
 .ignore-list-item > [is="dt-checkbox"] {
@@ -97,13 +75,7 @@
   text-align: inherit;
 }
 
-.ignore-list-options {
-  margin-left: 22px;
-  display: flex;
-  flex-direction: column;
-}
-
-.ignore-list-options.ignore-listing-disabled {
+.ignore-listing-disabled .ignore-list-options {
   opacity: 30%;
 }
 

package/front_end/panels/settings/keybindsSettingsTab.css

@@ -4,62 +4,38 @@
  * found in the LICENSE file.
  */
 
-header {
-  padding: 0 0 6px;
-  border-bottom: 1px solid var(--sys-color-divider);
-  flex: none;
-  margin-bottom: 16px;
-}
-
-h1 {
-  font-size: 18px;
-  font-weight: normal;
-  padding-bottom: 3px;
-  margin: 0;
-}
-
-[role="list"] {
-  overflow: auto;
-
-  > * {
-    min-width: 300px;
-  }
+.shortcut-list {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .keybinds-key {
-  padding: 0.1em 0.6em;
-  border: 1px solid var(--sys-color-neutral-outline);
-  font-size: 11px;
-  background-color: var(--sys-color-neutral-container);
-  color: var(--sys-color-on-surface);
-  box-shadow: var(--box-shadow-outline-color);
-  border-radius: 3px;
-  display: inline-block;
-  margin: 0 0.1em;
-  text-shadow: 0 1px 0 var(--sys-color-cdt-base-container);
-  line-height: 1.5;
+  display:flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--sys-size-11);
+  min-width: var(--sys-size-11);
+  font: var(--sys-typescale-body5-medium);
   white-space: nowrap;
+  border-radius: var(--sys-shape-corner-small);
+  background: var(--sys-color-tonal-container);
+  padding: 0px var(--sys-size-4);
 }
 
 .keybinds-list-item {
-  min-height: 30px;
+  margin: 0 var(--sys-size-6);
+  padding: var(--sys-size-4) 0;
   display: grid;
-  grid-template-rows: repeat(auto-fit, minmax(30px, auto));
+  grid-template-rows: 1fr ;
   grid-template-columns: 1fr 30px 2fr 30px 30px;
-  flex: auto 1 1;
-}
-
-.keybinds-list-item:focus-visible {
-  background-color: var(--sys-color-tonal-container);
 }
 
 .keybinds-list-item:not(.keybinds-category-header) {
-  padding: 4px 0 4px 20px;
-  border-radius: 7px;
+  border-top: 1px solid var(--sys-color-divider);
 }
 
-.keybinds-list-item:not(.keybinds-category-header):last-child {
-  margin-bottom: 5px;
+.keybinds-list-item:focus-visible {
+  background-color: var(--sys-color-tonal-container);
 }
 
 .keybinds-list-item.keybinds-editing {
@@ -67,7 +43,6 @@ h1 {
 }
 
 .keybinds-list-text.keybinds-action-name {
-  padding-top: 7px;
   grid-row: 1 / 3;
 }
 
@@ -77,44 +52,21 @@ h1 {
   grid-column: 3 / span 1;
 }
 
-.keybinds-shortcut.devtools-link {
-  align-items: center;
-  margin-left: 3px;
-}
-
-.keybinds-shortcut .devtools-link {
-  padding: 4px 0;
-}
-
-.keybinds-info .devtools-link {
-  padding-top: 6px;
-}
-
 .keybinds-error {
   color: var(--sys-color-error);
 }
 
+.keybinds-shortcut {
+  gap: var(--sys-size-4);
+}
+
 .keybinds-list-item.keybinds-editing .keybinds-shortcut {
   display: flex;
 }
 
 .keybinds-modified {
   grid-column: 2 / span 1;
-  margin-top: 2px;
-}
-
-.keybinds-list-item button {
-  border: none;
-  padding: 0;
-  background: transparent;
-}
-
-.keybinds-list-item button:hover devtools-icon {
-  color: var(--icon-default-hover);
-}
-
-.keybinds-list-item button:focus-visible {
-  background-color: var(--sys-color-tonal-container);
+  margin-top: var(--sys-size-3);
 }
 
 .keybinds-list-item button[disabled] {
@@ -128,7 +80,7 @@ h1 {
 .keybinds-edit-button {
   display: none;
   grid-row: 1 / span 1;
-  grid-column: 4 / span 1;
+  grid-column: 5 / span 1;
 }
 
 .keybinds-list-item:not(.keybinds-editing):hover .keybinds-edit-button,
@@ -137,7 +89,9 @@ h1 {
 }
 
 .keybinds-list-text {
-  padding: 3px 0;
+  min-height: var(--sys-size-12);
+  display: flex;
+  align-items: center;
   user-select: none;
   color: var(--sys-color-on-surface);
   text-align: start;
@@ -146,35 +100,28 @@ h1 {
 }
 
 .keybinds-category-header {
-  font-weight: bold;
-  line-height: 30px;
+  display: flex;
+  align-items: center;
+  font: var(--sys-typescale-body4-bold);
+  height: var(--sys-size-13);
+  padding: var(--sys-size-4) var(--sys-size-7);
   white-space: nowrap;
 }
 
-.keybinds-category-header:not(:nth-child(2)) {
-  border-top: 1px solid var(--sys-color-divider);
+.keybinds-header-wrapper + .keybinds-list-item-wrapper > .keybinds-list-item {
+  border: none;
 }
 
-.keybinds-list-item:not(.keybinds-category-header):hover,
-.keybinds-list-item:not(.keybinds-editing):focus-within {
+.keybinds-list-item-wrapper:has(:not(.keybinds-category-header):hover),
+.keybinds-list-item-wrapper:has(.keybinds-list-item:not(.keybinds-editing)):focus-within {
   background: var(--sys-color-state-hover-on-subtle);
 }
 
-.keybinds-set-select {
-  text-align: right;
-  margin-bottom: 16px;
-}
-
 .keybinds-set-select label p {
   display: inline;
   color: var(--sys-color-on-surface);
 }
 
-.keybinds-set-select select {
-  margin-left: 6px;
-  margin-top: 6px;
-}
-
 button.text-button {
   width: fit-content;
   align-self: flex-end;
@@ -184,6 +131,20 @@ button.text-button {
   margin: 0 2px;
 }
 
+.keybinds-set-select {
+  margin: 0;
+  padding: var(--sys-size-5) var(--sys-size-7);
+
+  & .settings-select {
+    display: flex;
+    justify-content: space-between;
+
+    & label {
+      padding: 0;
+    }
+  }
+}
+
 .keybinds-list-text:has(.keybinds-delete-button) {
   grid-column: 3 / -1;
 }
@@ -196,6 +157,7 @@ button.text-button {
 }
 
 .keybinds-footer {
+  padding: var(--sys-size-5) var(--sys-size-7);
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;

package/front_end/panels/settings/settings-meta.ts

@@ -98,10 +98,10 @@ UI.ViewManager.registerViewExtension({
     const Settings = await loadSettingsModule();
     return LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.VBox, new Settings.AISettingsTab.AISettingsTab());
   },
-  iconName: 'spark',
+  iconName: 'button-magic',
   settings: ['console-insights-enabled'],
   condition: config => {
-    return (config?.devToolsConsoleInsights?.enabled || config?.devToolsFreestylerDogfood?.enabled) ?? false;
+    return (config?.devToolsConsoleInsights?.enabled || config?.devToolsFreestyler?.enabled) ?? false;
   },
 });
 

package/front_end/panels/settings/settingsScreen.css

@@ -144,6 +144,30 @@ label {
   border-top: 1px solid var(--sys-color-divider);
 }
 
+.settings-card-container-wrapper {
+  padding-top: var(--sys-size-8);
+  overflow: auto;
+  scrollbar-width: thin;
+}
+
+@media (max-width: 1000px) {
+  .settings-card-container-wrapper {
+    position: absolute;
+    top: var(--sys-size-8);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+  }
+}
+
+.settings-card-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sys-size-9);
+}
+
 .settings-tab.settings-content {
   margin: 0;
   padding: 0;
@@ -189,15 +213,15 @@ label {
 .settings-experiment {
   display: grid;
   grid-template-columns: auto min-content auto 1fr;
-}
 
-.settings-experiment .devtools-link {
-  display: flex !important; /* stylelint-disable-line declaration-no-important */
-  align-items: center;
+  & .devtools-link {
+    display: flex !important; /* stylelint-disable-line declaration-no-important */
+    align-items: center;
+  }
 }
 
-.settings-experiment .devtools-link:has(.link-icon) {
-  outline-offset: 0;
+devtools-button.link-icon {
+  cursor: pointer;
 }
 
 .experiment-label {

package/front_end/panels/sources/AddSourceMapURLDialog.ts

@@ -31,7 +31,7 @@ export class AddDebugInfoURLDialog extends UI.Widget.HBox {
   private constructor(
       label: Platform.UIString.LocalizedString, jslogContext: string,
       callback: (arg0: Platform.DevToolsPath.UrlString) => void) {
-    super(/* isWebComponent */ true);
+    super(/* useShadowDom */ true);
 
     this.contentElement.createChild('label').textContent = label;
 

package/front_end/panels/sources/CSSPlugin.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import {assertNotNullOrUndefined} from '../../core/platform/platform.js';
@@ -258,7 +257,6 @@ function createCSSTooltip(active: ActiveTooltip): CodeMirror.Tooltip {
         spectrum.addEventListener(ColorPicker.Spectrum.Events.SIZE_CHANGED, () => view.requestMeasure());
         spectrum.setColor(active.color);
         widget = spectrum;
-        Host.userMetrics.colorPickerOpenedFrom(Host.UserMetrics.ColorPickerOpenedFrom.SOURCES_PANEL);
       } else {
         const spectrum = new InlineEditor.BezierEditor.BezierEditor(active.curve);
         widget = spectrum;

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -585,7 +585,7 @@ export class DebuggerPlugin extends Plugin {
         !Bindings.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(this.uiSourceCode.url())) {
       if (this.scriptFileForDebuggerModel.size) {
         const scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile =
-            this.scriptFileForDebuggerModel.values().next().value;
+            this.scriptFileForDebuggerModel.values().next().value as Bindings.ResourceScriptMapping.ResourceScriptFile;
         const addSourceMapURLLabel = i18nString(UIStrings.addSourceMap);
         contextMenu.debugSection().appendItem(
             addSourceMapURLLabel, addSourceMapURL.bind(null, scriptFile), {jslogContext: 'add-source-map'});

package/front_end/panels/sources/EditingLocationHistoryManager.ts

@@ -33,8 +33,8 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 
-import {type SourcesView} from './SourcesView.js';
-import {type UISourceCodeFrame} from './UISourceCodeFrame.js';
+import type {SourcesView} from './SourcesView.js';
+import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
 
 export const HistoryDepth = 20;
 

package/front_end/panels/sources/GoToLineQuickOpen.ts

@@ -7,7 +7,7 @@ import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js'
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {SourcesView} from './SourcesView.js';
-import {type UISourceCodeFrame} from './UISourceCodeFrame.js';
+import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
 
 const UIStrings = {
   /**

package/front_end/panels/sources/InplaceFormatterEditorAction.ts

@@ -16,7 +16,7 @@ import {
   registerEditorAction,
   type SourcesView,
 } from './SourcesView.js';
-import {type UISourceCodeFrame} from './UISourceCodeFrame.js';
+import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
 
 const UIStrings = {
   /**

package/front_end/panels/sources/NavigatorView.ts

@@ -37,10 +37,12 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
+import * as FloatingButton from '../../ui/components/floating_button/floating_button.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as Snippets from '../snippets/snippets.js';
+import {PanelUtils} from '../utils/utils.js';
 
 import navigatorTreeStyles from './navigatorTree.css.js';
 import navigatorViewStyles from './navigatorView.css.js';
@@ -1375,6 +1377,7 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
   readonly node: NavigatorUISourceCodeTreeNode;
   private readonly navigatorView: NavigatorView;
   uiSourceCodeInternal: Workspace.UISourceCode.UISourceCode;
+  private aiButtonContainer?: HTMLElement;
 
   constructor(
       navigatorView: NavigatorView, uiSourceCode: Workspace.UISourceCode.UISourceCode, title: string,
@@ -1395,29 +1398,7 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   updateIcon(): void {
-    const binding = Persistence.Persistence.PersistenceImpl.instance().binding(this.uiSourceCodeInternal);
-    const networkPersistenceManager = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance();
-    let iconType = 'document';
-    let iconStyles: string[] = [];
-    if (binding) {
-      if (Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(binding.fileSystem)) {
-        iconType = 'snippet';
-      }
-      const badgeIsPurple = networkPersistenceManager.project() === binding.fileSystem.project();
-      iconStyles = badgeIsPurple ? ['dot', 'purple'] : ['dot', 'green'];
-    } else if (networkPersistenceManager.isActiveHeaderOverrides(this.uiSourceCode)) {
-      iconStyles = ['dot', 'purple'];
-    } else {
-      if (Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(this.uiSourceCodeInternal)) {
-        iconType = 'snippet';
-      }
-    }
-
-    const icon = IconButton.Icon.create(iconType, iconStyles.join(' '));
-    if (binding) {
-      UI.Tooltip.Tooltip.install(
-          icon, Persistence.PersistenceUtils.PersistenceUtils.tooltipForUISourceCode(this.uiSourceCodeInternal));
-    }
+    const icon = PanelUtils.getIconForSourceFile(this.uiSourceCodeInternal);
     this.setLeadingIcons([icon]);
   }
 
@@ -1425,6 +1406,32 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
     UI.ARIAUtils.setLabel(this.listItemElement, `${this.uiSourceCodeInternal.name()}, ${this.nodeType}`);
   }
 
+  private createAiButton(): void {
+    if (!UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.sources-floating-button')) {
+      return;
+    }
+    if (!this.uiSourceCode.contentType().isTextType() ||
+        Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(this.uiSourceCode)) {
+      return;
+    }
+    const action = UI.ActionRegistry.ActionRegistry.instance().getAction('drjones.sources-floating-button');
+    if (!this.aiButtonContainer) {
+      this.aiButtonContainer = this.listItemElement.createChild('span', 'ai-button-container');
+      const floatingButton = new FloatingButton.FloatingButton.FloatingButton({
+        iconName: 'smart-assistant',
+      });
+      floatingButton.addEventListener('click', ev => {
+        ev.stopPropagation();
+        this.navigatorView.sourceSelected(this.uiSourceCode, false);
+        void action.execute();
+      }, {capture: true});
+      floatingButton.addEventListener('mousedown', ev => {
+        ev.stopPropagation();
+      }, {capture: true});
+      this.aiButtonContainer.appendChild(floatingButton);
+    }
+  }
+
   get uiSourceCode(): Workspace.UISourceCode.UISourceCode {
     return this.uiSourceCodeInternal;
   }
@@ -1434,6 +1441,7 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
     this.listItemElement.addEventListener('click', this.onclick.bind(this), false);
     this.listItemElement.addEventListener('contextmenu', this.handleContextMenuEvent.bind(this), false);
     this.listItemElement.addEventListener('dragstart', this.ondragstart.bind(this), false);
+    this.createAiButton();
   }
 
   private shouldRenameOnMouseDown(): boolean {

package/front_end/panels/sources/OutlineQuickOpen.ts

@@ -6,9 +6,9 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {type UISourceCodeFrame} from './UISourceCodeFrame.js';
 
 import {SourcesView} from './SourcesView.js';
+import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
 
 const UIStrings = {
   /**

package/front_end/panels/sources/SourcesNavigator.test.ts

@@ -459,6 +459,7 @@ describeWithMockConnection('NetworkNavigatorView', () => {
         }
       });
       setMockConnectionResponseHandler('Debugger.setBlackboxPatterns', () => ({}));
+      setMockConnectionResponseHandler('Debugger.setBlackboxExecutionContexts', () => ({}));
     });
 
     const updatePatternSetting = async (settingValue: Common.Settings.RegExpSettingItem[]) => {

package/front_end/panels/sources/SourcesPanel.ts

@@ -206,6 +206,9 @@ export class SourcesPanel extends UI.Panel.Panel implements
   private tabbedLocationHeader?: Element|null;
   private extensionSidebarPanesContainer?: UI.View.ViewLocation;
   sidebarPaneView?: UI.Widget.VBox|UI.SplitWidget.SplitWidget;
+
+  #lastPausedTarget: WeakRef<SDK.Target.Target>|null = null;
+
   constructor() {
     super('sources');
 
@@ -483,6 +486,16 @@ export class SourcesPanel extends UI.Panel.Panel implements
     UI.Context.Context.instance().setFlavor(SDK.DebuggerModel.DebuggerPausedDetails, details);
     this.toggleDebuggerSidebarButton.setEnabled(false);
     this.revealDebuggerSidebar();
+    const pausedTarget = details.debuggerModel.target();
+    if (this.threadsSidebarPane && this.#lastPausedTarget?.deref() !== pausedTarget &&
+        pausedTarget !== SDK.TargetManager.TargetManager.instance().primaryPageTarget()) {
+      // If we pause in something other than the main frame (e.g. worker), we should expand the
+      // "Threads" list to make it more clear which target is paused. We do this only if the target of
+      // the previous pause is different from the new pause to prevent annoying the user by re-opening
+      // the "Threads" list while stepping or hitting the same breakpoint multiple points.
+      void this.sidebarPaneStack?.showView(this.threadsSidebarPane);
+    }
+
     window.focus();
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront();
     const withOverlay = UI.Context.Context.instance().flavor(SDK.Target.Target)?.model(SDK.OverlayModel.OverlayModel) &&
@@ -498,6 +511,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
           this.overlayLoggables.stepOverButton, `${VisualLogging.action('debugger.step-over')}`,
           this.overlayLoggables.debuggerPausedMessage);
     }
+    this.#lastPausedTarget = new WeakRef(details.debuggerModel.target());
   }
 
   private maybeLogOverlayAction(): void {
@@ -744,6 +758,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
 
   private editorSelected(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
     const uiSourceCode = event.data;
+    UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, uiSourceCode);
     if (this.editorView.mainWidget() &&
         Common.Settings.Settings.instance().moduleSetting('auto-reveal-in-navigator').get()) {
       void this.revealInNavigator(uiSourceCode, true);
@@ -938,6 +953,17 @@ export class SourcesPanel extends UI.Panel.Panel implements
             jslogContext: 'sources.reveal-in-navigator-sidebar',
           });
     }
+
+    if (UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.sources-panel-context')) {
+      const editorElement = this.element.querySelector('devtools-text-editor');
+      if (!eventTarget.isSelfOrDescendant(editorElement) && uiSourceCode.contentType().isTextType()) {
+        UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, uiSourceCode);
+        contextMenu.headerSection().appendAction(
+            'drjones.sources-panel-context',
+        );
+      }
+    }
+
     // Ignore list only works for JavaScript debugging.
     if (uiSourceCode.contentType().hasScripts() &&
         Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()

package/front_end/panels/sources/SourcesView.test.ts

@@ -93,6 +93,7 @@ describeWithEnvironment('SourcesView', () => {
         {} as Persistence.FileSystemWorkspaceBinding.FileSystem,
         'file:///path/to/overrides/www.example.com/.headers' as Platform.DevToolsPath.UrlString,
         Common.ResourceType.resourceTypes.Document);
+    sinon.stub(uiSourceCode, 'mimeType').returns('text/plain');
     sourcesView.viewForFile(uiSourceCode);
     assert.isTrue(sourcesView.getSourceView(uiSourceCode) instanceof SourcesComponents.HeadersView.HeadersView);
   });