front_end/devtools_compatibility.js

// Copyright 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/* eslint-disable indent */
(function(window) {

// DevToolsAPI ----------------------------------------------------------------

const DevToolsAPIImpl = class {
  constructor() {
    /**
     * @type {number}
     */
    this._lastCallId = 0;

    /**
     * @type {!Object.<number, function(?Object)>}
     */
    this._callbacks = {};

    /**
     * @type {!Array.<!ExtensionDescriptor>}
     */
    this._pendingExtensionDescriptors = [];

    /**
     * @type {?function(!ExtensionDescriptor)}
     */
    this._addExtensionCallback = null;

    /**
     * @type {!Array<string>}
     */
    this._originsForbiddenForExtensions = [];

    /**
     * @type {!Promise<string>}
     */
    this._initialTargetIdPromise = new Promise(resolve => {
      this._setInitialTargetId = resolve;
    });
  }

  /**
   * @param {number} id
   * @param {?Object} arg
   */
  embedderMessageAck(id, arg) {
    const callback = this._callbacks[id];
    delete this._callbacks[id];
    if (callback) {
      callback(arg);
    }
  }

  /**
   * @param {string} method
   * @param {!Array.<*>} args
   * @param {?function(?Object)} callback
   */
  sendMessageToEmbedder(method, args, callback) {
    const callId = ++this._lastCallId;
    if (callback) {
      this._callbacks[callId] = callback;
    }
    const message = {'id': callId, 'method': method};
    if (args.length) {
      message.params = args;
    }
    DevToolsHost.sendMessageToEmbedder(JSON.stringify(message));
  }

  /**
   * @param {string} method
   * @param {!Array<*>} args
   */
  _dispatchOnInspectorFrontendAPI(method, args) {
    const inspectorFrontendAPI = /** @type {!Object<string, function()>} */ (window['InspectorFrontendAPI']);
    inspectorFrontendAPI[method].apply(inspectorFrontendAPI, args);
  }

  // API methods below this line --------------------------------------------

  /**
   * @param {!Array.<!ExtensionDescriptor>} extensions
   */
  addExtensions(extensions) {
    // Support for legacy front-ends (<M41).
    if (window['WebInspector'] && window['WebInspector']['addExtensions']) {
      window['WebInspector']['addExtensions'](extensions);
    } else {
      // The addExtensions command is sent as the onload event happens for
      // DevTools front-end. We should buffer this command until the frontend
      // is ready for it.
      if (this._addExtensionCallback) {
        extensions.forEach(this._addExtensionCallback);
      } else {
        this._pendingExtensionDescriptors.push(...extensions);
      }
    }
  }

  /**
   * @param {!Array<string>} forbiddenOrigins
   */
  setOriginsForbiddenForExtensions(forbiddenOrigins) {
    this._originsForbiddenForExtensions = forbiddenOrigins;
  }

  /**
   * @return {!Array<string>}
   */
  getOriginsForbiddenForExtensions() {
    return this._originsForbiddenForExtensions;
  }

  /**
   * @param {string} url
   */
  appendedToURL(url) {
    this._dispatchOnInspectorFrontendAPI('appendedToURL', [url]);
  }

  /**
   * @param {string} url
   */
  canceledSaveURL(url) {
    this._dispatchOnInspectorFrontendAPI('canceledSaveURL', [url]);
  }

  contextMenuCleared() {
    this._dispatchOnInspectorFrontendAPI('contextMenuCleared', []);
  }

  /**
   * @param {string} id
   */
  contextMenuItemSelected(id) {
    this._dispatchOnInspectorFrontendAPI('contextMenuItemSelected', [id]);
  }

  /**
   * @param {number} count
   */
  deviceCountUpdated(count) {
    this._dispatchOnInspectorFrontendAPI('deviceCountUpdated', [count]);
  }

  /**
   * @param {!Adb.Config} config
   */
  devicesDiscoveryConfigChanged(config) {
    this._dispatchOnInspectorFrontendAPI('devicesDiscoveryConfigChanged', [config]);
  }

  /**
   * @param {!Adb.PortForwardingStatus} status
   */
  devicesPortForwardingStatusChanged(status) {
    this._dispatchOnInspectorFrontendAPI('devicesPortForwardingStatusChanged', [status]);
  }

  /**
   * @param {!Array.<!Adb.Device>} devices
   */
  devicesUpdated(devices) {
    this._dispatchOnInspectorFrontendAPI('devicesUpdated', [devices]);
  }

  /**
   * @param {string} message
   */
  dispatchMessage(message) {
    this._dispatchOnInspectorFrontendAPI('dispatchMessage', [message]);
  }

  /**
   * @param {string} messageChunk
   * @param {number} messageSize
   */
  dispatchMessageChunk(messageChunk, messageSize) {
    this._dispatchOnInspectorFrontendAPI('dispatchMessageChunk', [messageChunk, messageSize]);
  }

  enterInspectElementMode() {
    this._dispatchOnInspectorFrontendAPI('enterInspectElementMode', []);
  }

  /**
   * @param {!{r: number, g: number, b: number, a: number}} color
   */
  eyeDropperPickedColor(color) {
    this._dispatchOnInspectorFrontendAPI('eyeDropperPickedColor', [color]);
  }

  /**
   * @param {!Array.<!{fileSystemName: string, rootURL: string, fileSystemPath: string}>} fileSystems
   */
  fileSystemsLoaded(fileSystems) {
    this._dispatchOnInspectorFrontendAPI('fileSystemsLoaded', [fileSystems]);
  }

  /**
   * @param {string} fileSystemPath
   */
  fileSystemRemoved(fileSystemPath) {
    this._dispatchOnInspectorFrontendAPI('fileSystemRemoved', [fileSystemPath]);
  }

  /**
   * @param {?string} error
   * @param {?{type: string, fileSystemName: string, rootURL: string, fileSystemPath: string}} fileSystem
   */
  fileSystemAdded(error, fileSystem) {
    this._dispatchOnInspectorFrontendAPI('fileSystemAdded', [error, fileSystem]);
  }

  /**
   * @param {!Array<string>} changedPaths
   * @param {!Array<string>} addedPaths
   * @param {!Array<string>} removedPaths
   */
  fileSystemFilesChangedAddedRemoved(changedPaths, addedPaths, removedPaths) {
    // Support for legacy front-ends (<M58)
    if (window['InspectorFrontendAPI'] && window['InspectorFrontendAPI']['fileSystemFilesChanged']) {
      this._dispatchOnInspectorFrontendAPI(
          'fileSystemFilesChanged', [changedPaths.concat(addedPaths).concat(removedPaths)]);
    } else {
      this._dispatchOnInspectorFrontendAPI(
          'fileSystemFilesChangedAddedRemoved', [changedPaths, addedPaths, removedPaths]);
    }
  }

  /**
   * @param {number} requestId
   * @param {string} fileSystemPath
   * @param {number} totalWork
   */
  indexingTotalWorkCalculated(requestId, fileSystemPath, totalWork) {
    this._dispatchOnInspectorFrontendAPI('indexingTotalWorkCalculated', [requestId, fileSystemPath, totalWork]);
  }

  /**
   * @param {number} requestId
   * @param {string} fileSystemPath
   * @param {number} worked
   */
  indexingWorked(requestId, fileSystemPath, worked) {
    this._dispatchOnInspectorFrontendAPI('indexingWorked', [requestId, fileSystemPath, worked]);
  }

  /**
   * @param {number} requestId
   * @param {string} fileSystemPath
   */
  indexingDone(requestId, fileSystemPath) {
    this._dispatchOnInspectorFrontendAPI('indexingDone', [requestId, fileSystemPath]);
  }

  /**
   * @param {{type: string, key: string, code: string, keyCode: number, modifiers: number}} event
   */
  keyEventUnhandled(event) {
    event.keyIdentifier = keyCodeToKeyIdentifier(event.keyCode);
    this._dispatchOnInspectorFrontendAPI('keyEventUnhandled', [event]);
  }

  /**
   * @param {function(!ExtensionDescriptor)} callback
   */
  setAddExtensionCallback(callback) {
    this._addExtensionCallback = callback;
    if (this._pendingExtensionDescriptors.length) {
      this._pendingExtensionDescriptors.forEach(this._addExtensionCallback);
      this._pendingExtensionDescriptors = [];
    }
  }

  reattachMainTarget() {
    this._dispatchOnInspectorFrontendAPI('reattachMainTarget', []);
  }

  /**
   * @param {boolean} hard
   */
  reloadInspectedPage(hard) {
    this._dispatchOnInspectorFrontendAPI('reloadInspectedPage', [hard]);
  }

  /**
   * @param {string} url
   * @param {number} lineNumber
   * @param {number} columnNumber
   */
  revealSourceLine(url, lineNumber, columnNumber) {
    this._dispatchOnInspectorFrontendAPI('revealSourceLine', [url, lineNumber, columnNumber]);
  }

  /**
   * @param {string} url
   * @param {string=} fileSystemPath
   */
  savedURL(url, fileSystemPath) {
    this._dispatchOnInspectorFrontendAPI('savedURL', [url, fileSystemPath]);
  }

  /**
   * @param {number} requestId
   * @param {string} fileSystemPath
   * @param {!Array.<string>} files
   */
  searchCompleted(requestId, fileSystemPath, files) {
    this._dispatchOnInspectorFrontendAPI('searchCompleted', [requestId, fileSystemPath, files]);
  }

  /**
   * @param {string} tabId
   */
  setInspectedTabId(tabId) {
    this._inspectedTabIdValue = tabId;

    // Support for legacy front-ends (<M41).
    if (window['WebInspector'] && window['WebInspector']['setInspectedTabId']) {
      window['WebInspector']['setInspectedTabId'](tabId);
    } else {
      this._dispatchOnInspectorFrontendAPI('setInspectedTabId', [tabId]);
    }
  }

  /**
   * @param {string} targetId
   */
  setInitialTargetId(targetId) {
    this._setInitialTargetId(targetId);
  }

  /**
   * @return {string|undefined}
   */
  getInspectedTabId() {
    return this._inspectedTabIdValue;
  }

  /**
   * @param {boolean} useSoftMenu
   */
  setUseSoftMenu(useSoftMenu) {
    this._dispatchOnInspectorFrontendAPI('setUseSoftMenu', [useSoftMenu]);
  }

  /**
   * @param {string} panelName
   */
  showPanel(panelName) {
    this._dispatchOnInspectorFrontendAPI('showPanel', [panelName]);
  }

  /**
   * @param {number} id
   * @param {string} chunk
   * @param {boolean} encoded
   */
  streamWrite(id, chunk, encoded) {
    this._dispatchOnInspectorFrontendAPI('streamWrite', [id, encoded ? this._decodeBase64(chunk) : chunk]);
  }

  /**
   * @param {string} chunk
   * @return {string}
   */
  _decodeBase64(chunk) {
    const request = new XMLHttpRequest();
    request.open('GET', 'data:text/plain;base64,' + chunk, false);
    request.send(null);
    if (request.status === 200) {
      return request.responseText;
    }
    console.error('Error while decoding chunk in streamWrite');
    return '';
  }
};

const DevToolsAPI = new DevToolsAPIImpl();
window.DevToolsAPI = DevToolsAPI;

// InspectorFrontendHostImpl --------------------------------------------------

/**
 * Enum for recordPerformanceHistogram
 * Warning: There is another definition of this enum in the DevTools code
 * base, keep them in sync:
 * front_end/core/host/InspectorFrontendHostAPI.ts
 * @readonly
 * @enum {string}
 */
const EnumeratedHistogram = {
  ActionTaken: 'DevTools.ActionTaken',
  BreakpointWithConditionAdded: 'DevTools.BreakpointWithConditionAdded',
  BreakpointEditDialogRevealedFrom: 'DevTools.BreakpointEditDialogRevealedFrom',
  CSSHintShown: 'DevTools.CSSHintShown',
  DeveloperResourceLoaded: 'DevTools.DeveloperResourceLoaded',
  DeveloperResourceScheme: 'DevTools.DeveloperResourceScheme',
  ElementsSidebarTabShown: 'DevTools.Elements.SidebarTabShown',
  ExperimentDisabled: 'DevTools.ExperimentDisabled',
  ExperimentEnabled: 'DevTools.ExperimentEnabled',
  ExperimentEnabledAtLaunch: 'DevTools.ExperimentEnabledAtLaunch',
  IssueCreated: 'DevTools.IssueCreated',
  IssuesPanelIssueExpanded: 'DevTools.IssuesPanelIssueExpanded',
  IssuesPanelOpenedFrom: 'DevTools.IssuesPanelOpenedFrom',
  IssuesPanelResourceOpened: 'DevTools.IssuesPanelResourceOpened',
  KeybindSetSettingChanged: 'DevTools.KeybindSetSettingChanged',
  KeyboardShortcutFired: 'DevTools.KeyboardShortcutFired',
  Language: 'DevTools.Language',
  LighthouseModeRun: 'DevTools.LighthouseModeRun',
  LinearMemoryInspectorRevealedFrom: 'DevTools.LinearMemoryInspector.RevealedFrom',
  LinearMemoryInspectorTarget: 'DevTools.LinearMemoryInspector.Target',
  ManifestSectionSelected: 'DevTools.ManifestSectionSelected',
  PanelClosed: 'DevTools.PanelClosed',
  PanelShown: 'DevTools.PanelShown',
  RecordingAssertion: 'DevTools.RecordingAssertion',
  RecordingCodeToggled: 'DevTools.RecordingCodeToggled',
  RecordingCopiedToClipboard: 'DevTools.RecordingCopiedToClipboard',
  RecordingEdited: 'DevTools.RecordingEdited',
  RecordingExported: 'DevTools.RecordingExported',
  RecordingReplayFinished: 'DevTools.RecordingReplayFinished',
  RecordingReplaySpeed: 'DevTools.RecordingReplaySpeed',
  RecordingReplayStarted: 'DevTools.RecordingReplayStarted',
  RecordingToggled: 'DevTools.RecordingToggled',
  SidebarPaneShown: 'DevTools.SidebarPaneShown',
  SourcesSidebarTabShown: 'DevTools.Sources.SidebarTabShown',
  SourcesPanelFileDebugged: 'DevTools.SourcesPanelFileDebugged',
  SourcesPanelFileOpened: 'DevTools.SourcesPanelFileOpened',
  NetworkPanelResponsePreviewOpened: 'DevTools.NetworkPanelResponsePreviewOpened',
  StyleTextCopied: 'DevTools.StyleTextCopied',
  SyncSetting: 'DevTools.SyncSetting',
  ColorConvertedFrom: 'DevTools.ColorConvertedFrom',
  ColorPickerOpenedFrom: 'DevTools.ColorPickerOpenedFrom',
  CSSPropertyDocumentation: 'DevTools.CSSPropertyDocumentation',
  InlineScriptParsed: 'DevTools.InlineScriptParsed',
  VMInlineScriptTypeShown: 'DevTools.VMInlineScriptShown',
  BreakpointsRestoredFromStorageCount: 'DevTools.BreakpointsRestoredFromStorageCount',
  SwatchActivated: 'DevTools.SwatchActivated',
};

/**
 * @implements {InspectorFrontendHostAPI}
 */
const InspectorFrontendHostImpl = class {
  /**
   * @return {string}
   */
  getSelectionBackgroundColor() {
    return '#6e86ff';
  }

  /**
   * @return {string}
   */
  getSelectionForegroundColor() {
    return '#ffffff';
  }

  /**
   * @return {string}
   */
  getInactiveSelectionBackgroundColor() {
    return '#c9c8c8';
  }

  /**
   * @return {string}
   */
  getInactiveSelectionForegroundColor() {
    return '#323232';
  }

  /**
   * @override
   * @return {string}
   */
  platform() {
    return DevToolsHost.platform();
  }

  /**
   * @override
   */
  loadCompleted() {
    DevToolsAPI.sendMessageToEmbedder('loadCompleted', [], null);
    // Support for legacy (<57) frontends.
    if (window.Runtime && window.Runtime.queryParam) {
      const panelToOpen = window.Runtime.queryParam('panel');
      if (panelToOpen) {
        window.DevToolsAPI.showPanel(panelToOpen);
      }
    }
  }

  /**
   * @override
   */
  bringToFront() {
    DevToolsAPI.sendMessageToEmbedder('bringToFront', [], null);
  }

  /**
   * @override
   */
  closeWindow() {
    DevToolsAPI.sendMessageToEmbedder('closeWindow', [], null);
  }

  /**
   * @override
   * @param {boolean} isDocked
   * @param {function()} callback
   */
  setIsDocked(isDocked, callback) {
    DevToolsAPI.sendMessageToEmbedder('setIsDocked', [isDocked], callback);
  }

  /**
   * @override
   * @param {string} trigger
   * @param {function(!InspectorFrontendHostAPI.ShowSurveyResult): void} callback
   */
  showSurvey(trigger, callback) {
    DevToolsAPI.sendMessageToEmbedder('showSurvey', [trigger], /** @type {function(?Object)} */ (callback));
  }

  /**
   * @override
   * @param {string} trigger
   * @param {function(!InspectorFrontendHostAPI.CanShowSurveyResult): void} callback
   */
  canShowSurvey(trigger, callback) {
    DevToolsAPI.sendMessageToEmbedder('canShowSurvey', [trigger], /** @type {function(?Object)} */ (callback));
  }

  /**
   * Requests inspected page to be placed atop of the inspector frontend with specified bounds.
   * @override
   * @param {{x: number, y: number, width: number, height: number}} bounds
   */
  setInspectedPageBounds(bounds) {
    DevToolsAPI.sendMessageToEmbedder('setInspectedPageBounds', [bounds], null);
  }

  /**
   * @override
   */
  inspectElementCompleted() {
    DevToolsAPI.sendMessageToEmbedder('inspectElementCompleted', [], null);
  }

  /**
   * @override
   * @param {string} url
   * @param {string} headers
   * @param {number} streamId
   * @param {function(!InspectorFrontendHostAPI.LoadNetworkResourceResult): void} callback
   */
  loadNetworkResource(url, headers, streamId, callback) {
    DevToolsAPI.sendMessageToEmbedder(
        'loadNetworkResource', [url, headers, streamId], /** @type {function(?Object)} */ (callback));
  }

  /**
   * @override
   * @param {string} name
   * @param {!{synced: (boolean|undefined)}} options
   */
  registerPreference(name, options) {
    DevToolsAPI.sendMessageToEmbedder('registerPreference', [name, options], null);
  }

  /**
   * @override
   * @param {function(!Object<string, string>)} callback
   */
  getPreferences(callback) {
    DevToolsAPI.sendMessageToEmbedder('getPreferences', [], /** @type {function(?Object)} */ (callback));
  }

  /**
   * @override
   * @param {string} name
   * @param {function(string)} callback
   */
  getPreference(name, callback) {
    DevToolsAPI.sendMessageToEmbedder('getPreference', [name], /** @type {function(string)} */ (callback));
  }

  /**
   * @override
   * @param {string} name
   * @param {string} value
   */
  setPreference(name, value) {
    DevToolsAPI.sendMessageToEmbedder('setPreference', [name, value], null);
  }

  /**
   * @override
   * @param {string} name
   */
  removePreference(name) {
    DevToolsAPI.sendMessageToEmbedder('removePreference', [name], null);
  }

  /**
   * @override
   */
  clearPreferences() {
    DevToolsAPI.sendMessageToEmbedder('clearPreferences', [], null);
  }

  /**
   * @override
   * @param {!function(!InspectorFrontendHostAPI.SyncInformation):void} callback
   */
  getSyncInformation(callback) {
    DevToolsAPI.sendMessageToEmbedder('getSyncInformation', [], callback);
  }

  /**
   * @override
   * @param {string} origin
   * @param {string} script
   */
  setInjectedScriptForOrigin(origin, script) {
    DevToolsAPI.sendMessageToEmbedder('registerExtensionsAPI', [origin, script], null);
  }

  /**
   * @override
   * @param {string} url
   */
  inspectedURLChanged(url) {
    DevToolsAPI.sendMessageToEmbedder('inspectedURLChanged', [url], null);
  }

  /**
   * @override
   * @param {string} text
   */
  copyText(text) {
    DevToolsHost.copyText(text);
  }

  /**
   * @override
   * @param {string} url
   */
  openInNewTab(url) {
    DevToolsAPI.sendMessageToEmbedder('openInNewTab', [url], null);
  }

  /**
   * @override
   * @param {string} fileSystemPath
   */
  showItemInFolder(fileSystemPath) {
    DevToolsAPI.sendMessageToEmbedder('showItemInFolder', [fileSystemPath], null);
  }

  /**
   * @override
   * @param {string} url
   * @param {string} content
   * @param {boolean} forceSaveAs
   */
  save(url, content, forceSaveAs) {
    DevToolsAPI.sendMessageToEmbedder('save', [url, content, forceSaveAs], null);
  }

  /**
   * @override
   * @param {string} url
   * @param {string} content
   */
  append(url, content) {
    DevToolsAPI.sendMessageToEmbedder('append', [url, content], null);
  }

  /**
   * @override
   * @param {string} url
   */
  close(url) {
  }

  /**
   * @override
   * @param {string} message
   */
  sendMessageToBackend(message) {
    DevToolsAPI.sendMessageToEmbedder('dispatchProtocolMessage', [message], null);
  }

  /**
   * @override
   * @param {!InspectorFrontendHostAPI.EnumeratedHistogram} actionName
   * @param {number} actionCode
   * @param {number} bucketSize
   */
  recordEnumeratedHistogram(actionName, actionCode, bucketSize) {
    if (!Object.values(EnumeratedHistogram).includes(actionName)) {
      return;
    }
    DevToolsAPI.sendMessageToEmbedder('recordEnumeratedHistogram', [actionName, actionCode, bucketSize], null);
  }

  /**
   * @override
   * @param {string} histogramName
   * @param {number} duration
   */
  recordPerformanceHistogram(histogramName, duration) {
    DevToolsAPI.sendMessageToEmbedder('recordPerformanceHistogram', [histogramName, duration], null);
  }

  /**
   * @override
   * @param {string} umaName
   */
  recordUserMetricsAction(umaName) {
    DevToolsAPI.sendMessageToEmbedder('recordUserMetricsAction', [umaName], null);
  }

  /**
   * @override
   */
  requestFileSystems() {
    DevToolsAPI.sendMessageToEmbedder('requestFileSystems', [], null);
  }

  /**
   * @override
   * @param {string=} type
   */
  addFileSystem(type) {
    DevToolsAPI.sendMessageToEmbedder('addFileSystem', [type || ''], null);
  }

  /**
   * @override
   * @param {string} fileSystemPath
   */
  removeFileSystem(fileSystemPath) {
    DevToolsAPI.sendMessageToEmbedder('removeFileSystem', [fileSystemPath], null);
  }

  /**
   * @override
   * @param {string} fileSystemId
   * @param {string} registeredName
   * @return {?FileSystem}
   */
  isolatedFileSystem(fileSystemId, registeredName) {
    return DevToolsHost.isolatedFileSystem(fileSystemId, registeredName);
  }

  /**
   * @override
   * @param {!FileSystem} fileSystem
   */
  upgradeDraggedFileSystemPermissions(fileSystem) {
    DevToolsHost.upgradeDraggedFileSystemPermissions(fileSystem);
  }

  /**
   * @override
   * @param {number} requestId
   * @param {string} fileSystemPath
   * @param {string} excludedFolders
   */
  indexPath(requestId, fileSystemPath, excludedFolders) {
    // |excludedFolders| added in M67. For backward compatibility,
    // pass empty array.
    excludedFolders = excludedFolders || '[]';
    DevToolsAPI.sendMessageToEmbedder('indexPath', [requestId, fileSystemPath, excludedFolders], null);
  }

  /**
   * @override
   * @param {number} requestId
   */
  stopIndexing(requestId) {
    DevToolsAPI.sendMessageToEmbedder('stopIndexing', [requestId], null);
  }

  /**
   * @override
   * @param {number} requestId
   * @param {string} fileSystemPath
   * @param {string} query
   */
  searchInPath(requestId, fileSystemPath, query) {
    DevToolsAPI.sendMessageToEmbedder('searchInPath', [requestId, fileSystemPath, query], null);
  }

  /**
   * @override
   * @return {number}
   */
  zoomFactor() {
    return DevToolsHost.zoomFactor();
  }

  /**
   * @override
   */
  zoomIn() {
    DevToolsAPI.sendMessageToEmbedder('zoomIn', [], null);
  }

  /**
   * @override
   */
  zoomOut() {
    DevToolsAPI.sendMessageToEmbedder('zoomOut', [], null);
  }

  /**
   * @override
   */
  resetZoom() {
    DevToolsAPI.sendMessageToEmbedder('resetZoom', [], null);
  }

  /**
   * @override
   * @param {string} shortcuts
   */
  setWhitelistedShortcuts(shortcuts) {
    DevToolsAPI.sendMessageToEmbedder('setWhitelistedShortcuts', [shortcuts], null);
  }

  /**
   * @override
   * @param {boolean} active
   */
  setEyeDropperActive(active) {
    DevToolsAPI.sendMessageToEmbedder('setEyeDropperActive', [active], null);
  }

  /**
   * @override
   * @param {!Array<string>} certChain
   */
  showCertificateViewer(certChain) {
    DevToolsAPI.sendMessageToEmbedder('showCertificateViewer', [JSON.stringify(certChain)], null);
  }

  /**
   * Only needed to run Lighthouse on old devtools.
   * @override
   * @param {function()} callback
   */
  reattach(callback) {
    DevToolsAPI.sendMessageToEmbedder('reattach', [], callback);
  }

  /**
   * @override
   */
  readyForTest() {
    DevToolsAPI.sendMessageToEmbedder('readyForTest', [], null);
  }

  /**
   * @override
   */
  connectionReady() {
    DevToolsAPI.sendMessageToEmbedder('connectionReady', [], null);
  }

  /**
   * @override
   * @param {boolean} value
   */
  setOpenNewWindowForPopups(value) {
    DevToolsAPI.sendMessageToEmbedder('setOpenNewWindowForPopups', [value], null);
  }

  /**
   * @override
   * @param {!Adb.Config} config
   */
  setDevicesDiscoveryConfig(config) {
    DevToolsAPI.sendMessageToEmbedder(
        'setDevicesDiscoveryConfig',
        [
          config.discoverUsbDevices, config.portForwardingEnabled, JSON.stringify(config.portForwardingConfig),
          config.networkDiscoveryEnabled, JSON.stringify(config.networkDiscoveryConfig)
        ],
        null);
  }

  /**
   * @override
   * @param {boolean} enabled
   */
  setDevicesUpdatesEnabled(enabled) {
    DevToolsAPI.sendMessageToEmbedder('setDevicesUpdatesEnabled', [enabled], null);
  }

  /**
   * @override
   * @param {string} pageId
   * @param {string} action
   */
  performActionOnRemotePage(pageId, action) {
    DevToolsAPI.sendMessageToEmbedder('performActionOnRemotePage', [pageId, action], null);
  }

  /**
   * @override
   * @param {string} browserId
   * @param {string} url
   */
  openRemotePage(browserId, url) {
    DevToolsAPI.sendMessageToEmbedder('openRemotePage', [browserId, url], null);
  }

  /**
   * @override
   */
  openNodeFrontend() {
    DevToolsAPI.sendMessageToEmbedder('openNodeFrontend', [], null);
  }

  /**
   * @override
   * @param {number} x
   * @param {number} y
   * @param {!Array.<!InspectorFrontendHostAPI.ContextMenuDescriptor>} items
   * @param {!Document} document
   */
  showContextMenuAtPoint(x, y, items, document) {
    DevToolsHost.showContextMenuAtPoint(x, y, items, document);
  }

  /**
   * @override
   * @return {boolean}
   */
  isHostedMode() {
    return DevToolsHost.isHostedMode();
  }

  /**
   * @override
   * @param {function(!ExtensionDescriptor)} callback
   */
  setAddExtensionCallback(callback) {
    DevToolsAPI.setAddExtensionCallback(callback);
  }

  // Backward-compatible methods below this line --------------------------------------------

  /**
   * Support for legacy front-ends (<M65).
   * @return {boolean}
   */
  isUnderTest() {
    return false;
  }

  /**
   * Support for legacy front-ends (<M50).
   * @param {string} message
   */
  sendFrontendAPINotification(message) {
  }

  /**
   * Support for legacy front-ends (<M41).
   * @return {string}
   */
  port() {
    return 'unknown';
  }

  /**
   * Support for legacy front-ends (<M38).
   * @param {number} zoomFactor
   */
  setZoomFactor(zoomFactor) {
  }

  /**
   * Support for legacy front-ends (<M34).
   */
  sendMessageToEmbedder() {
  }

  /**
   * Support for legacy front-ends (<M34).
   * @param {string} dockSide
   */
  requestSetDockSide(dockSide) {
    DevToolsAPI.sendMessageToEmbedder('setIsDocked', [dockSide !== 'undocked'], null);
  }

  /**
   * Support for legacy front-ends (<M34).
   * @return {boolean}
   */
  supportsFileSystems() {
    return true;
  }

  /**
   * Support for legacy front-ends (<M44).
   * @param {number} actionCode
   */
  recordActionTaken(actionCode) {
    // Do not record actions, as that may crash the DevTools renderer.
  }

  /**
   * Support for legacy front-ends (<M44).
   * @param {number} panelCode
   */
  recordPanelShown(panelCode) {
    // Do not record actions, as that may crash the DevTools renderer.
  }

  /**
   * @return {!Promise<string>}
   */
  initialTargetId() {
    return DevToolsAPI._initialTargetIdPromise;
  }
};

window.InspectorFrontendHost = new InspectorFrontendHostImpl();

// DevToolsApp ---------------------------------------------------------------

function installObjectObserve() {
  /** @type {!Array<string>} */
  const properties = [
    'advancedSearchConfig',
    'auditsPanelSplitViewState',
    'auditsSidebarWidth',
    'blockedURLs',
    'breakpoints',
    'cacheDisabled',
    'colorFormat',
    'consoleHistory',
    'consoleTimestampsEnabled',
    'cpuProfilerView',
    'cssSourceMapsEnabled',
    'currentDockState',
    'customColorPalette',
    'customDevicePresets',
    'customEmulatedDeviceList',
    'customFormatters',
    'customUserAgent',
    'databaseTableViewVisibleColumns',
    'dataGrid-cookiesTable',
    'dataGrid-DOMStorageItemsView',
    'debuggerSidebarHidden',
    'disablePausedStateOverlay',
    'domBreakpoints',
    'domWordWrap',
    'elementsPanelSplitViewState',
    'elementsSidebarWidth',
    'emulation.deviceHeight',
    'emulation.deviceModeValue',
    'emulation.deviceOrientationOverride',
    'emulation.deviceScale',
    'emulation.deviceScaleFactor',
    'emulation.deviceUA',
    'emulation.deviceWidth',
    'emulation.locationOverride',
    'emulation.showDeviceMode',
    'emulation.showRulers',
    'enableAsyncStackTraces',
    'enableIgnoreListing',
    'eventListenerBreakpoints',
    'fileMappingEntries',
    'fileSystemMapping',
    'FileSystemViewSidebarWidth',
    'fileSystemViewSplitViewState',
    'filterBar-consoleView',
    'filterBar-networkPanel',
    'filterBar-promisePane',
    'filterBar-timelinePanel',
    'frameViewerHideChromeWindow',
    'heapSnapshotRetainersViewSize',
    'heapSnapshotSplitViewState',
    'hideCollectedPromises',
    'hideNetworkMessages',
    'highlightNodeOnHoverInOverlay',
    'inlineVariableValues',
    'Inspector.drawerSplitView',
    'Inspector.drawerSplitViewState',
    'InspectorView.panelOrder',
    'InspectorView.screencastSplitView',
    'InspectorView.screencastSplitViewState',
    'InspectorView.splitView',
    'InspectorView.splitViewState',
    'javaScriptDisabled',
    'jsSourceMapsEnabled',
    'lastActivePanel',
    'lastDockState',
    'lastSelectedSourcesSidebarPaneTab',
    'lastSnippetEvaluationIndex',
    'layerDetailsSplitView',
    'layerDetailsSplitViewState',
    'layersPanelSplitViewState',
    'layersShowInternalLayers',
    'layersSidebarWidth',
    'messageLevelFilters',
    'messageURLFilters',
    'monitoringXHREnabled',
    'navigatorGroupByAuthored',
    'navigatorGroupByFolder',
    'navigatorHidden',
    'networkColorCodeResourceTypes',
    'networkConditions',
    'networkConditionsCustomProfiles',
    'networkHideDataURL',
    'networkLogColumnsVisibility',
    'networkLogLargeRows',
    'networkLogShowOverview',
    'networkPanelSplitViewState',
    'networkRecordFilmStripSetting',
    'networkResourceTypeFilters',
    'networkShowPrimaryLoadWaterfall',
    'networkSidebarWidth',
    'openLinkHandler',
    'pauseOnUncaughtException',
    'pauseOnCaughtException',
    'pauseOnExceptionEnabled',
    'preserveConsoleLog',
    'prettyPrintInfobarDisabled',
    'previouslyViewedFiles',
    'profilesPanelSplitViewState',
    'profilesSidebarWidth',
    'promiseStatusFilters',
    'recordAllocationStacks',
    'requestHeaderFilterSetting',
    'request-info-formData-category-expanded',
    'request-info-general-category-expanded',
    'request-info-queryString-category-expanded',
    'request-info-requestHeaders-category-expanded',
    'request-info-requestPayload-category-expanded',
    'request-info-responseHeaders-category-expanded',
    'resources',
    'resourcesLastSelectedItem',
    'resourcesPanelSplitViewState',
    'resourcesSidebarWidth',
    'resourceViewTab',
    'savedURLs',
    'screencastEnabled',
    'scriptsPanelNavigatorSidebarWidth',
    'searchInContentScripts',
    'selectedAuditCategories',
    'selectedColorPalette',
    'selectedProfileType',
    'shortcutPanelSwitch',
    'showAdvancedHeapSnapshotProperties',
    'showEventListenersForAncestors',
    'showFrameowkrListeners',
    'showHeaSnapshotObjectsHiddenProperties',
    'showInheritedComputedStyleProperties',
    'showMediaQueryInspector',
    'showNativeFunctionsInJSProfile',
    'showUAShadowDOM',
    'showWhitespacesInEditor',
    'sidebarPosition',
    'skipContentScripts',
    'automaticallyIgnoreListKnownThirdPartyScripts',
    'skipStackFramesPattern',
    'sourceMapInfobarDisabled',
    'sourcesPanelDebuggerSidebarSplitViewState',
    'sourcesPanelNavigatorSplitViewState',
    'sourcesPanelSplitSidebarRatio',
    'sourcesPanelSplitViewState',
    'sourcesSidebarWidth',
    'standardEmulatedDeviceList',
    'StylesPaneSplitRatio',
    'stylesPaneSplitViewState',
    'textEditorAutocompletion',
    'textEditorAutoDetectIndent',
    'textEditorBracketMatching',
    'textEditorIndent',
    'textEditorTabMovesFocus',
    'timelineCaptureFilmStrip',
    'timelineCaptureLayersAndPictures',
    'timelineCaptureMemory',
    'timelineCaptureNetwork',
    'timeline-details',
    'timelineEnableJSSampling',
    'timelineOverviewMode',
    'timelinePanelDetailsSplitViewState',
    'timelinePanelRecorsSplitViewState',
    'timelinePanelTimelineStackSplitViewState',
    'timelinePerspective',
    'timeline-split',
    'timelineTreeGroupBy',
    'timeline-view',
    'timelineViewMode',
    'uiTheme',
    'watchExpressions',
    'WebInspector.Drawer.lastSelectedView',
    'WebInspector.Drawer.showOnLoad',
    'workspaceExcludedFolders',
    'workspaceFolderExcludePattern',
    'workspaceInfobarDisabled',
    'workspaceMappingInfobarDisabled',
    'xhrBreakpoints'
  ];

  /**
   * @this {!{_storage: Object, _name: string}}
   */
  function settingRemove() {
    this._storage[this._name] = undefined;
  }

  /**
   * @param {!Object} object
   * @param {function(!Array<!{name: string}>)} observer
   */
  function objectObserve(object, observer) {
    if (window['WebInspector']) {
      const settingPrototype = /** @type {!Object} */ (window['WebInspector']['Setting']['prototype']);
      if (typeof settingPrototype['remove'] === 'function') {
        settingPrototype['remove'] = settingRemove;
      }
    }
    /** @type {!Set<string>} */
    const changedProperties = new Set();
    let scheduled = false;

    function scheduleObserver() {
      if (scheduled) {
        return;
      }
      scheduled = true;
      queueMicrotask(callObserver);
    }

    function callObserver() {
      scheduled = false;
      const changes = /** @type {!Array<!{name: string}>} */ ([]);
      changedProperties.forEach(function(name) {
        changes.push({name: name});
      });
      changedProperties.clear();
      observer.call(null, changes);
    }

    /** @type {!Map<string, *>} */
    const storage = new Map();

    /**
     * @param {string} property
     */
    function defineProperty(property) {
      if (property in object) {
        storage.set(property, object[property]);
        delete object[property];
      }

      Object.defineProperty(object, property, {
        /**
         * @return {*}
         */
        get: function() {
          return storage.get(property);
        },

        /**
         * @param {*} value
         */
        set: function(value) {
          storage.set(property, value);
          changedProperties.add(property);
          scheduleObserver();
        }
      });
    }

    for (let i = 0; i < properties.length; ++i) {
      defineProperty(properties[i]);
    }
  }

  window.Object.observe = objectObserve;
}

/** @type {!Map<number, string>} */
const staticKeyIdentifiers = new Map([
  [0x12, 'Alt'],
  [0x11, 'Control'],
  [0x10, 'Shift'],
  [0x14, 'CapsLock'],
  [0x5b, 'Win'],
  [0x5c, 'Win'],
  [0x0c, 'Clear'],
  [0x28, 'Down'],
  [0x23, 'End'],
  [0x0a, 'Enter'],
  [0x0d, 'Enter'],
  [0x2b, 'Execute'],
  [0x70, 'F1'],
  [0x71, 'F2'],
  [0x72, 'F3'],
  [0x73, 'F4'],
  [0x74, 'F5'],
  [0x75, 'F6'],
  [0x76, 'F7'],
  [0x77, 'F8'],
  [0x78, 'F9'],
  [0x79, 'F10'],
  [0x7a, 'F11'],
  [0x7b, 'F12'],
  [0x7c, 'F13'],
  [0x7d, 'F14'],
  [0x7e, 'F15'],
  [0x7f, 'F16'],
  [0x80, 'F17'],
  [0x81, 'F18'],
  [0x82, 'F19'],
  [0x83, 'F20'],
  [0x84, 'F21'],
  [0x85, 'F22'],
  [0x86, 'F23'],
  [0x87, 'F24'],
  [0x2f, 'Help'],
  [0x24, 'Home'],
  [0x2d, 'Insert'],
  [0x25, 'Left'],
  [0x22, 'PageDown'],
  [0x21, 'PageUp'],
  [0x13, 'Pause'],
  [0x2c, 'PrintScreen'],
  [0x27, 'Right'],
  [0x91, 'Scroll'],
  [0x29, 'Select'],
  [0x26, 'Up'],
  [0x2e, 'U+007F'],  // Standard says that DEL becomes U+007F.
  [0xb0, 'MediaNextTrack'],
  [0xb1, 'MediaPreviousTrack'],
  [0xb2, 'MediaStop'],
  [0xb3, 'MediaPlayPause'],
  [0xad, 'VolumeMute'],
  [0xae, 'VolumeDown'],
  [0xaf, 'VolumeUp'],
]);

/**
 * @param {number} keyCode
 * @return {string}
 */
function keyCodeToKeyIdentifier(keyCode) {
  let result = staticKeyIdentifiers.get(keyCode);
  if (result !== undefined) {
    return result;
  }
  result = 'U+';
  const hexString = keyCode.toString(16).toUpperCase();
  for (let i = hexString.length; i < 4; ++i) {
    result += '0';
  }
  result += hexString;
  return result;
}

function installBackwardsCompatibility() {
  const majorVersion = getRemoteMajorVersion();
  if (!majorVersion) {
    return;
  }

  /** @type {!Array<string>} */
  const styleRules = [];
  // Shadow DOM V0 polyfill
  if (majorVersion <= 73 && !Element.prototype.createShadowRoot) {
    Element.prototype.createShadowRoot = function() {
      try {
        return this.attachShadow({mode: 'open'});
      } catch (e) {
        // some elements we use to add shadow roots can no
        // longer have shadow roots.
        const fakeShadowHost = document.createElement('span');
        this.appendChild(fakeShadowHost);
        fakeShadowHost.className = 'fake-shadow-host';
        return fakeShadowHost.createShadowRoot();
      }
    };

    const origAdd = DOMTokenList.prototype.add;
    DOMTokenList.prototype.add = function(...tokens) {
      if (tokens[0].startsWith('insertion-point') || tokens[0].startsWith('tabbed-pane-header')) {
        this._myElement.slot = '.' + tokens[0];
      }
      return origAdd.apply(this, tokens);
    };

    const origCreateElement = Document.prototype.createElement;
    Document.prototype.createElement = function(tagName, ...rest) {
      if (tagName === 'content') {
        tagName = 'slot';
      }
      const element = origCreateElement.call(this, tagName, ...rest);
      element.classList._myElement = element;
      return element;
    };

    Object.defineProperty(HTMLSlotElement.prototype, 'select', {
      set(selector) {
        this.name = selector;
      }
    });
  }

  // Custom Elements V0 polyfill
  if (majorVersion <= 73 && !Document.prototype.hasOwnProperty('registerElement')) {
    const fakeRegistry = new Map();
    Document.prototype.registerElement = function(typeExtension, options) {
      const {prototype, extends: localName} = options;
      const document = this;
      const callback = function() {
        const element = document.createElement(localName || typeExtension);
        const skip = new Set(['constructor', '__proto__']);
        for (const key of Object.keys(Object.getOwnPropertyDescriptors(prototype.__proto__ || {}))) {
          if (skip.has(key)) {
            continue;
          }
          element[key] = prototype[key];
        }
        element.setAttribute('is', typeExtension);
        if (element['createdCallback']) {
          element['createdCallback']();
        }
        return element;
      };
      fakeRegistry.set(typeExtension, callback);
      return callback;
    };

    const origCreateElement = Document.prototype.createElement;
    Document.prototype.createElement = function(tagName, fakeCustomElementType) {
      const fakeConstructor = fakeRegistry.get(fakeCustomElementType);
      if (fakeConstructor) {
        return fakeConstructor();
      }
      return origCreateElement.call(this, tagName, fakeCustomElementType);
    };

    // DevTools front-ends mistakenly assume that
    //   classList.toggle('a', undefined) works as
    //   classList.toggle('a', false) rather than as
    //   classList.toggle('a');
    const originalDOMTokenListToggle = DOMTokenList.prototype.toggle;
    DOMTokenList.prototype.toggle = function(token, force) {
      if (arguments.length === 1) {
        force = !this.contains(token);
      }
      return originalDOMTokenListToggle.call(this, token, Boolean(force));
    };
  }

  if (majorVersion <= 66) {
    /** @type {(!function(number, number):Element|undefined)} */
    ShadowRoot.prototype.__originalShadowRootElementFromPoint;

    if (!ShadowRoot.prototype.__originalShadowRootElementFromPoint) {
      ShadowRoot.prototype.__originalShadowRootElementFromPoint = ShadowRoot.prototype.elementFromPoint;
      /**
       *  @param {number} x
       *  @param {number} y
       *  @return {Element}
       */
      ShadowRoot.prototype.elementFromPoint = function(x, y) {
        const originalResult = ShadowRoot.prototype.__originalShadowRootElementFromPoint.apply(this, arguments);
        if (this.host && originalResult === this.host) {
          return null;
        }
        return originalResult;
      };
    }
  }

  if (majorVersion <= 53) {
    Object.defineProperty(window.KeyboardEvent.prototype, 'keyIdentifier', {
      /**
       * @return {string}
       * @this {KeyboardEvent}
       */
      get: function() {
        return keyCodeToKeyIdentifier(this.keyCode);
      }
    });
  }

  if (majorVersion <= 50) {
    installObjectObserve();
  }

  if (majorVersion <= 71) {
    styleRules.push(
        '.coverage-toolbar-container, .animation-timeline-toolbar-container, .computed-properties { flex-basis: auto; }');
  }

  if (majorVersion <= 50) {
    Event.prototype.deepPath = undefined;
  }

  if (majorVersion <= 54) {
    window.FileError = /** @type {!function (new: FileError) : ?} */ ({
      NOT_FOUND_ERR: DOMException.NOT_FOUND_ERR,
      ABORT_ERR: DOMException.ABORT_ERR,
      INVALID_MODIFICATION_ERR: DOMException.INVALID_MODIFICATION_ERR,
      NOT_READABLE_ERR: 0  // No matching DOMException, so code will be 0.
    });
  }

  installExtraStyleRules(styleRules);
}

/**
 * @return {?number}
 */
function getRemoteMajorVersion() {
  try {
    const remoteVersion = new URLSearchParams(window.location.search).get('remoteVersion');
    if (!remoteVersion) {
      return null;
    }
    const majorVersion = parseInt(remoteVersion.split('.')[0], 10);
    return majorVersion;
  } catch (e) {
    return null;
  }
}

/**
 * @param {!Array<string>} styleRules
 */
function installExtraStyleRules(styleRules) {
  if (!styleRules.length) {
    return;
  }
  const styleText = styleRules.join('\n');
  document.head.appendChild(createStyleElement(styleText));

  const origCreateShadowRoot = HTMLElement.prototype.createShadowRoot;
  HTMLElement.prototype.createShadowRoot = function(...args) {
    const shadowRoot = origCreateShadowRoot.call(this, ...args);
    shadowRoot.appendChild(createStyleElement(styleText));
    return shadowRoot;
  };
}

/**
 * @param {string} styleText
 * @return {!Element}
 */
function createStyleElement(styleText) {
  const style = document.createElement('style');
  style.textContent = styleText;
  return style;
}

installBackwardsCompatibility();
})(window);