chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts

@@ -31,6 +31,7 @@
 
 import * as Common from '../../../../core/common/common.js';
 import * as Trace from '../../../../models/trace/trace.js';
+import * as TraceBounds from '../../../../services/trace_bounds/trace_bounds.js';
 import * as VisualLoggging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 import * as ThemeSupport from '../../theme_support/theme_support.js';
@@ -55,7 +56,9 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
   private windowStartTime = Trace.Types.Timing.Milli(0);
   private windowEndTime = Trace.Types.Timing.Milli(Infinity);
   private muteOnWindowChanged = false;
+  private hasPointer = false;
   #dimHighlightSVG: Element;
+  readonly #boundOnThemeChanged = this.#onThemeChanged.bind(this);
 
   constructor(prefix: string) {
     super();
@@ -68,8 +71,11 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     this.element.appendChild(this.overviewGrid.element);
     this.cursorArea = this.overviewGrid.element.createChild('div', 'overview-grid-cursor-area');
     this.cursorElement = this.overviewGrid.element.createChild('div', 'overview-grid-cursor-position');
-    this.cursorArea.addEventListener('mousemove', this.onMouseMove.bind(this), true);
-    this.cursorArea.addEventListener('mouseleave', this.hideCursor.bind(this), true);
+    this.cursorArea.addEventListener('pointerdown', this.onMouseDown.bind(this), true);
+    this.cursorArea.addEventListener('pointerup', this.onMouseCancel.bind(this), true);
+    this.cursorArea.addEventListener('pointercancel', this.onMouseCancel.bind(this), true);
+    this.cursorArea.addEventListener('pointermove', this.onMouseMove.bind(this), true);
+    this.cursorArea.addEventListener('pointerleave', this.hideCursor.bind(this), true);
 
     this.overviewGrid.setResizeEnabled(false);
     this.overviewGrid.addEventListener(OverviewGridEvents.WINDOW_CHANGED_WITH_POSITION, this.onWindowChanged, this);
@@ -84,8 +90,31 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
 
   enableCreateBreadcrumbsButton(): void {
     const breadcrumbsElement = this.overviewGrid.enableCreateBreadcrumbsButton();
-    breadcrumbsElement.addEventListener('mousemove', this.onMouseMove.bind(this), true);
-    breadcrumbsElement.addEventListener('mouseleave', this.hideCursor.bind(this), true);
+    breadcrumbsElement.addEventListener('pointerdown', this.onMouseDown.bind(this), true);
+    breadcrumbsElement.addEventListener('pointerup', this.onMouseCancel.bind(this), true);
+    breadcrumbsElement.addEventListener('pointercancel', this.onMouseCancel.bind(this), true);
+    breadcrumbsElement.addEventListener('pointermove', this.onMouseMove.bind(this), true);
+    breadcrumbsElement.addEventListener('pointerleave', this.hideCursor.bind(this), true);
+  }
+
+  private onMouseDown(event: PointerEvent): void {
+    if (!(event.target instanceof HTMLElement)) {
+      return;
+    }
+
+    event.target.setPointerCapture(event.pointerId);
+    this.overviewInfo.hide();
+    this.hasPointer = true;
+  }
+
+  private onMouseCancel(event: PointerEvent): void {
+    if (!(event.target instanceof HTMLElement)) {
+      return;
+    }
+
+    event.target.releasePointerCapture(event.pointerId);
+    this.overviewInfo.show();
+    this.hasPointer = false;
   }
 
   private onMouseMove(event: Event): void {
@@ -112,7 +141,9 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
       this.dispatchEventToListeners(Events.OVERVIEW_PANE_MOUSE_LEAVE);
     }
 
-    void this.overviewInfo.setContent(this.buildOverviewInfo());
+    if (!this.hasPointer) {
+      void this.overviewInfo.setContent(this.buildOverviewInfo());
+    }
   }
 
   private async buildOverviewInfo(): Promise<DocumentFragment> {
@@ -131,12 +162,24 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     this.overviewInfo.hide();
   }
 
