chrome-devtools-frontend 1.0.958475 → 1.0.959105

package/front_end/core/platform/generate-dcheck.js

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-const fs = require('fs');
 const path = require('path');
+const {writeIfChanged} = require('../../../scripts/build/ninja/write-if-changed.js');
 const [, , targetGenDir] = process.argv;
 
 let functionImplementation = '';
@@ -16,6 +16,6 @@ if (process.argv.includes('--should-dcheck')) {
 `;
 }
 
-fs.writeFileSync(
+writeIfChanged(
     path.join(targetGenDir, 'dcheck.js'),
     `export function DCHECK(condition, message = 'DCHECK') {${functionImplementation}}`);

package/front_end/entrypoints/main/main-meta.ts

@@ -672,6 +672,30 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
+// Not all locales that are supported should also be made available in the
+// settings. Filter out pseudo locales e.g.
+function filterLocalesForSettings(): string[] {
+  return i18n.i18n.getAllSupportedDevToolsLocales().filter(locale => locale !== 'en-XL');
+}
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.APPEARANCE,
+  storageType: Common.Settings.SettingStorageType.Synced,
+  settingName: 'language',
+  settingType: Common.Settings.SettingType.ENUM,
+  title: i18nLazyString(UIStrings.language),
+  defaultValue: 'en-US',
+  options: [
+    {
+      value: 'browserLanguage',
+      title: i18nLazyString(UIStrings.browserLanguage),
+      text: i18nLazyString(UIStrings.browserLanguage),
+    },
+    ...filterLocalesForSettings().map(locale => createOptionForLocale(locale)),
+  ],
+  reloadRequired: true,
+});
+
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.APPEARANCE,
   storageType: Common.Settings.SettingStorageType.Synced,
@@ -743,30 +767,6 @@ function createOptionForLocale(localeString: string): Common.Settings.SettingExt
   };
 }
 
-// Not all locales that are supported should also be made available in the
-// settings. Filter out pseudo locales e.g.
-function filterLocalesForSettings(): string[] {
-  return i18n.i18n.getAllSupportedDevToolsLocales().filter(locale => locale !== 'en-XL');
-}
-
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.APPEARANCE,
-  storageType: Common.Settings.SettingStorageType.Synced,
-  settingName: 'language',
-  settingType: Common.Settings.SettingType.ENUM,
-  title: i18nLazyString(UIStrings.language),
-  defaultValue: 'en-US',
-  options: [
-    {
-      value: 'browserLanguage',
-      title: i18nLazyString(UIStrings.browserLanguage),
-      text: i18nLazyString(UIStrings.browserLanguage),
-    },
-    ...filterLocalesForSettings().map(locale => createOptionForLocale(locale)),
-  ],
-  reloadRequired: true,
-});
-
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SYNC,
   // This name must be kept in sync with DevToolsSettings::kSyncDevToolsPreferencesFrontendName.

package/front_end/generated/SupportedCSSProperties.js

@@ -582,7 +582,7 @@ export const generatedProperties = [
     'name': 'mix-blend-mode',
     'keywords': [
       'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light',
-      'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
+      'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-lighter'
     ]
   },
   {'name': 'negative'},
@@ -1086,7 +1086,7 @@ export const generatedPropertyValues = {
   'mix-blend-mode': {
     'values': [
       'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light',
-      'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
+      'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-lighter'
     ]
   },
   'object-fit': {'values': ['fill', 'contain', 'cover', 'none', 'scale-down']},

package/front_end/models/persistence/WorkspaceSettingsTab.ts

@@ -106,7 +106,6 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
     const inputElement = UI.UIUtils.createInput('', 'text');
     UI.ARIAUtils.bindLabelToControl(labelElement, inputElement);
     p.appendChild(inputElement);
-    inputElement.style.width = '270px';
     const folderExcludeSetting = IsolatedFileSystemManager.instance().workspaceFolderExcludePatternSetting();
     const setValue =
         UI.UIUtils.bindInput(inputElement, folderExcludeSetting.set.bind(folderExcludeSetting), regexValidator, false);

package/front_end/models/persistence/workspaceSettingsTab.css

@@ -32,11 +32,6 @@
   column-width: 308px;
 }
 
-.workspace-settings-tab .settings-tab label {
-  padding-right: 4px;
-  display: inline-flex;
-}
-
 .workspace-settings-tab .settings-container-wrapper {
   position: absolute;
   top: 31px;
@@ -57,12 +52,13 @@
 }
 
 .workspace-settings-tab p.folder-exclude-pattern {
-  display: flex;
+  display: grid;
   align-items: center;
 }
 
 .workspace-settings-tab p.folder-exclude-pattern > input {
-  flex: auto;
+  width: 80%;
+  margin-left: 10px;
 }
 
 .workspace-settings-tab .settings-tab .file-system-container {

package/front_end/panels/elements/ElementsPanel.ts

@@ -167,7 +167,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
                                                              UI.View.ViewLocationResolver {
   private splitWidget: UI.SplitWidget.SplitWidget;
   private readonly searchableViewInternal: UI.SearchableView.SearchableView;
-  private contentElementInternal: HTMLDivElement;
+  private mainContainer: HTMLDivElement;
+  private domTreeContainer: HTMLDivElement;
   private splitMode: _splitMode|null;
   private readonly accessibilityTreeView: AccessibilityTreeView|undefined;
   private breadcrumbs: ElementsComponents.ElementsBreadcrumbs.ElementsBreadcrumbs;
@@ -211,24 +212,27 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.searchableViewInternal.setPlaceholder(i18nString(UIStrings.findByStringSelectorOrXpath));
     const stackElement = this.searchableViewInternal.element;
 
-    this.contentElementInternal = document.createElement('div');
+    this.mainContainer = document.createElement('div');
+    this.domTreeContainer = document.createElement('div');
     const crumbsContainer = document.createElement('div');
     if (Root.Runtime.experiments.isEnabled('fullAccessibilityTree')) {
       this.initializeFullAccessibilityTreeView();
     }
-    stackElement.appendChild(this.contentElementInternal);
+    this.mainContainer.appendChild(this.domTreeContainer);
+    stackElement.appendChild(this.mainContainer);
     stackElement.appendChild(crumbsContainer);
 
-    UI.ARIAUtils.markAsMain(this.contentElementInternal);
-    UI.ARIAUtils.setAccessibleName(this.contentElementInternal, i18nString(UIStrings.domTreeExplorer));
+    UI.ARIAUtils.markAsMain(this.domTreeContainer);
+    UI.ARIAUtils.setAccessibleName(this.domTreeContainer, i18nString(UIStrings.domTreeExplorer));
 
     this.splitWidget.setMainWidget(this.searchableViewInternal);
     this.splitMode = null;
 
-    this.contentElementInternal.id = 'elements-content';
+    this.mainContainer.id = 'main-content';
+    this.domTreeContainer.id = 'elements-content';
     // FIXME: crbug.com/425984
     if (Common.Settings.Settings.instance().moduleSetting('domWordWrap').get()) {
-      this.contentElementInternal.classList.add('elements-wrap');
+      this.domTreeContainer.classList.add('elements-wrap');
     }
     Common.Settings.Settings.instance()
         .moduleSetting('domWordWrap')
@@ -282,7 +286,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.domTreeButton = createAccessibilityTreeToggleButton(true);
     this.domTreeButton.addEventListener('click', this.showDOMTree.bind(this));
 
-    this.contentElementInternal.appendChild(this.accessibilityTreeButton);
+    this.mainContainer.appendChild(this.accessibilityTreeButton);
   }
 
   private showAccessibilityTree(): void {
@@ -433,12 +437,12 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     for (const treeOutline of this.treeOutlines) {
       // Attach heavy component lazily
-      if (treeOutline.element.parentElement !== this.contentElementInternal) {
+      if (treeOutline.element.parentElement !== this.domTreeContainer) {
         const header = this.treeOutlineHeaders.get(treeOutline);
         if (header) {
-          this.contentElementInternal.appendChild(header);
+          this.domTreeContainer.appendChild(header);
         }
-        this.contentElementInternal.appendChild(treeOutline.element);
+        this.domTreeContainer.appendChild(treeOutline.element);
       }
     }
 
@@ -469,10 +473,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     for (const treeOutline of this.treeOutlines) {
       treeOutline.setVisible(false);
       // Detach heavy component on hide
-      this.contentElementInternal.removeChild(treeOutline.element);
+      this.domTreeContainer.removeChild(treeOutline.element);
       const header = this.treeOutlineHeaders.get(treeOutline);
       if (header) {
-        this.contentElementInternal.removeChild(header);
+        this.domTreeContainer.removeChild(header);
       }
     }
     super.willHide();
@@ -668,7 +672,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   private domWordWrapSettingChanged(event: Common.EventTarget.EventTargetEvent<boolean>): void {
-    this.contentElementInternal.classList.toggle('elements-wrap', event.data);
+    this.domTreeContainer.classList.toggle('elements-wrap', event.data);
     for (const treeOutline of this.treeOutlines) {
       treeOutline.setWordWrap(event.data);
     }

package/front_end/panels/elements/elementsPanel.css

@@ -27,11 +27,15 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-#elements-content {
+#main-content {
+  position: relative;
   flex: 1 1;
+}
+
+#elements-content {
   overflow: auto;
   padding: 2px 0 0;
-  position: relative;
+  height: 100%;
 }
 
 .style-panes-wrapper {

package/front_end/panels/settings/settingsScreen.css

@@ -80,9 +80,9 @@ fieldset {
   align-items: center;
 }
 
-.experiments-filter label {
+label {
   padding-right: 8px;
-  flex-shrink: 0;
+  padding-bottom: 8px;
 }
 
 .settings-tab p {
@@ -95,7 +95,7 @@ fieldset {
 
 .settings-select {
   align-items: center;
-  display: flex;
+  display: grid;
 }
 
 .settings-experiments-warning-subsection-warning {
@@ -174,6 +174,7 @@ fieldset {
 
 .settings-tab select {
   margin-left: 10px;
+  width: 80%;
 }
 
 .settings-experiment {

package/front_end/ui/legacy/filter.css

@@ -65,6 +65,7 @@
   border-radius: 6px;
   overflow: hidden;
   cursor: pointer;
+  line-height: 1.2;
 }
 
 .filter-bitset-filter span:focus-visible {

package/package.json

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

package/scripts/build/generate_css_js_files.js

@@ -4,6 +4,7 @@
 const fs = require('fs');
 const path = require('path');
 const CleanCSS = require('clean-css');
+const {writeIfChanged} = require('./ninja/write-if-changed.js');
 const [, , buildTimestamp, isDebugString, legacyString, targetName, srcDir, targetGenDir, files] = process.argv;
 
 const filenames = files.split(',');
@@ -34,21 +35,22 @@ export default styles;`;
   }
 
   const generatedFileName = `${fileName}${isLegacy ? '.legacy' : ''}.js`;
