@browserless.io/browserless 2.2.0-beta-6 → 2.2.0

package/src/{routes/chromium/http/json-new.ts → shared/json-new.http.ts}

@@ -1,5 +1,6 @@
 import {
   APITags,
+  CDPJSONPayload,
   HTTPRoute,
   HTTPRoutes,
   Methods,
@@ -8,11 +9,12 @@ import {
   contentTypes,
   dedent,
   jsonResponse,
+  pageID,
 } from '@browserless.io/browserless';
-import { getCDPJSONPayload } from '../utils/cdp.js';
+import path from 'path';
 
 /*
-Example Payload from Chrome:
+Example Payload from Chromium:
 {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/2F76525C32A916DF30C4F37A4970B8BF",
@@ -23,7 +25,7 @@ Example Payload from Chrome:
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/2F76525C32A916DF30C4F37A4970B8BF"
 }
 */
-export type ResponseSchema = ReturnType<typeof getCDPJSONPayload>;
+export type ResponseSchema = CDPJSONPayload;
 
 export default class GetJSONList extends HTTPRoute {
   accepts = [contentTypes.any];
@@ -32,7 +34,7 @@ export default class GetJSONList extends HTTPRoute {
   concurrency = false;
   contentTypes = [contentTypes.json];
   description = dedent(`
-    Returns a JSON payload that acts as a pass-through to the DevTools /json/list HTTP API in Chromium.
+    Returns a JSON payload that acts as a pass-through to the DevTools /json/new HTTP API in Chromium.
     Browserless mocks this payload so that remote clients can connect to the underlying "webSocketDebuggerUrl"
     which will cause Browserless to start the browser and proxy that request into a blank page.
   `);
@@ -42,9 +44,23 @@ export default class GetJSONList extends HTTPRoute {
 
   handler = async (_req: Request, res: Response): Promise<void> => {
     const config = this.config();
-    const externalAddress = config.getExternalAddress();
-    const payload = getCDPJSONPayload(externalAddress);
+    const externalAddress = config.getExternalWebSocketAddress();
+    const id = pageID();
+    const { protocol, host, pathname, href } = new URL(
+      `/devtools/page/${id}`,
+      externalAddress,
+    );
+    const param = protocol.includes('wss') ? 'wss' : 'ws';
+    const value = path.join(host, pathname);
 
-    return jsonResponse(res, 200, payload);
+    return jsonResponse(res, 200, {
+      description: '',
+      devtoolsFrontendUrl: `/devtools/inspector.html?${param}=${value}`,
+      id,
+      title: 'New Tab',
+      type: 'page',
+      url: 'about:blank',
+      webSocketDebuggerUrl: href,
+    });
   };
 }

package/src/{routes/chromium/http/json-protocol-get.ts → shared/json-protocol.http.ts}

@@ -9,23 +9,21 @@ import {
   jsonResponse,
 } from '@browserless.io/browserless';
 
-// @TODO Figure out how to parse the Protocol JSON into a TS definition
-// for our openapi docs.
 export type ResponseSchema = object;
 
 export default class GetJSONVersion extends HTTPRoute {
+  private cachedProtocol: object | undefined;
+
   accepts = [contentTypes.any];
   auth = true;
   browser = null;
   concurrency = false;
   contentTypes = [contentTypes.json];
-  description = `Returns Protocol JSON meta-data that Chrome comes with.`;
+  description = `Returns Protocol JSON meta-data that Chrome and Chromium come with.`;
   method = Methods.get;
   path = HTTPRoutes.jsonProtocol;
   tags = [APITags.browserAPI];
 
-  private cachedProtocol: object | undefined;
-
   handler = async (_req: Request, res: Response): Promise<void> => {
     const browserManager = this.browserManager();
 

package/src/{routes/chromium/http/json-version-get.ts → shared/json-version.http.ts}

@@ -17,31 +17,30 @@ export type ResponseSchema = UnwrapPromise<
 >;
 
 export default class GetJSONVersion extends HTTPRoute {
+  private cachedJSON: ResponseSchema | undefined;
+
   accepts = [contentTypes.any];
   auth = true;
   browser = null;
   concurrency = false;
   contentTypes = [contentTypes.json];
-  description = `Returns a JSON payload that acts as a pass-through to the DevTools /json/version protocol in Chrome.`;
+  description = `Returns a JSON payload that acts as a pass-through to the DevTools /json/version protocol in Chrome and Chromium.`;
   method = Methods.get;
   path = HTTPRoutes.jsonVersion;
   tags = [APITags.browserAPI];
 
-  private cachedJSON: ResponseSchema | undefined;
-
   handler = async (req: Request, res: Response): Promise<void> => {
     const baseUrl = req.parsed.host;
     const protocol = req.parsed.protocol.includes('s') ? 'wss' : 'ws';
-    const browserManager = this.browserManager();
 
     try {
       if (!this.cachedJSON) {
+        const browserManager = this.browserManager();
         this.cachedJSON = {
           ...(await browserManager.getVersionJSON()),
           webSocketDebuggerUrl: `${protocol}://${baseUrl}`,
         };
       }
-
       return jsonResponse(res, 200, this.cachedJSON);
     } catch (err) {
       return writeResponse(

package/src/shared/page.ws.ts

@@ -0,0 +1,35 @@
+import {
+  APITags,
+  BrowserWebsocketRoute,
+  CDPLaunchOptions,
+  ChromiumCDP,
+  Request,
+  SystemQueryParameters,
+  WebsocketRoutes,
+  dedent,
+} from '@browserless.io/browserless';
+import { Duplex } from 'stream';
+
+export interface QuerySchema extends SystemQueryParameters {
+  launch?: CDPLaunchOptions | string;
+}
+
+export default class PageWebSocketRoute extends BrowserWebsocketRoute {
+  auth = true;
+  browser = ChromiumCDP;
+  concurrency = false;
+  description = dedent(
+    `Connect to an existing page in Chromium with a library like
+    chrome-remote-interface or others that work the page websocketDebugger
+    URL. You can get this unique URL by calling the /json/list API
+    or by finding the page's unique ID from your library of choice.`,
+  );
+  path = WebsocketRoutes.page;
+  tags = [APITags.browserWS];
+  handler = async (
+    req: Request,
+    socket: Duplex,
+    head: Buffer,
+    browser: ChromiumCDP,
+  ): Promise<void> => browser.proxyPageWebSocket(req, socket, head);
+}

package/src/{routes/chromium/http/pdf-post.ts → shared/pdf.http.ts}

@@ -3,8 +3,8 @@ import {
   BadRequest,
   BrowserHTTPRoute,
   BrowserInstance,
-  CDPChromium,
   CDPLaunchOptions,
+  ChromiumCDP,
   HTTPRoutes,
   Methods,
   Request,
@@ -67,7 +67,7 @@ export type ResponseSchema = string;
 export default class PDFPost extends BrowserHTTPRoute {
   accepts = [contentTypes.json];
   auth = true;
-  browser = CDPChromium;
+  browser = ChromiumCDP;
   concurrency = true;
   contentTypes = [contentTypes.pdf];
   description = dedent(`
@@ -77,7 +77,7 @@ export default class PDFPost extends BrowserHTTPRoute {
     selectors, timers and more.
   `);
   method = Methods.post;
-  path = HTTPRoutes.pdf;
+  path = [HTTPRoutes.pdf, HTTPRoutes.chromiumPdf];
   tags = [APITags.browserAPI];
   handler = async (
     req: Request,
@@ -127,7 +127,7 @@ export default class PDFPost extends BrowserHTTPRoute {
     }
 
     const page = (await browser.newPage()) as UnwrapPromise<
-      ReturnType<CDPChromium['newPage']>
+      ReturnType<ChromiumCDP['newPage']>
     >;
     const gotoCall = url ? page.goto.bind(page) : page.setContent.bind(page);
 

package/src/{routes/chromium/http/performance.ts → shared/performance.http.ts}

@@ -2,8 +2,8 @@ import {
   APITags,
   BrowserHTTPRoute,
   BrowserInstance,
-  CDPChromium,
   CDPLaunchOptions,
+  ChromiumCDP,
   HTTPRoutes,
   Methods,
   Request,
@@ -13,7 +13,7 @@ import {
 } from '@browserless.io/browserless';
 import { ServerResponse } from 'http';
 
-import main from '../utils/performance/main.js';
+import main from './utils/performance/main.js';
 
 export interface BodySchema {
   budgets?: Array<object>;
@@ -35,12 +35,12 @@ export type ResponseSchema = object;
 export default class PerformancePost extends BrowserHTTPRoute {
   accepts = [contentTypes.json];
   auth = true;
-  browser = CDPChromium;
+  browser = ChromiumCDP;
   concurrency = true;
   contentTypes = [contentTypes.json];
   description = `Run lighthouse performance audits with a supplied "url" in your JSON payload.`;
   method = Methods.post;
-  path = HTTPRoutes.performance;
+  path = [HTTPRoutes.performance, HTTPRoutes.chromiumPerformance];
   tags = [APITags.browserAPI];
   handler = async (
     req: Request,

package/src/{routes/chromium/http/scrape-post.ts → shared/scrape.http.ts}

@@ -3,8 +3,8 @@ import {
   BadRequest,
   BrowserHTTPRoute,
   BrowserInstance,
-  CDPChromium,
   CDPLaunchOptions,
+  ChromiumCDP,
   HTTPRoutes,
   InBoundRequest,
   Methods,
@@ -202,7 +202,7 @@ const scrape = async (elements: ScrapeElementSelector[]) => {
 export default class ScrapePost extends BrowserHTTPRoute {
   accepts = [contentTypes.json];
   auth = true;
-  browser = CDPChromium;
+  browser = ChromiumCDP;
   concurrency = true;
   contentTypes = [contentTypes.json];
   description = dedent(`
@@ -211,7 +211,7 @@ export default class ScrapePost extends BrowserHTTPRoute {
     property. Responds with an array of JSON objects.
   `);
   method = Methods.post;
-  path = HTTPRoutes.scrape;
+  path = [HTTPRoutes.scrape, HTTPRoutes.chromiumScrape];
   tags = [APITags.browserAPI];
   handler = async (
     req: Request,
@@ -261,7 +261,7 @@ export default class ScrapePost extends BrowserHTTPRoute {
     }
 
     const page = (await browser.newPage()) as UnwrapPromise<
-      ReturnType<CDPChromium['newPage']>
+      ReturnType<ChromiumCDP['newPage']>
     >;
     const gotoCall = url ? page.goto.bind(page) : page.setContent.bind(page);
     const messages: string[] = [];

package/src/{routes/chromium/http/screenshot-post.ts → shared/screenshot.http.ts}

@@ -3,8 +3,8 @@ import {
   BadRequest,
   BrowserHTTPRoute,
   BrowserInstance,
-  CDPChromium,
   CDPLaunchOptions,
+  ChromiumCDP,
   HTTPRoutes,
   Methods,
   Request,
@@ -69,7 +69,7 @@ export interface BodySchema {
 export default class ScreenshotPost extends BrowserHTTPRoute {
   accepts = [contentTypes.json];
   auth = true;
-  browser = CDPChromium;
+  browser = ChromiumCDP;
   concurrency = true;
   contentTypes = [contentTypes.png, contentTypes.jpeg, contentTypes.text];
   description = dedent(`
@@ -78,7 +78,7 @@ export default class ScreenshotPost extends BrowserHTTPRoute {
     cookies, user-agents, setting timers and network mocks.
   `);
   method = Methods.post;
-  path = HTTPRoutes.screenshot;
+  path = [HTTPRoutes.screenshot, HTTPRoutes.chromiumScreenshot];
   tags = [APITags.browserAPI];
   handler = async (
     req: Request,
@@ -133,7 +133,7 @@ export default class ScreenshotPost extends BrowserHTTPRoute {
     }
 
     const page = (await browser.newPage()) as UnwrapPromise<
-      ReturnType<CDPChromium['newPage']>
+      ReturnType<ChromiumCDP['newPage']>
     >;
     const gotoCall = url ? page.goto.bind(page) : page.setContent.bind(page);
 

package/src/{routes/chromium → shared}/utils/function/handler.ts

@@ -1,7 +1,7 @@
 import {
   BadRequest,
   BrowserInstance,
-  CDPChromium,
+  ChromiumCDP,
   Config,
   HTTPRoutes,
   Request,
@@ -76,7 +76,7 @@ export default (
 
     const functionCodeJS = `browserless-function-${id()}.js`;
     const page = (await browser.newPage()) as UnwrapPromise<
-      ReturnType<CDPChromium['newPage']>
+      ReturnType<ChromiumCDP['newPage']>
     >;
     await page.setRequestInterception(true);
 

package/src/{routes/chromium → shared}/utils/performance/main.ts

@@ -18,8 +18,7 @@ export default async ({
     const childPath = path.join(
       './',
       'build',
-      'routes',
-      'chromium',
+      'shared',
       'utils',
       'performance',
       'child.js',

package/src/shim.ts

@@ -36,7 +36,8 @@ export const shimLegacyRequests = (url: URL): URL => {
       typeof headless !== 'undefined' &&
       launchParams.headless === undefined
     ) {
-      launchParams.headless = headless === 'shell' ? 'shell' : headless !== 'false';
+      launchParams.headless =
+        headless === 'shell' ? 'shell' : headless !== 'false';
     }
 
     if (typeof slowMo !== 'undefined' && launchParams.slowMo === undefined) {

package/src/types.ts

@@ -3,16 +3,16 @@ import * as stream from 'stream';
 import {
   APITags,
   Browserless,
-  CDPChromium,
+  ChromiumCDP,
+  ChromiumPlaywright,
   Config,
+  FirefoxPlaywright,
   HTTPManagementRoutes,
   HTTPRoutes,
   Methods,
   Metrics,
-  PlaywrightChromium,
-  PlaywrightFirefox,
-  PlaywrightWebkit,
   Request,
+  WebkitPlaywright,
   WebsocketRoutes,
   contentTypes,
 } from '@browserless.io/browserless';
@@ -23,6 +23,12 @@ import {
   ScreenshotOptions,
 } from 'puppeteer-core';
 
+export type PathTypes =
+  | HTTPRoutes
+  | WebsocketRoutes
+  | HTTPManagementRoutes
+  | string;
+
 export interface BeforeRequest {
   head?: Buffer;
   req: Request;
@@ -38,10 +44,10 @@ export interface AfterResponse {
 
 export interface BrowserHook {
   browser:
-    | CDPChromium
-    | PlaywrightChromium
-    | PlaywrightFirefox
-    | PlaywrightWebkit;
+    | ChromiumCDP
+    | ChromiumPlaywright
+    | FirefoxPlaywright
+    | WebkitPlaywright;
   meta: URL;
 }
 
@@ -60,16 +66,16 @@ export interface RouteParams {
  * The type of browser required to run this route or handler.
  */
 export type BrowserClasses =
-  | typeof CDPChromium
-  | typeof PlaywrightChromium
-  | typeof PlaywrightFirefox
-  | typeof PlaywrightWebkit;
+  | typeof ChromiumCDP
+  | typeof ChromiumPlaywright
+  | typeof FirefoxPlaywright
+  | typeof WebkitPlaywright;
 
 export type BrowserInstance =
-  | CDPChromium
-  | PlaywrightChromium
-  | PlaywrightFirefox
-  | PlaywrightWebkit;
+  | ChromiumCDP
+  | ChromiumPlaywright
+  | FirefoxPlaywright
+  | WebkitPlaywright;
 
 export interface BrowserJSON {
   Browser: string;
@@ -184,9 +190,10 @@ abstract class Route {
   monitoring = () => this._monitoring;
 
   /**
-   * The HTTP path that this route handles, eg '/my-route'
+   * The HTTP path that this route handles, eg '/my-route' OR an
+   * array of paths that this route can handle.
    */
-  abstract path: HTTPRoutes | WebsocketRoutes | HTTPManagementRoutes | string;
+  abstract path: PathTypes | Array<PathTypes>;
 
   /**
    * The tag(s) for the route to categorize it in the
@@ -357,7 +364,7 @@ export interface BrowserlessSession {
   launchOptions: CDPLaunchOptions | BrowserServerOptions;
   numbConnected: number;
   resolver: (val: unknown) => void;
-  routePath: string;
+  routePath: string | string[];
   startedOn: number;
   ttl: number;
   userDataDir: string | null;
@@ -371,7 +378,7 @@ export interface BrowserlessSessionJSON {
   killURL: string | null;
   launchOptions: CDPLaunchOptions | BrowserServerOptions;
   numbConnected: number;
-  routePath: string;
+  routePath: string | string[];
   startedOn: number;
   timeAliveMs: number;
   userDataDir: string | null;

package/src/utils.ts

@@ -1,14 +1,16 @@
 import * as fs from 'fs/promises';
 import {
   BLESS_PAGE_IDENTIFIER,
-  CDPChromium,
+  ChromeCDP,
+  ChromePlaywright,
+  ChromiumCDP,
+  ChromiumPlaywright,
   Config,
-  PlaywrightChromium,
-  PlaywrightFirefox,
-  PlaywrightWebkit,
+  FirefoxPlaywright,
   Request,
   WaitForEventOptions,
   WaitForFunctionOptions,
+  WebkitPlaywright,
   codes,
   contentTypes,
   encodings,
@@ -54,7 +56,7 @@ export const jsExtension = '.js';
 export const id = (): string => crypto.randomUUID();
 
 /**
- * Generates a random, Chrome-compliant page ID with "BLESS"
+ * Generates a random, Chromium-compliant page ID with "BLESS"
  * prepended. This prepended text signals to other parts of the
  * system that this is a Browserless-created ID so it can be appropriately
  * handled.
@@ -297,6 +299,17 @@ export const readBody = async (
     : body;
 };
 
+/**
+ * Lists the path of Chromes (stable) install since
+ * no library or utility out there does it including playwright.
+ */
+export const chromeExecutablePath =
+  process.platform === 'win32'
+    ? `%ProgramFiles%\\Google\\Chrome\\Application\\chrome.exe`
+    : process.platform === 'darwin'
+      ? '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'
+      : '/usr/bin/google-chrome-stable';
+
 export const getRouteFiles = async (config: Config): Promise<string[][]> => {
   const routes = config.getRoutes();
   const foundRoutes: string[] = await fs
@@ -310,13 +323,13 @@ export const getRouteFiles = async (config: Config): Promise<string[][]> => {
     .catch(() => []);
 
   const [httpRouteFolders, wsRouteFolders] = foundRoutes.reduce(
-    ([http, ws]: [string[], string[]], route) => {
-      if (route.endsWith('http')) {
-        http.push(route);
+    ([http, ws]: [string[], string[]], routePath) => {
+      if (routePath.endsWith('http')) {
+        http.push(routePath);
       }
 
-      if (route.endsWith('ws')) {
-        ws.push(route);
+      if (routePath.endsWith('ws')) {
+        ws.push(routePath);
       }
 
       return [http, ws];
@@ -419,19 +432,24 @@ export const availableBrowsers = Promise.all([
   exists(playwright.chromium.executablePath()),
   exists(playwright.firefox.executablePath()),
   exists(playwright.webkit.executablePath()),
-]).then(([chromeExists, firefoxExists, webkitExists]) => {
+  exists(chromeExecutablePath),
+]).then(([chromiumExists, firefoxExists, webkitExists, chromeExists]) => {
   const availableBrowsers = [];
 
+  if (chromiumExists) {
+    availableBrowsers.push(ChromiumCDP, ChromiumPlaywright);
+  }
+
   if (chromeExists) {
-    availableBrowsers.push(...[CDPChromium, PlaywrightChromium]);
+    availableBrowsers.push(ChromeCDP, ChromePlaywright);
   }
 
   if (firefoxExists) {
-    availableBrowsers.push(PlaywrightFirefox);
+    availableBrowsers.push(FirefoxPlaywright);
   }
 
   if (webkitExists) {
-    availableBrowsers.push(PlaywrightWebkit);
+    availableBrowsers.push(WebkitPlaywright);
   }
 
   return availableBrowsers;

package/static/devtools/Images/accelerometer-back.svg

@@ -0,0 +1 @@
+<svg height="1580" width="770" xmlns="http://www.w3.org/2000/svg"><path d="m4.5 366v100" fill="none" stroke="#f80" stroke-width="9"/><path d="m4.5 768v-200" fill="none" stroke="#888" stroke-width="9"/><g fill-rule="evenodd" transform="matrix(-1 0 0 1 770.5 0)"><rect fill="#222" height="1580" rx="80" width="767"/><g fill="#fff"><rect fill-opacity=".133" height="15" rx="5" width="220" x="273.5" y="1526"/><path d="m70.363 6.95c-42.03-1.196-65.555 41.032-65.525 76.272l1.194 1424.49c.026 30.952 32.038 68.279 64.634 68.216l622.086-1.194c30.873-.06 68.216-37.263 68.216-64.634v-1434.043c0-31.282-24.689-66.72-63.137-70.302-240.933-1.145-428.109 1.195-627.468 1.195z" fill-opacity=".867"/></g></g></svg>

package/static/devtools/Images/accelerometer-front.svg

@@ -0,0 +1 @@
+<svg height="1580" width="770" xmlns="http://www.w3.org/2000/svg"><path d="m766 366v100" fill="none" stroke="#f80" stroke-width="9"/><path d="m766 768v-200" fill="none" stroke="#888" stroke-width="9"/><g fill-rule="evenodd"><g><rect fill="#222" height="1580" rx="80" width="767"/><rect fill="#fff" fill-opacity=".133" height="18" rx="5" width="80" x="343.5" y="80"/><g fill="#00f" fill-opacity=".267"><circle cx="459" cy="76.25" r="15"/><circle cx="297.25" cy="74" r="17.5"/></g></g><g fill="#fff"><rect fill-opacity=".133" height="25" rx="10" width="50" x="358.5" y="34"/><rect fill-opacity=".133" height="15" rx="5" width="220" x="273.5" y="1526"/><path d="m83.5 38c-27.7 0-50 22.3-50 50v1360c0 16.62 13.38 30 30 30h640c16.62 0 30-13.38 30-30v-1360c0-27.7-22.3-50-50-50h-140c-19.39 0-35 15.61-35 35v4c0 24.93-20.07 45-45 45h-160c-24.93 0-45-20.07-45-45v-4c0-19.39-15.61-35-35-35h-70z" fill-opacity=".867"/></g></g></svg>

package/static/devtools/Images/baseline-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 13 13"><path fill="#000" d="M1 11h11v1H1z"/><path fill="#000" fill-rule="evenodd" d="M7.273 1H5.816L2.5 9.807h1.41l.932-2.578h3.262l.873 2.578h1.492L7.273 1zM5.248 6.08l1.243-3.403 1.17 3.403H5.248z" clip-rule="evenodd"/></svg>

package/static/devtools/Images/breaking_change_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="203.28 149.413 16 16" width="16" height="16"><g fill="none"><path d="M204.498 151.182c-.218.427-.218.987-.218 2.108v5.6a104.578 104.578 0 000 .45v5.146c0 .223.27.334.427.177l2.573-2.574h7.8c1.12 0 1.68 0 2.108-.217a2 2 0 00.874-.874c.218-.428.218-.988.218-2.108v-5.6c0-1.12 0-1.68-.218-2.108a2 2 0 00-.874-.874c-.428-.218-.988-.218-2.108-.218h-7.6c-1.12 0-1.68 0-2.108.218a2 2 0 00-.874.874z" clip-rule="evenodd" fill="#f29900" fill-rule="evenodd"/><path d="M212.28 152.09h-2v4.5h2zm0 6h-2v2h2z" clip-rule="evenodd" fill="#fff" fill-rule="evenodd"/><path mask="url(#path-4-outside-2)" d="M9 5v-.5h-.5V5zm2 0h.5v-.5H11zM9 9.5h-.5v.5H9zm2 0v.5h.5v-.5zM9 11v-.5h-.5v.5zm2 0h.5v-.5H11zm-2 2h-.5v.5H9zm2 0v.5h.5V13zM9 5.5h2v-1H9zm.5 4V5h-1v4.5zM11 9H9v1h2zm-.5-4v4.5h1V5zM9 11.5h2v-1H9zm.5 1.5v-2h-1v2zm1.5-.5H9v1h2zm-.5-1.5v2h1v-2z" transform="translate(201.28 147.09)"/></g></svg>

package/static/devtools/Images/checkboxCheckmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11"><path d="M3.65 7.21L2.21 5.18 1 6.39 3.55 10 10 2.33 8.88 1z"/></svg>

package/static/devtools/Images/chevrons.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="10"><path d="M0 2.75l.965-.965 4.108 4.107L.965 10 0 9.035l3.135-3.143zM27.25 2.927l.965.965L24.108 8 20 3.892l.965-.965 3.143 3.136z"/></svg>

package/static/devtools/Images/chromeSelect.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 16"><path d="M19 11l-7.7942-7.5h15.5884L19 11z" fill="#000" fill-opacity=".83"/></svg>

package/static/devtools/Images/chromeSelectDark.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 16"><path d="M19 11l-7.7942-7.5h15.5884L19 11z" fill="#fff"/></svg>

package/static/devtools/Images/dropdown_7x6_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.529 6.529" height="24.677" width="28.457"><path d="M3.765 6.265l3.5-6h-7"/></svg>

package/static/devtools/Images/elements_panel_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16mm" width="16mm"><path d="M5.146 5.646L2.793 8l2.353 2.354.708-.708L4.207 8l1.647-1.646zm4.339-1.525l-2 8-.97-.242 2-8zm1.369 1.525L13.207 8l-2.353 2.354-.708-.708L11.793 8l-1.647-1.646z"/><path d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 112 8a6 6 0 0112 0z" clip-rule="evenodd" fill-rule="evenodd"/></svg>

package/static/devtools/Images/errorWave.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="6" height="4"><path d="M-.246.532l3.257 2.791L6.268.532" fill="none" stroke="red" stroke-width=".656" stroke-linecap="square"/></svg>

package/static/devtools/Images/error_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 10 10" height="10mm" width="10mm"><defs><linearGradient xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="scale(1.57482) rotate(-90 18 6)" x2="24" id="b"/><linearGradient id="a"><stop offset="0" stop-color="#d7687d"/><stop offset="1" stop-color="#b21402"/></linearGradient></defs><path d="M18.898 0C8.466 0 0 8.466 0 18.898c0 10.431 8.466 18.897 18.898 18.897 10.431 0 18.897-8.466 18.897-18.897C37.795 8.466 29.33 0 18.898 0" fill="url(#b)" transform="scale(.26458)"/><path d="M.36 5C.36 7.56 2.44 9.64 5 9.64c2.56 0 4.64-2.08 4.64-4.64C9.64 2.44 7.56.36 5 .36 2.44.36.36 2.44.36 5" fill="#eb3941"/><path d="M3 3l4 4M7 3L3 7" stroke="#fff" stroke-width="1.0001124"/></svg>

package/static/devtools/Images/feedback_thin_16x16_icon.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 11.5h9a1 1 0 001-1v-8a1 1 0 00-1-1H3a1 1 0 00-1 1v12l3-3zm-2 .586L4.586 10.5H14v-8H3v9.586z" fill="#000"/><path fill="#000" d="M8 4h1v3H8zm0 4h1v1H8z"/></svg>

package/static/devtools/Images/flex-align-content-center-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13" fill="none"><rect transform="matrix(-1 0 0 1 10.5 2)" rx="1" fill="#000" height="3" width="8"/><rect transform="matrix(-1 0 0 1 10.5 8)" rx="1" fill="#000" height="3" width="8"/><path fill="#000" stroke="#000" stroke-width=".971" d="M1.469 6.485h10.05v.055H1.469z"/></svg>

package/static/devtools/Images/flex-align-content-end-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 13 13"><rect width="8" height="3" fill="#000" rx="1" transform="matrix(-1 0 0 1 10.5 3.5)"/><path fill="#000" d="M10.5 8.5a1 1 0 00-1-1h-6a1 1 0 00-1 1v2h8v-2z"/><path fill="#000" d="M1 10h11v1H1z"/></svg>

package/static/devtools/Images/flex-align-content-space-around-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 13 13"><rect width="8" height="3" fill="#000" rx="1" transform="matrix(-1 0 0 1 10.5 2.75)"/><rect width="8" height="3" fill="#000" rx="1" transform="matrix(-1 0 0 1 10.5 7.25)"/><path fill="#000" d="M1 11h11v1H1zM1 1h11v1H1z"/></svg>

package/static/devtools/Images/flex-align-content-space-between-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 13 13"><path fill="#000" d="M10.5 1.5h-8v2a1 1 0 001 1h6a1 1 0 001-1v-2zm0 8a1 1 0 00-1-1h-6a1 1 0 00-1 1v2h8v-2z"/><path fill="#000" d="M1 11h11v1H1zM1 1h11v1H1z"/></svg>

package/static/devtools/Images/flex-align-content-space-evenly-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 13 13"><rect width="8" height="3" fill="#000" rx="1" transform="matrix(-1 0 0 1 10.5 3)"/><rect width="8" height="3" fill="#000" rx="1" transform="matrix(-1 0 0 1 10.5 7)"/><path fill="#000" d="M1 11h11v1H1zM1 1h11v1H1z"/></svg>

package/static/devtools/Images/flex-align-content-start-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13" fill="none"><rect y="-9.5" x="-10.5" transform="scale(-1)" rx="1" fill="#000" height="3" width="8"/><path d="M10.5 4.5a1 1 0 01-1 1h-6a1 1 0 01-1-1v-2h8z" fill="#000"/><path d="M1 3h11V2H1z" fill="#000"/></svg>