+  #onThemeChanged(): void {
+    this.scheduleUpdate();
+  }
+
   override wasShown(): void {
-    this.update();
+    super.wasShown();
+    const start = TraceBounds.TraceBounds.BoundsManager.instance().state()?.milli.minimapTraceBounds.min;
+    const end = TraceBounds.TraceBounds.BoundsManager.instance().state()?.milli.minimapTraceBounds.max;
+    this.update(start, end);
+    ThemeSupport.ThemeSupport.instance().addEventListener(
+        ThemeSupport.ThemeChangeEvent.eventName, this.#boundOnThemeChanged);
   }
 
   override willHide(): void {
+    ThemeSupport.ThemeSupport.instance().removeEventListener(
+        ThemeSupport.ThemeChangeEvent.eventName, this.#boundOnThemeChanged);
     this.overviewInfo.hide();
+    super.willHide();
   }
 
   override onResize(): void {
@@ -550,4 +593,9 @@ export class OverviewInfo {
     this.visible = false;
     this.glassPane.hide();
   }
+
+  show(): void {
+    this.visible = true;
+    this.glassPane.show(window.document);
+  }
 }

package/front_end/ui/legacy/components/perf_ui/perf_ui-meta.ts

@@ -11,17 +11,17 @@ import type * as PerfUI from './perf_ui.js';
 
 const UIStrings = {
   /**
-   *@description Title of a setting under the Performance category in Settings.
+   * @description Title of a setting under the Performance category in Settings.
    * Selected navigation allows switching between 2 different sets of shortcuts
    * and actions (like zoom on scroll or crtl/cmd + scroll) for navigating the performance panel.
    */
   flamechartSelectedNavigation: 'Flamechart navigation:',
   /**
-   *@description Modern navigation option in the Performance Panel.
+   * @description Modern navigation option in the Performance Panel.
    */
   modern: 'Modern',
   /**
-   *@description Classic navigation option in the Performance Panel.
+   * @description Classic navigation option in the Performance Panel.
    */
   classic: 'Classic',
   /**
@@ -32,15 +32,15 @@ const UIStrings = {
    */
   liveMemoryAllocationAnnotations: 'Live memory allocation annotations',
   /**
-   *@description Title of a setting under the Memory category that can be invoked through the Command Menu
+   * @description Title of a setting under the Memory category that can be invoked through the Command Menu
    */
   showLiveMemoryAllocation: 'Show live memory allocation annotations',
   /**
-   *@description Title of a setting under the Memory category that can be invoked through the Command Menu
+   * @description Title of a setting under the Memory category that can be invoked through the Command Menu
    */
   hideLiveMemoryAllocation: 'Hide live memory allocation annotations',
   /**
-   *@description Title of an action in the components tool to collect garbage
+   * @description Title of an action in the components tool to collect garbage
    */
   collectGarbage: 'Collect garbage',
 } as const;

package/front_end/ui/legacy/components/quick_open/CommandMenu.ts

@@ -73,6 +73,7 @@ export class CommandMenu {
       userActionCode,
       deprecationWarning,
       isPanelOrDrawer,
+      featurePromotionId,
     } = options;
 
     let handler = executeHandler;
@@ -81,10 +82,12 @@ export class CommandMenu {
       handler = () => {
         Host.userMetrics.actionTaken(actionCode);
         executeHandler();
+        // not here
       };
     }
     return new Command(
-        category, title, keys, shortcut, jslogContext, handler, availableHandler, deprecationWarning, isPanelOrDrawer);
+        category, title, keys, shortcut, jslogContext, handler, availableHandler, deprecationWarning, isPanelOrDrawer,
+        featurePromotionId);
   }
 
   static createSettingCommand<V>(setting: Common.Settings.Setting<V>, title: Common.UIString.LocalizedString, value: V):
