chrome-devtools-frontend 1.0.1534251 → 1.0.1535712

package/front_end/devtools_compatibility.js

@@ -13,6 +13,7 @@
    *
    * @returns {number|null}
    */
+
   function getRemoteMajorVersion() {
     try {
       const remoteVersion = new URLSearchParams(window.location.search).get('remoteVersion');
@@ -24,6 +25,8 @@
       return null;
     }
   }
+  // eslint-disable-next-line no-unused-vars
+  const majorVersion = getRemoteMajorVersion();
 
   // DevToolsAPI ----------------------------------------------------------------
   /**
@@ -55,9 +58,19 @@
     _addExtensionCallback = null;
 
     /**
-     * @type {ReturnType<typeof Promise.withResolvers<string>>}
+     * @type {Promise<string>}
+     */
+    _initialTargetIdPromise;
+    /**
+     * @type {(param:string) => void}
      */
-    _initialTargetIdPromiseWithResolver = Promise.withResolvers();
+    _setInitialTargetId;
+
+    constructor() {
+      this._initialTargetIdPromise = new Promise(resolve => {
+        this._setInitialTargetId = resolve;
+      });
+    }
 
     /**
      * @param id
@@ -91,7 +104,7 @@
     /**
      * @typedef {import('./core/host/InspectorFrontendHostAPI.js').Events} Events
      * @typedef {import('./core/host/InspectorFrontendHost.js').InspectorFrontendAPIImplMethods} Methods
-     * @param method {`${Events|Methods}`}
+     * @param {`${Events|Methods}`} method
      * @param args
      */
     _dispatchOnInspectorFrontendAPI(method, args) {
@@ -108,7 +121,7 @@
     // API methods below this line --------------------------------------------
 
     /**
-     * @param extensions {ExtensionDescriptor[]}
+     * @param {ExtensionDescriptor[]} extensions
      */
     addExtensions(extensions) {
       // The addExtensions command is sent as the onload event happens for
@@ -122,7 +135,7 @@
     }
 
     /**
-     * @param forbiddenOrigins {string[]}
+     * @param {string[]} forbiddenOrigins
      */
     setOriginsForbiddenForExtensions(forbiddenOrigins) {
       this._originsForbiddenForExtensions = forbiddenOrigins;
@@ -136,14 +149,14 @@
     }
 
     /**
-     * @param url {string}
+     * @param {string} url
      */
     appendedToURL(url) {
       this._dispatchOnInspectorFrontendAPI('appendedToURL', [url]);
     }
 
     /**
-     * @param url {string}
+     * @param {string} url
      */
     canceledSaveURL(url) {
       this._dispatchOnInspectorFrontendAPI('canceledSaveURL', [url]);
@@ -161,7 +174,7 @@
     }
 
     /**
-     * @param count {number}
+     * @param {number} count
      */
     deviceCountUpdated(count) {
       this._dispatchOnInspectorFrontendAPI('deviceCountUpdated', [count]);
@@ -281,7 +294,7 @@
     }
 
     /**
-     * @param callback {(param: object) => unknown}
+     * @param {(param: object) => unknown} callback
      */
     setAddExtensionCallback(callback) {
       this._addExtensionCallback = callback;
@@ -292,7 +305,7 @@
     }
 
     /**
-     * @param hard {boolean}
+     * @param {boolean} hard
      */
     reloadInspectedPage(hard) {
       this._dispatchOnInspectorFrontendAPI('reloadInspectedPage', [hard]);
@@ -329,7 +342,7 @@
     }
 
     /**
-     * @param tabId {string}
+     * @param {string} tabId
      */
     setInspectedTabId(tabId) {
       this._inspectedTabIdValue = tabId;
@@ -338,10 +351,10 @@
     }
 
     /**
-     * @param targetId {string}
+     * @param {string} targetId
      */
     setInitialTargetId(targetId) {
-      this._initialTargetIdPromiseWithResolver.resolve(targetId);
+      this._setInitialTargetId(targetId);
     }
 
     /**
@@ -352,30 +365,30 @@
     }
 
     /**
-     * @param useSoftMenu {boolean}
+     * @param {boolean} useSoftMenu
      */
     setUseSoftMenu(useSoftMenu) {
       this._dispatchOnInspectorFrontendAPI('setUseSoftMenu', [useSoftMenu]);
     }
 
     /**
-     * @param panelName {string}
+     * @param {string} panelName
      */
     showPanel(panelName) {
       this._dispatchOnInspectorFrontendAPI('showPanel', [panelName]);
     }
 
     /**
-     * @param id {number}
-     * @param chunk {string}
-     * @param encoded {boolean}
+     * @param {number} id
+     * @param {string} chunk
+     * @param {boolean} encoded
      */
     streamWrite(id, chunk, encoded) {
       this._dispatchOnInspectorFrontendAPI('streamWrite', [id, encoded ? this._decodeBase64(chunk) : chunk]);
     }
 
     /**
-     * @param chunk {string}
+     * @param {string} chunk
      * @returns {string}
      */
     _decodeBase64(chunk) {
@@ -437,7 +450,8 @@
     TimelineNavigationSettingState: 'DevTools.TimelineNavigationSettingState',
     SyncSetting: 'DevTools.SyncSetting',
     SwatchActivated: 'DevTools.SwatchActivated',
-    AnimationPlaybackRateChanged: 'DevTools.AnimationPlaybackRateChanged'
+    AnimationPlaybackRateChanged: 'DevTools.AnimationPlaybackRateChanged',
+    BuiltInAiAvailability: 'DevTools.BuiltInAiAvailability'
     // LINT.ThenChange(/front_end/core/host/InspectorFrontendHostAPI.ts:EnumeratedHistogram)
   };
 
@@ -452,6 +466,34 @@
      */
     events;
 
+    /**
+     * @returns
+     */
+    getSelectionBackgroundColor() {
+      return '#6e86ff';
+    }
+
+    /**
+     * @returns
+     */
+    getSelectionForegroundColor() {
+      return '#ffffff';
+    }
+
+    /**
+     * @returns
+     */
+    getInactiveSelectionBackgroundColor() {
+      return '#c9c8c8';
+    }
+
+    /**
+     * @returns
+     */
+    getInactiveSelectionForegroundColor() {
+      return '#323232';
+    }
+
     /**
      * @returns
      */
@@ -481,7 +523,7 @@
 
     /**
      * @param trigger
-     * @param callback {(param: object) => unknown}
+     * @param {(param: object) => unknown} callback
      */
     showSurvey(trigger, callback) {
       DevToolsAPI.sendMessageToEmbedder('showSurvey', [trigger], callback);
@@ -489,7 +531,7 @@
 
     /**
      * @param trigger
-     * @param callback {(param: object) => unknown}
+     * @param {(param: object) => unknown} callback
      */
     canShowSurvey(trigger, callback) {
       DevToolsAPI.sendMessageToEmbedder('canShowSurvey', [trigger], callback);
@@ -511,7 +553,7 @@
      * @param url
      * @param headers
      * @param streamId
-     * @param callback {(param: object) => unknown}
+     * @param {(param: object) => unknown} callback
      */
     loadNetworkResource(url, headers, streamId, callback) {
       DevToolsAPI.sendMessageToEmbedder('loadNetworkResource', [url, headers, streamId], callback);
@@ -526,7 +568,7 @@
     }
 
     /**
-     * @param callback {(param: object) => unknown}
+     * @param {(param: object) => unknown} callback
      */
     getPreferences(callback) {
       DevToolsAPI.sendMessageToEmbedder('getPreferences', [], callback);
@@ -534,7 +576,7 @@
 
     /**
      * @param name
-     * @param callback {(param: object) => unknown}
+     * @param {(param: object) => unknown} callback
      */
     getPreference(name, callback) {
       DevToolsAPI.sendMessageToEmbedder('getPreference', [name], callback);
@@ -674,9 +716,10 @@
     }
 
     /**
-     * @param url
+     * @param {string} _url
      */
-    close(url) {
+    close(_url) {
+      // This is required when InspectorFrontendHostStub is used
     }
 
     /**
@@ -986,12 +1029,21 @@
     }
 
     // Backward-compatible methods below this line --------------------------------------------
+    /**
+     * Support for legacy front-ends (<M65).
+     * @returns
+     */
+    isUnderTest() {
+      return false;
+    }
+
+    // Backward-compatible methods end before line --------------------------------------------
 
     /**
      * @returns
      */
     initialTargetId() {
-      return DevToolsAPI._initialTargetIdPromiseWithResolver.promise;
+      return DevToolsAPI._initialTargetIdPromise;
     }
 
     /**
@@ -1092,7 +1144,7 @@
   ]);
 
   /**
-   * @param keyCode {number}
+   * @param {number} keyCode
    * @returns
    */
   function keyCodeToKeyIdentifier(keyCode) {
@@ -1110,9 +1162,155 @@
   }
 
   function installBackwardsCompatibility() {
-    // Any polyfill that we need for backwards compatibility should be
-    // Added in this function
-    // Use getRemoteMajorVersion to get the correct Major Chrome version
+    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 {
+          // 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 x
+         *  @param y
+         *  @returns
+         */
+        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 <= 71) {
+      styleRules.push(
+          '.coverage-toolbar-container, .animation-timeline-toolbar-container, .computed-properties { flex-basis: auto; }');
+    }
+
+    installExtraStyleRules(styleRules);
+  }
+
+  /**
+   * @param 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 styleText
+   * @returns
+   */
+  function createStyleElement(styleText) {
+    const style = document.createElement('style');
+    style.textContent = styleText;
+    return style;
   }
 
   installBackwardsCompatibility();

package/front_end/generated/SupportedCSSProperties.js

@@ -421,6 +421,7 @@ export const generatedProperties = [
    "column-rule-color",
    "column-rule-outset",
    "column-rule-style",
+   "column-rule-visibility-items",
    "column-rule-width",
    "column-span",
    "column-width",
@@ -720,6 +721,7 @@ export const generatedProperties = [
    "text-emphasis-style",
    "text-grow",
    "text-indent",
+   "text-justify",
    "text-orientation",
    "text-overflow",
    "text-rendering",
@@ -1736,6 +1738,16 @@ export const generatedProperties = [
   ],
   "name": "column-rule-style"
  },
+ {
+  "inherited": false,
+  "keywords": [
+   "all",
+   "around",
+   "between",
+   "none"
+  ],
+  "name": "column-rule-visibility-items"
+ },
  {
   "keywords": [
    "thin",
@@ -4321,6 +4333,16 @@ export const generatedProperties = [
   "inherited": true,
   "name": "text-indent"
  },
+ {
+  "inherited": true,
+  "keywords": [
+   "auto",
+   "none",
+   "inter-word",
+   "inter-character"
+  ],
+  "name": "text-justify"
+ },
  {
   "inherited": true,
   "keywords": [
@@ -5364,6 +5386,14 @@ export const generatedPropertyValues = {
    "double"
   ]
  },
+ "column-rule-visibility-items": {
+  "values": [
+   "all",
+   "around",
+   "between",
+   "none"
+  ]
+ },
  "column-rule-width": {
   "values": [
    "thin",
@@ -6773,6 +6803,14 @@ export const generatedPropertyValues = {
    "currentcolor"
   ]
  },
+ "text-justify": {
+  "values": [
+   "auto",
+   "none",
+   "inter-word",
+   "inter-character"
+  ]
+ },
  "text-orientation": {
   "values": [
    "sideways",