chrome-devtools-frontend 1.0.927127 → 1.0.928589

package/front_end/ui/legacy/UIUtils.ts

@@ -344,7 +344,9 @@ export function isEditing(): boolean {
   if (!focused) {
     return false;
   }
-  return focused.classList.contains('text-prompt') || focused.nodeName === 'INPUT' || focused.nodeName === 'TEXTAREA';
+  return focused.classList.contains('text-prompt') || focused.nodeName === 'INPUT' || focused.nodeName === 'TEXTAREA' ||
+      ((focused as HTMLElement).contentEditable === 'true' ||
+       (focused as HTMLElement).contentEditable === 'plaintext-only');
 }
 
 export function markBeingEdited(element: Element, value: boolean): boolean {

package/front_end/ui/legacy/View.ts

@@ -14,6 +14,8 @@ export interface View {
 
   isCloseable(): boolean;
 
+  isPreviewFeature(): boolean;
+
   isTransient(): boolean;
 
   toolbarItems(): Promise<ToolbarItem[]>;
@@ -60,6 +62,10 @@ export class SimpleView extends VBox implements View {
 
   disposeView(): void {
   }
+
+  isPreviewFeature(): boolean {
+    return false;
+  }
 }
 
 export interface ViewLocation {

package/front_end/ui/legacy/ViewManager.ts

@@ -48,6 +48,10 @@ export class PreRegisteredView implements View {
     return this.viewRegistration.persistence === ViewPersistence.CLOSEABLE;
   }
 
+  isPreviewFeature(): boolean {
+    return Boolean(this.viewRegistration.isPreviewFeature);
+  }
+
   isTransient(): boolean {
     return this.viewRegistration.persistence === ViewPersistence.TRANSIENT;
   }
@@ -701,7 +705,7 @@ export class _TabbedLocation extends Location implements TabbedViewLocation {
   private appendTab(view: View, index?: number): void {
     this.tabbedPaneInternal.appendTab(
         view.viewId(), view.title(), new ContainerWidget(view), undefined, false,
-        view.isCloseable() || view.isTransient(), index);
+        view.isCloseable() || view.isTransient(), view.isPreviewFeature(), index);
   }
 
   appendView(view: View, insertBefore?: View|null): void {

package/front_end/ui/legacy/ViewRegistration.ts

@@ -61,6 +61,11 @@ export interface ViewRegistration {
    * Whether the view is permanently visible or can be opened temporarily.
    */
   persistence?: ViewPersistence;
+
+  /**
+   * Whether the view is a preview feature (a corresponding icon is shown then).
+   */
+  isPreviewFeature?: boolean;
   /**
    * Unique identifier of the view.
    */

package/front_end/ui/legacy/XLink.ts

@@ -29,7 +29,7 @@ export class XLink extends XElement {
     // clang-format off
     // TODO(dgozman): migrate css from 'devtools-link' to 'x-link'.
     const element = html `
-  <x-link href='${url}' class='${className} devtools-link' ${preventClick ? 'no-click' : ''}
+  <x-link href='${url}' tabindex="0" class='${className} devtools-link' ${preventClick ? 'no-click' : ''}
   >${Platform.StringUtilities.trimMiddle(linkText, MaxLengthForDisplayedURLs)}</x-link>`;
     // clang-format on
     return /** @type {!HTMLElement} */ element as HTMLElement;

package/front_end/ui/legacy/closeButton.css

@@ -43,3 +43,9 @@
 .close-button:active .active-icon {
   display: block;
 }
+
+@media (forced-colors: active) and (prefers-color-scheme: dark) {
+  .close-button {
+    filter: brightness(100);
+  }
+}

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

@@ -22,9 +22,13 @@ const UIStrings = {
   */
   noCommandsFound: 'No commands found',
   /**
-  * @description Text in Command Menu of the Command Menu
+  * @description Text for command prefix of run a command
+  */
+  run: 'Run',
+  /**
+  * @description Text for command suggestion of run a command
   */
-  runCommand: 'Run Command',
+  command: 'Command',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/quick_open/CommandMenu.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -388,6 +392,7 @@ export class ShowActionDelegate implements UI.ActionRegistration.ActionDelegate
 registerProvider({
   prefix: '>',
   iconName: 'ic_command_run_command',
-  title: (): Common.UIString.LocalizedString => i18nString(UIStrings.runCommand),
   provider: () => Promise.resolve(CommandMenuProvider.instance()),
+  titlePrefix: (): Common.UIString.LocalizedString => i18nString(UIStrings.run),
+  titleSuggestion: (): Common.UIString.LocalizedString => i18nString(UIStrings.command),
 });

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

@@ -10,6 +10,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as Diff from '../../../../third_party/diff/diff.js';
+import * as TextPrompt from '../../../../ui/components/text_prompt/text_prompt.js';
 import * as UI from '../../legacy.js';
 
 const UIStrings = {
@@ -37,9 +38,8 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   private loadTimeout: number;
   private refreshListWithCurrentResult!: (() => void)|undefined;
   private dialog!: UI.Dialog.Dialog|undefined;
-  private query!: string|undefined;
-  private readonly promptElement: HTMLElement;
-  private readonly prompt: UI.TextPrompt.TextPrompt;
+  private query = '';
+  private readonly inputBoxElement: TextPrompt.TextPrompt.TextPrompt;
   private readonly hintElement: HTMLElement;
   private readonly bottomElementsContainer: HTMLElement;
   private readonly progressElement: HTMLElement;
@@ -48,7 +48,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   private list: UI.ListControl.ListControl<number>;
   private readonly itemElementsContainer: HTMLDivElement;
   private notFoundElement: HTMLElement;
-  private prefix: string;
+  private prefix = '';
   private provider: Provider|null;
   private readonly queryChangedCallback?: (arg0: string) => void;
 
@@ -66,15 +66,11 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     UI.ARIAUtils.markAsCombobox(this.contentElement);
     this.registerRequiredCSS('ui/legacy/components/quick_open/filteredListWidget.css');
 
-    this.promptElement = this.contentElement.createChild('div', 'filtered-list-widget-input');
-    UI.ARIAUtils.setAccessibleName(this.promptElement, i18nString(UIStrings.quickOpenPrompt));
-    this.promptElement.setAttribute('spellcheck', 'false');
-    this.promptElement.setAttribute('contenteditable', 'plaintext-only');
-    this.prompt = new UI.TextPrompt.TextPrompt();
-    this.prompt.initialize(() => Promise.resolve([]));
-    const promptProxy = this.prompt.attach(this.promptElement);
-    promptProxy.addEventListener('input', this.onInput.bind(this), false);
-    promptProxy.classList.add('filtered-list-widget-prompt-element');
+    this.inputBoxElement = new TextPrompt.TextPrompt.TextPrompt();
+    this.inputBoxElement.data = {ariaLabel: i18nString(UIStrings.quickOpenPrompt), prefix: '', suggestion: ''};
+    this.inputBoxElement.addEventListener(
+        TextPrompt.TextPrompt.PromptInputEvent.eventName, this.onInput.bind(this), false);
+    this.contentElement.appendChild(this.inputBoxElement);
 
     this.hintElement = this.contentElement.createChild('div', 'filtered-list-widget-hint');
 
@@ -89,15 +85,14 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     this.bottomElementsContainer.appendChild(this.itemElementsContainer);
     this.itemElementsContainer.addEventListener('click', this.onClick.bind(this), false);
     UI.ARIAUtils.markAsListBox(this.itemElementsContainer);
-    UI.ARIAUtils.setControls(this.promptElement, this.itemElementsContainer);
-    UI.ARIAUtils.setAutocomplete(this.promptElement, UI.ARIAUtils.AutocompleteInteractionModel.list);
+    UI.ARIAUtils.setControls(this.inputBoxElement, this.itemElementsContainer);
+    UI.ARIAUtils.setAutocomplete(this.inputBoxElement, UI.ARIAUtils.AutocompleteInteractionModel.list);
 
     this.notFoundElement = this.bottomElementsContainer.createChild('div', 'not-found-text');
     this.notFoundElement.classList.add('hidden');
 
-    this.setDefaultFocusedElement(this.promptElement);
+    this.setDefaultFocusedElement(this.inputBoxElement);
 
-    this.prefix = '';
     this.provider = provider;
     this.queryChangedCallback = queryChangedCallback;
   }
@@ -138,6 +133,14 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     return false;
   }
 
+  setCommandPrefix(commandPrefix: string): void {
+    this.inputBoxElement.setPrefix(commandPrefix);
+  }
+
+  setCommandSuggestion(suggestion: string): void {
+    this.inputBoxElement.setSuggestion(suggestion);
+  }
+
   setHintElement(hint: string): void {
     this.hintElement.textContent = hint;
   }
@@ -146,7 +149,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
    * Sets the text prompt's accessible title. By default, it is "Quick open prompt".
    */
   setPromptTitle(title: string): void {
-    UI.ARIAUtils.setAccessibleName(this.promptElement, title);
+    UI.ARIAUtils.setAccessibleName(this.inputBoxElement, title);
   }
 
   showAsDialog(dialogTitle?: string): void {
@@ -190,7 +193,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   }
 
   setQuerySelectedRange(startIndex: number, endIndex: number): void {
-    this.prompt.setSelectedRange(startIndex, endIndex);
+    this.inputBoxElement.setSelectedRange(startIndex, endIndex);
   }
 
   private attachProvider(): void {
@@ -203,12 +206,8 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     this.itemsLoaded(this.provider);
   }
 
-  private value(): string {
-    return this.prompt.text().trim();
-  }
-
   private cleanValue(): string {
-    return this.value().substring(this.prefix.length);
+    return this.query.substring(this.prefix.length);
   }
 
   wasShown(): void {
@@ -290,7 +289,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     if (toElement) {
       toElement.classList.add('selected');
     }
-    UI.ARIAUtils.setActiveDescendant(this.promptElement, toElement);
+    UI.ARIAUtils.setActiveDescendant(this.inputBoxElement, toElement);
   }
 
   private onClick(event: Event): void {
@@ -307,15 +306,15 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   }
 
   setQuery(query: string): void {
-    this.prompt.focus();
-    this.prompt.setText(query);
+    this.query = query;
+    this.inputBoxElement.focus();
+    this.inputBoxElement.setText(query);
     this.queryChanged();
-    this.prompt.autoCompleteSoon(true);
     this.scheduleFilter();
   }
 
   private tabKeyPressed(): boolean {
-    const userEnteredText = this.prompt.text();
+    const userEnteredText = this.query;
     let completion;
     for (let i = this.promptHistory.length - 1; i >= 0; i--) {
       if (this.promptHistory[i] !== userEnteredText && this.promptHistory[i].startsWith(userEnteredText)) {
@@ -326,9 +325,9 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     if (!completion) {
       return false;
     }
-    this.prompt.focus();
-    this.prompt.setText(completion);
-    this.prompt.setDOMSelection(userEnteredText.length, completion.length);
+    this.inputBoxElement.focus();
+    this.inputBoxElement.setText(completion);
+    this.inputBoxElement.setSelectedRange(userEnteredText.length, completion.length);
     this.scheduleFilter();
     return true;
   }
@@ -360,7 +359,6 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     this.progressBarElement.classList.remove('filtered-widget-progress-fade', 'hidden');
 
     const query = this.provider.rewriteQuery(this.cleanValue());
-    this.query = query;
 
     const filterRegex = query ? Platform.StringUtilities.filterRegex(query) : null;
 
@@ -468,14 +466,15 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     }
   }
 
-  private onInput(): void {
+  private onInput(event: TextPrompt.TextPrompt.PromptInputEvent): void {
+    this.query = event.data;
     this.queryChanged();
     this.scheduleFilter();
   }
 
   private async queryChanged(): Promise<void> {
     if (this.queryChangedCallback) {
-      await this.queryChangedCallback(this.value());
+      await this.queryChangedCallback(this.query);
     }
     if (this.provider) {
       this.provider.queryChanged(this.cleanValue());
@@ -521,7 +520,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   }
 
   private selectItem(itemIndex: number|null): void {
-    this.promptHistory.push(this.value());
+    this.promptHistory.push(this.query);
     if (this.promptHistory.length > 100) {
       this.promptHistory.shift();
     }
@@ -603,8 +602,9 @@ export function getRegisteredProviders(): ProviderRegistration[] {
   return registeredProviders;
 }
 export interface ProviderRegistration {
-  provider: () => Promise<Provider>;
-  title?: (() => string);
   prefix: string;
   iconName: string;
+  provider: () => Promise<Provider>;
+  titlePrefix: (() => string);
+  titleSuggestion?: (() => string);
 }

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

@@ -36,10 +36,15 @@ export class HelpQuickOpen extends Provider {
   private addProvider(extension: {
     prefix: string,
     iconName: string,
-    title?: () => string,
+    titlePrefix: () => string,
+    titleSuggestion?: () => string,
   }): void {
-    if (extension.title) {
-      this.providers.push({prefix: extension.prefix || '', iconName: extension.iconName, title: extension.title()});
+    if (extension.titleSuggestion) {
+      this.providers.push({
+        prefix: extension.prefix || '',
+        iconName: extension.iconName,
+        title: extension.titlePrefix() + ' ' + extension.titleSuggestion(),
+      });
     }
   }
 
@@ -84,6 +89,7 @@ export class HelpQuickOpen extends Provider {
 registerProvider({
   prefix: '?',
   iconName: 'ic_command_help',
-  title: undefined,
   provider: () => Promise.resolve(HelpQuickOpen.instance()),
+  titlePrefix: () => 'Help',
+  titleSuggestion: undefined,
 });

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

@@ -21,15 +21,18 @@ export const history: string[] = [];
 
 export class QuickOpenImpl {
   private prefix: string|null;
-  private readonly query: string;
-  private readonly providers: Map<string, () => Promise<Provider>>;
   private readonly prefixes: string[];
+  private providers: Map<string, {
+    provider: () => Promise<Provider>,
+    titlePrefix: (() => string),
+    titleSuggestion?: (() => string),
+  }>;
   private filteredListWidget: FilteredListWidget|null;
+
   constructor() {
     this.prefix = null;
-    this.query = '';
-    this.providers = new Map();
     this.prefixes = [];
+    this.providers = new Map();
     this.filteredListWidget = null;
 
     getRegisteredProviders().forEach(this.addProvider.bind(this));
@@ -48,18 +51,27 @@ export class QuickOpenImpl {
   private addProvider(extension: {
     prefix: string,
     provider: () => Promise<Provider>,
+    titlePrefix: () => string,
+    titleSuggestion?: (() => string),
   }): void {
     const prefix = extension.prefix;
     if (prefix === null) {
       return;
     }
     this.prefixes.push(prefix);
-    this.providers.set(prefix, extension.provider);
+    this.providers.set(prefix, {
+      provider: extension.provider,
+      titlePrefix: extension.titlePrefix,
+      titleSuggestion: extension.titleSuggestion,
+    });
   }
 
   private async queryChanged(query: string): Promise<void> {
     const prefix = this.prefixes.find(prefix => query.startsWith(prefix));
     if (typeof prefix !== 'string' || this.prefix === prefix) {
+      if (query !== prefix && this.filteredListWidget) {
+        this.filteredListWidget.setCommandSuggestion('');
+      }
       return;
     }
 
@@ -68,8 +80,13 @@ export class QuickOpenImpl {
       return;
     }
     this.filteredListWidget.setPrefix(prefix);
+    const titlePrefixFunction = this.providers.get(prefix)?.titlePrefix;
+    this.filteredListWidget.setCommandPrefix(titlePrefixFunction ? titlePrefixFunction() : '');
+    const titleSuggestionFunction = this.providers.get(prefix)?.titleSuggestion;
+    this.filteredListWidget.setCommandSuggestion(titleSuggestionFunction ? titleSuggestionFunction() : '');
+
     this.filteredListWidget.setProvider(null);
-    const providerFunction = this.providers.get(prefix);
+    const providerFunction = this.providers.get(prefix)?.provider;
     if (!providerFunction) {
       return;
     }

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

@@ -27,20 +27,22 @@
   font-size: inherit;
 }
 
-.filtered-list-widget-input {
-  white-space: pre;
-  height: 18px;
-  margin-top: 12px;
-  overflow: hidden;
-  flex: auto;
-  border: 1px solid transparent;
+devtools-text-prompt {
+  flex: 0 0 40px;
+  font-size: 14px;
+  font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
+  line-height: 16px;
+  padding: 12px;
 }
 
 .filtered-list-widget-hint {
   width: 100%;
   flex: 0 0 30px;
   font-size: 12px;
-  padding: 8px 12px;
+  line-height: 30px;
+  padding: 0 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: var(--color-text-secondary);
   background: var(--color-background-elevation-1);
   border-top: 1px solid var(--color-details-hairline);
@@ -85,6 +87,7 @@
 
 .filtered-list-widget-item-wrapper devtools-icon {
   align-self: center;
+  flex: none;
   padding-right: 8px;
 }
 
@@ -94,11 +97,11 @@
 
 .filtered-list-widget-item {
   white-space: nowrap;
-  text-overflow: ellipsis;
   overflow: hidden;
+  text-overflow: ellipsis;
   align-self: center;
-  max-width: 446px;
   font-size: 12px;
+  flex: auto;
 }
 
 .filtered-list-widget-item.two-rows span.highlight {
@@ -187,17 +190,12 @@
   padding-top: 8px;
   padding-bottom: 8px;
   display: flex;
-  flex: auto;
 }
 
 .filtered-list-widget-item.one-row .filtered-list-widget-title {
   flex: none;
 }
 
-.filtered-list-widget-item.one-row .filtered-list-widget-subtitle::before {
-  content: ' ';
-}
-
 .filtered-list-widget-item.two-rows {
   height: 45px;
   padding-top: 8px;
@@ -246,7 +244,7 @@
     color: HighlightText;
   }
 
-  .filtered-list-widget-input {
+  devtools-text-prompt {
     border-color: ButtonText;
   }
 }

package/front_end/ui/legacy/filter.css

@@ -164,6 +164,7 @@
     forced-color-adjust: none;
     background: ButtonFace;
     box-shadow: var(--legacy-focus-ring-inactive-shadow);
+    color: fieldtext;
   }
 
   .filter-input-container:hover,

package/front_end/ui/legacy/tabbedPane.css

@@ -127,6 +127,10 @@
   padding-right: 4px;
 }
 
+.tabbed-pane-header-tab.preview.closeable {
+  padding-right: 5px;
+}
+
 .tabbed-pane-header-tab:hover,
 .tabbed-pane-shadow .tabbed-pane-header-tab:focus-visible {
   color: var(--color-text-primary);
@@ -316,6 +320,22 @@
   flex: none;
 }
 
+.preview-icon {
+  --override-tabbed-pane-preview-icon-color: rgb(110 110 110);
+
+  width: 14px;
+  height: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 3px;
+}
+
+.-theme-with-dark-background .preview-icon,
+:host-context(.-theme-with-dark-background) .preview-icon {
+  --override-tabbed-pane-preview-icon-color: rgb(145 145 145);
+}
+
 .close-button {
   --tabbed-pane-close-icon-color: var(--color-text-primary);
 
@@ -333,6 +353,10 @@
   background-color: var(--color-details-hairline);
 }
 
+.tabbed-pane-header-tab.preview.closeable .close-button {
+  margin-left: 0;
+}
+
 @media (forced-colors: active) {
   .tabbed-pane-tab-slider {
     forced-color-adjust: none;

package/front_end/ui/legacy/toolbar.css

@@ -417,6 +417,7 @@ devtools-icon.leading-issue-icon {
 @media (forced-colors: active) {
   .toolbar-button:disabled {
     opacity: 100%;
+    color: Graytext;
   }
 
   .toolbar-item,
@@ -424,6 +425,10 @@ devtools-icon.leading-issue-icon {
     color: ButtonText;
   }
 
+  .toolbar-button:disabled .toolbar-text {
+    color: Graytext;
+  }
+
   select.toolbar-item:disabled,
   select.toolbar-item:disabled + .toolbar-dropdown-arrow {
     opacity: 100%;

package/inspector_overlay/main.ts

@@ -21,6 +21,7 @@ import {PersistentOverlay} from './tool_persistent.js';
 // @ts-ignore Importing CSS is handled in Rollup.
 import screenshotStyle from './tool_screenshot.css'; // eslint-disable-line rulesdir/es_modules_import
 import {ScreenshotOverlay} from './tool_screenshot.js';
+import type {ScreenshotToolMessage} from './tool_screenshot.js';
 // @ts-ignore Importing CSS is handled in Rollup.
 import sourceOrderStyle from './tool_source_order.css'; // eslint-disable-line rulesdir/es_modules_import
 import {SourceOrderOverlay} from './tool_source_order.js';
@@ -30,7 +31,7 @@ declare global {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface Window {
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    InspectorOverlayHost: {send(data: PausedToolMessage|PersistentToolMessage|string): void};
+    InspectorOverlayHost: {send(data: PausedToolMessage|PersistentToolMessage|ScreenshotToolMessage|string): void};
   }
 }
 

package/inspector_overlay/tool_screenshot.ts

@@ -4,6 +4,13 @@
 
 import {Overlay} from './common.js';
 
+export type ScreenshotToolMessage = {
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+};
+
 let anchor: {x: number, y: number}|null = null;
 let position: {x: number, y: number}|null = null;
 
@@ -56,7 +63,7 @@ export class ScreenshotOverlay extends Overlay {
     if (anchor && position) {
       const rect = currentRect();
       if (rect.width >= 5 && rect.height >= 5) {
-        this.window.InspectorOverlayHost.send(JSON.stringify(rect));
+        this.window.InspectorOverlayHost.send(rect);
       }
     }
     cancel();

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.927127"
+  "version": "1.0.928589"
 }

package/scripts/build/rollup.config.js

@@ -131,6 +131,15 @@ export default commandLineArgs => ({
           return null;
         }
 
+        // The LightHouse bundle shouldn't be processed by `terser` again, as it is uniquely built
+        if (importedFilelocation.includes(
+                path.join('front_end', 'third_party', 'lighthouse', 'lighthouse-dt-bundle.js'))) {
+          return {
+            id: importedFilelocation,
+            external: true,
+          };
+        }
+
         const importedFileName = path.basename(importedFilelocation, '.js');
         const importedFileParentDirectory = path.basename(path.dirname(importedFilelocation));
         const isExternal = importedFileName === importedFileParentDirectory;