@@ -156,7 +159,7 @@ export class CommandMenu {
   }
 
   static createRevealViewCommand(options: RevealViewCommandOptions): Command {
-    const {title, tags, category, userActionCode, id} = options;
+    const {title, tags, category, userActionCode, id, featurePromotionId} = options;
     if (!category) {
       throw new Error(`Creating '${title}' reveal view command failed. Reveal view has no category.`);
     }
@@ -171,6 +174,9 @@ export class CommandMenu {
       if (id === 'issues-pane') {
         Host.userMetrics.issuesPanelOpenedFrom(Host.UserMetrics.IssueOpener.COMMAND_MENU);
       }
+      if (featurePromotionId) {
+        UI.UIUtils.PromotionManager.instance().recordFeatureInteraction(featurePromotionId);
+      }
       return UI.ViewManager.ViewManager.instance().showView(id, /* userGesture */ true);
     };
 
@@ -184,6 +190,7 @@ export class CommandMenu {
       userActionCode,
       availableHandler: undefined,
       isPanelOrDrawer: panelOrDrawer,
+      featurePromotionId,
     });
   }
 
@@ -207,6 +214,7 @@ export class CommandMenu {
         tags: view.tags() || '',
         category,
         id: view.viewId(),
+        featurePromotionId: view.featurePromotionId(),
       };
       this.commandsInternal.push(CommandMenu.createRevealViewCommand(options));
     }