-
-  fs.writeFileSync(
-      path.join(targetGenDir, generatedFileName),
-      `// Copyright ${new Date(Number(buildTimestamp) * 1000).getFullYear()} The Chromium Authors. All rights reserved.
+  const generatedFileLocation = path.join(targetGenDir, generatedFileName);
+  const newContents = `// Copyright ${
+      new Date(Number(buildTimestamp) * 1000).getUTCFullYear()} 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.
 // IMPORTANT: this file is auto generated. Please do not edit this file.
 /* istanbul ignore file */
 ${exportStatement}
-`);
+`;
+
+  writeIfChanged(generatedFileLocation, newContents);
 
   configFiles.push(`\"${generatedFileName}\"`);
 }
 
-fs.writeFileSync(path.join(targetGenDir, `${targetName}-tsconfig.json`), `{
+writeIfChanged(path.join(targetGenDir, `${targetName}-tsconfig.json`), `{
     "compilerOptions": {
         "composite": true,
         "outDir": "."

package/scripts/build/generate_html_entrypoint.js

@@ -5,6 +5,7 @@
 const fs = require('fs');
 const path = require('path');
 const {argv} = require('yargs');
+const {writeIfChanged} = require('./ninja/write-if-changed.js');
 
 const {template} = argv;
 
@@ -32,5 +33,5 @@ const templateContent = fs.readFileSync(template, 'utf-8');
 
 for (const entrypoint of entrypoints) {
   const rewrittenTemplateContent = templateContent.replace(new RegExp('%ENTRYPOINT_NAME%', 'g'), entrypoint);
-  fs.writeFileSync(path.join(outDirectory, `${entrypoint}.html`), rewrittenTemplateContent);
+  writeIfChanged(path.join(outDirectory, `${entrypoint}.html`), rewrittenTemplateContent);
 }

package/scripts/build/ninja/copy-file.js

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 const fs = require('fs');
 const path = require('path');
+const {writeIfChanged} = require('./write-if-changed.js');
 const [, , src, dest] = process.argv;
 
 const srcPath = path.join(process.cwd(), src);
@@ -23,7 +24,7 @@ if (fileExists(destPath)) {
 // Force a write to the target filesystem, since by default the ninja
 // toolchain will create a hardlink, which in turn reflects changes in
 // gen and resources/inspector back to //front_end.
-fs.writeFileSync(destPath, srcContents);
+writeIfChanged(destPath, srcContents);
 
 /**
  * Case sensitive implementation of a file look up.

package/scripts/build/ninja/copy-files.js

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 const fs = require('fs');
 const path = require('path');
+const {writeIfChanged} = require('./write-if-changed.js');
 const [, , src, dest, files] = process.argv;
 
 for (const file of files.split(',')) {
@@ -24,7 +25,7 @@ for (const file of files.split(',')) {
   // Force a write to the target filesystem, since by default the ninja
   // toolchain will create a hardlink, which in turn reflects changes in
   // gen and resources/inspector back to //front_end.
-  fs.writeFileSync(destPath, srcContents);
+  writeIfChanged(destPath, srcContents);
 }
 
 /**

package/scripts/build/ninja/generate-declaration.js

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 const fs = require('fs');
 const path = require('path');
+const {writeIfChanged} = require('./write-if-changed.js');
 
 const [, , outputDirectory, entrypointName] = process.argv;
 
@@ -13,4 +14,4 @@ const outputLocation = path.join(outputDirectory, `${rawFileName}.d.ts`);
 // We can't use copy here, as that would maintain the original file timestamps.
 // This can throw off Ninja, which verifies that timestamps of generated files
 // are the same as the timestamp it ran the action on.
-fs.writeFileSync(outputLocation, fs.readFileSync(inputLocation));
+writeIfChanged(outputLocation, fs.readFileSync(inputLocation));

package/scripts/build/ninja/node.gni

@@ -20,7 +20,10 @@ template("node_action") {
 
     _full_script_location = devtools_location_prepend + invoker.script
 
-    inputs += [ _full_script_location ]
+    inputs += [
+      _full_script_location,
+      devtools_location_prepend + "scripts/build/ninja/write-if-changed.js",
+    ]
 
     args = [ rebase_path(_full_script_location, root_build_dir) ] + invoker.args
   }

package/scripts/build/ninja/write-if-changed.js

@@ -0,0 +1,27 @@
+// Copyright 2022 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.
+
+const fs = require('fs');
+
+/**
+ * Only write content to a file if the content is different that what it previously contained.
+ * The reason for only writing when necessary is that GN uses file timestamps to determine freshness.
+ * Therefore, if the file contents hasn't changed, but the timestamp has, GN thinks the file is new.
+ *
+ * Instead, we can only write when the content is changed, meaning we don't touch a file when it is
+ * unchanged. This would preserve the original file timestamps and hence GN can correctly conclude
+ * the file output hasn't changed.
+ *
+ * @param {string} generatedFileLocation Location to write to
+ * @param {string} newContents The contents to write (or noop if unchanged with previous content)
+ */
+module.exports.writeIfChanged = (generatedFileLocation, newContents) => {
+  if (fs.existsSync(generatedFileLocation)) {
+    if (fs.readFileSync(generatedFileLocation, {encoding: 'utf8', flag: 'r'}) === newContents) {
+      return;
+    }
+  }
+
+  fs.writeFileSync(generatedFileLocation, newContents, {encoding: 'utf-8'});
+};