@@ -239,6 +247,7 @@ export interface RevealViewCommandOptions {
   tags: string;
   category: UI.ViewManager.ViewLocationCategory;
   userActionCode?: number;
+  featurePromotionId?: string;
 }
 
 export interface CreateCommandOptions {
@@ -252,6 +261,7 @@ export interface CreateCommandOptions {
   userActionCode?: number;
   deprecationWarning?: Platform.UIString.LocalizedString;
   isPanelOrDrawer?: PanelOrDrawer;
+  featurePromotionId?: string;
 }
 
 export const enum PanelOrDrawer {
@@ -313,6 +323,12 @@ export class CommandMenuProvider extends Provider {
   override itemScoreAt(itemIndex: number, query: string): number {
     const command = this.commands[itemIndex];
     let score = Diff.Diff.DiffWrapper.characterScore(query.toLowerCase(), command.title.toLowerCase());
+    // Increase score of promoted items so that these appear on top of the list
+    const promotionId = command.featurePromotionId;
+    if (promotionId && UI.UIUtils.PromotionManager.instance().canShowPromotion(promotionId)) {
+      score = Number.MAX_VALUE;
+      return score;
+    }
 
     // Score panel/drawer reveals above regular actions.
     if (command.isPanelOrDrawer === PanelOrDrawer.PANEL) {
@@ -333,6 +349,13 @@ export class CommandMenuProvider extends Provider {
     UI.UIUtils.createTextChild(titleElement, command.title);
     FilteredListWidget.highlightRanges(titleElement, query, true);
 
+    if (command.featurePromotionId) {
+      const badge = UI.UIUtils.maybeCreateNewBadge(command.featurePromotionId);
+      if (badge) {
+        titleElement.parentElement?.insertBefore(badge, subtitleElement);
+      }
+    }
+
     subtitleElement.textContent = command.shortcut;
 
     const deprecationWarning = command.deprecationWarning;
@@ -398,6 +421,7 @@ export class Command {
   readonly jslogContext: string;
   readonly deprecationWarning?: Platform.UIString.LocalizedString;
   readonly isPanelOrDrawer?: PanelOrDrawer;
+  readonly featurePromotionId?: string;
 
   readonly #executeHandler: () => unknown;
   readonly #availableHandler?: () => boolean;
@@ -405,7 +429,8 @@ export class Command {
   constructor(
       category: Common.UIString.LocalizedString, title: Common.UIString.LocalizedString, key: string, shortcut: string,
       jslogContext: string, executeHandler: () => unknown, availableHandler?: () => boolean,
-      deprecationWarning?: Platform.UIString.LocalizedString, isPanelOrDrawer?: PanelOrDrawer) {
+      deprecationWarning?: Platform.UIString.LocalizedString, isPanelOrDrawer?: PanelOrDrawer,
+      featurePromotionId?: string) {
     this.category = category;
     this.title = title;
     this.key = category + '\0' + title + '\0' + key;
@@ -415,6 +440,7 @@ export class Command {
     this.#availableHandler = availableHandler;
     this.deprecationWarning = deprecationWarning;
     this.isPanelOrDrawer = isPanelOrDrawer;
+    this.featurePromotionId = featurePromotionId;
   }
 
   available(): boolean {

package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -34,6 +34,10 @@ const UIStrings = {
    * @example {5} PH3
    */
   sItemSOfS: '{PH1}, item {PH2} of {PH3}',
+  /**
+   * @description Text that should be read out by screen readers when a new badge is available
+   */
+  newFeature: 'This is a new feature',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/quick_open/FilteredListWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -61,7 +65,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   private readonly queryChangedCallback?: (arg0: string) => void;
 
   constructor(provider: Provider|null, promptHistory?: string[], queryChangedCallback?: ((arg0: string) => void)) {
-    super(true);
+    super({useShadowDom: true});
     this.registerRequiredCSS(filteredListWidgetStyles);
     this.promptHistory = promptHistory || [];
 
@@ -331,9 +335,14 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
       return;
     }
     this.list.selectItem(item);
-    const text = this.list.elementAtIndex(this.list.selectedIndex())?.textContent;
+    const selectedElement = this.list.elementAtIndex(this.list.selectedIndex());
+    const children = selectedElement.querySelectorAll('*');
+    const text = Array.from(children)
+                     .filter(e => !e.children.length)
+                     .map(e => e.classList.contains('new-badge') ? i18nString(UIStrings.newFeature) : e.textContent)
+                     .join();
     if (text) {
-      UI.ARIAUtils.alert(
+      UI.ARIAUtils.LiveAnnouncer.alert(
           i18nString(UIStrings.sItemSOfS, {PH1: text, PH2: this.list.selectedIndex() + 1, PH3: this.items.length}));
     }
   }
@@ -502,7 +511,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     this.notFoundElement.classList.toggle('hidden', hasItems);
     if (!hasItems && this.provider) {
       this.notFoundElement.textContent = this.provider.notFoundText(this.cleanValue());
-      UI.ARIAUtils.alert(this.notFoundElement.textContent);
+      UI.ARIAUtils.LiveAnnouncer.alert(this.notFoundElement.textContent);
     }
   }
 
@@ -558,7 +567,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
       keyboardEvent.consume(true);
       const text = this.list.elementAtIndex(this.list.selectedIndex())?.textContent;
       if (text) {
-        UI.ARIAUtils.alert(
+        UI.ARIAUtils.LiveAnnouncer.alert(
             i18nString(UIStrings.sItemSOfS, {PH1: text, PH2: this.list.selectedIndex() + 1, PH3: this.items.length}));
       }
     }

package/front_end/ui/legacy/components/quick_open/HelpQuickOpen.ts

@@ -48,11 +48,8 @@ export class HelpQuickOpen extends Provider {
     const provider = this.providers[itemIndex];
 
     const iconElement = new IconButton.Icon.Icon();
-    iconElement.data = {
-      iconName: provider.iconName,
-      color: 'var(--icon-default)',
-      width: '18px',
-    };
+    iconElement.name = provider.iconName;
+    iconElement.classList.add('large');
     titleElement.parentElement?.parentElement?.insertBefore(iconElement, titleElement.parentElement);
 
     UI.UIUtils.createTextChild(titleElement, provider.title);

package/front_end/ui/legacy/components/quick_open/filteredListWidget.css

@@ -136,8 +136,10 @@ devtools-text-prompt {
 
 .filtered-list-widget-item.one-row {
   line-height: var(--sys-typescale-body3-line-height);
+  align-items: center;
   align-content: center;
   display: flex;
+  gap: var(--sys-size-4);
 }
 
 .filtered-list-widget-item.one-row .filtered-list-widget-title {

package/front_end/ui/legacy/components/quick_open/quick_open-meta.ts

@@ -9,11 +9,11 @@ import type * as QuickOpen from './quick_open.js';
 
 const UIStrings = {
   /**
-   *@description Title of action that opens a file
+   * @description Title of action that opens a file
    */
   openFile: 'Open file',
   /**
-   *@description Title of command that runs a Quick Open command
+   * @description Title of command that runs a Quick Open command
    */
   runCommand: 'Run command',
 } as const;

package/front_end/ui/legacy/components/source_frame/FontView.ts

@@ -41,12 +41,12 @@ import fontViewStyles from './fontView.css.js';
 
 const UIStrings = {
   /**
-   *@description Text that appears on a button for the font resource type filter.
+   * @description Text that appears on a button for the font resource type filter.
    */
   font: 'Font',
   /**
-   *@description Aria accessible name in Font View of the Sources panel
-   *@example {https://example.com} PH1
+   * @description Aria accessible name in Font View of the Sources panel
+   * @example {https://example.com} PH1
    */
   previewOfFontFromS: 'Preview of font from {PH1}',
 } as const;
@@ -61,10 +61,13 @@ export class FontView extends UI.View.SimpleView {
   fontStyleElement!: HTMLStyleElement|null;
   private inResize!: boolean|null;
   constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
-    super(i18nString(UIStrings.font));
+    super({
+      title: i18nString(UIStrings.font),
+      viewId: 'font',
+      jslog: `${VisualLogging.pane('font-view')}`,
+    });
     this.registerRequiredCSS(fontViewStyles);
     this.element.classList.add('font-view');
-    this.element.setAttribute('jslog', `${VisualLogging.pane('font-view')}`);
     this.url = contentProvider.contentURL();
     UI.ARIAUtils.setLabel(this.element, i18nString(UIStrings.previewOfFontFromS, {PH1: this.url}));
     this.contentProvider = contentProvider;

package/front_end/ui/legacy/components/source_frame/ImageView.ts

@@ -42,59 +42,44 @@ import * as UI from '../../legacy.js';
 
 import imageViewStyles from './imageView.css.js';
 
-declare global {
-  interface FileSystemWritableFileStream extends WritableStream {
-    write(data: unknown): Promise<void>;
-    close(): Promise<void>;
-  }
-
-  interface FileSystemHandle {
-    createWritable(): Promise<FileSystemWritableFileStream>;
-  }
-
-  interface Window {
-    showSaveFilePicker(opts: unknown): Promise<FileSystemHandle>;
-  }
-}
-
 const UIStrings = {
   /**
-   *@description Text in Image View of the Sources panel
+   * @description Text in Image View of the Sources panel
    */
   image: 'Image',
   /**
-   *@description Text that appears when user drag and drop something (for example, a file) in Image View of the Sources panel
+   * @description Text that appears when user drag and drop something (for example, a file) in Image View of the Sources panel
    */
   dropImageFileHere: 'Drop image file here',
   /**
-   *@description Text to indicate the source of an image
-   *@example {example.com} PH1
+   * @description Text to indicate the source of an image
+   * @example {example.com} PH1
    */
   imageFromS: 'Image from {PH1}',
   /**
-   *@description Text in Image View of the Sources panel
-   *@example {2} PH1
-   *@example {2} PH2
+   * @description Text in Image View of the Sources panel
+   * @example {2} PH1
+   * @example {2} PH2
    */
   dD: '{PH1} × {PH2}',
   /**
-   *@description A context menu item in the Image View of the Sources panel
+   * @description A context menu item in the Image View of the Sources panel
    */
   copyImageUrl: 'Copy image URL',
   /**
-   *@description A context menu item in the Image View of the Sources panel
+   * @description A context menu item in the Image View of the Sources panel
    */
   copyImageAsDataUri: 'Copy image as data URI',
   /**
-   *@description A context menu item in the Image View of the Sources panel
+   * @description A context menu item in the Image View of the Sources panel
    */
   openImageInNewTab: 'Open image in new tab',
   /**
-   *@description A context menu item in the Image Preview
+   * @description A context menu item in the Image Preview
    */
   saveImageAs: 'Save image as…',
   /**
-   *@description The default file name when downloading a file
+   * @description The default file name when downloading a file
    */
   download: 'download',
 } as const;
@@ -114,11 +99,14 @@ export class ImageView extends UI.View.SimpleView {
   private imagePreviewElement: HTMLImageElement;
   private cachedContent?: TextUtils.ContentData.ContentData;
   constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
-    super(i18nString(UIStrings.image));
+    super({
+      title: i18nString(UIStrings.image),
+      viewId: 'image',
+      jslog: `${VisualLogging.pane('image-view')}}`,
+    });
     this.registerRequiredCSS(imageViewStyles);
     this.element.tabIndex = -1;
     this.element.classList.add('image-view');
-    this.element.setAttribute('jslog', `${VisualLogging.pane('image-view')}`);
     this.url = contentProvider.contentURL();
     this.parsedURL = new Common.ParsedURL.ParsedURL(this.url);
     this.contentProvider = contentProvider;

package/front_end/ui/legacy/components/source_frame/JSONView.ts

@@ -40,7 +40,7 @@ import jsonViewStyles from './jsonView.css.js';
 
 const UIStrings = {
   /**
-   *@description Text to find an item
+   * @description Text to find an item
    */
   find: 'Find',
 } as const;
@@ -83,9 +83,9 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
     return searchableView;
   }
 
-  static createViewSync(obj: Object|null): UI.SearchableView.SearchableView {
+  static createViewSync(obj: Object|null, element?: HTMLElement): UI.SearchableView.SearchableView {
     const jsonView = new JSONView(new ParsedJSON(obj, '', ''));
-    const searchableView = new UI.SearchableView.SearchableView(jsonView, null);
+    const searchableView = new UI.SearchableView.SearchableView(jsonView, null, undefined, element);
     searchableView.setPlaceholder(i18nString(UIStrings.find));
     jsonView.searchableView = searchableView;
     jsonView.show(searchableView.element);

package/front_end/ui/legacy/components/source_frame/PreviewFactory.ts

@@ -15,11 +15,11 @@ import {XMLView} from './XMLView.js';
 
 const UIStrings = {
   /**
-   *@description Text in Preview Factory of the Sources panel if the data to preview can't be shown due to an error
+   * @description Text in Preview Factory of the Sources panel if the data to preview can't be shown due to an error
    */
   failedToLoadData: 'Failed to load data',
   /**
-   *@description Text in Preview Factory of the Sources panel if there's no data to preview
+   * @description Text in Preview Factory of the Sources panel if there's no data to preview
    */
   nothingToPreview: 'Nothing to preview',
 } as const;

package/front_end/ui/legacy/components/source_frame/ResourceSourceFrame.test.ts

@@ -42,10 +42,6 @@ class MockStreamingContentProvider implements TextUtils.ContentProvider.Streamin
     return this.#contentType;
   }
 
-  async requestContent(): Promise<TextUtils.ContentProvider.DeferredContent> {
-    return this.#content.content().asDeferedContent();
-  }
-
   addChunk(chunk: string): void {
     this.#content.addChunk(chunk);
   }

package/front_end/ui/legacy/components/source_frame/ResourceSourceFrame.ts

@@ -45,7 +45,7 @@ import {type RevealPosition, SourceFrameImpl, type SourceFrameOptions} from './S
 
 const UIStrings = {
   /**
-   *@description Text to find an item
+   * @description Text to find an item
    */
   find: 'Find',
 } as const;
@@ -102,7 +102,7 @@ export class SearchableContainer extends UI.Widget.VBox {
   private readonly sourceFrame: ResourceSourceFrame;
 
   constructor(resource: TextUtils.ContentProvider.ContentProvider, contentType: string, element?: HTMLElement) {
-    super(true, undefined, element);
+    super(element, {useShadowDom: true});
     this.registerRequiredCSS(resourceSourceFrameStyles);
     const simpleContentType = Common.ResourceType.ResourceType.simplifyContentType(contentType);
     const sourceFrame = new ResourceSourceFrame(resource, simpleContentType);