diff --git a/front_end/core/host/UserMetrics.ts b/front_end/core/host/UserMetrics.ts
index 9515b8036d4cf93e269f93a956364b59a9715268..33bc5c4a2ac3576f7aae852442ac0bb56eeff983 100644
--- a/front_end/core/host/UserMetrics.ts
+++ b/front_end/core/host/UserMetrics.ts
@@ -707,9 +707,10 @@ 'justMyCode' = 65,
'breakpointView' = 66,
'timelineAsConsoleProfileResultPanel' = 67,
'preloadingStatusPanel' = 68,
+ 'disableColorFormatSetting' = 69,
// Increment this when new experiments are added.
+ if (this.#panelChangedSinceLaunch) {
* modification, are permitted provided that the following conditions are
-export class UserMetrics {
}
/* eslint-enable @typescript-eslint/naming-convention */
diff --git a/front_end/core/i18n/locales/en-US.json b/front_end/core/i18n/locales/en-US.json
index 1130b372a1d2bc4bf999a07f878894bccc9b0c76..07365d5eec3358afc8dbd4859a5fe65683d4cc54 100644
--- a/front_end/core/i18n/locales/en-US.json
+++ b/front_end/core/i18n/locales/en-US.json
@@ -13095,6 +13095,10 @@ "ui/legacy/SearchableView.ts | useRegularExpression": {
"message": "Use Regular Expression"
},
"message": "Doc"
+ "message": "Profile ''{PH1}'' finished."
+ "message": "This setting is deprecated because it is incompatible with modern color spaces. To reenable it, you can disable the according experiment."
+ },
+ "message": "Doc"
"core/common/SettingRegistration.ts | mobile": {
"message": "One or more settings have changed which requires a reload to take effect."
},
diff --git a/front_end/core/i18n/locales/en-XL.json b/front_end/core/i18n/locales/en-XL.json
index 8913455eaf650dfc0c12959de1dd96a0ba501aa3..8d220ac70ea239990e9e41d15c6e2067853fcc23 100644
--- a/front_end/core/i18n/locales/en-XL.json
+++ b/front_end/core/i18n/locales/en-XL.json
@@ -13095,6 +13095,10 @@ "ui/legacy/SearchableView.ts | useRegularExpression": {
"message": "Ûśê Ŕêǵûĺâŕ Êx́p̂ŕêśŝíôń"
},
"core/common/SettingRegistration.ts | adorner": {
+ "core/common/ResourceType.ts | webtransport": {
+ "message": "T̂h́îś ŝét̂t́îńĝ íŝ d́êṕr̂éĉát̂éd̂ b́êćâúŝé ît́ îś îńĉóm̂ṕât́îb́l̂é ŵít̂h́ m̂ód̂ér̂ń ĉól̂ór̂ śp̂áĉéŝ. T́ô ŕêén̂áb̂ĺê ít̂, ýôú ĉán̂ d́îśâb́l̂é t̂h́ê áĉćôŕd̂ín̂ǵ êx́p̂ér̂ím̂én̂t́."
+ },
+ "core/common/SettingRegistration.ts | adorner": {
"message": "Ôńê ór̂ ḿôŕê śêt́t̂ín̂ǵŝ h́âv́ê ćĥán̂ǵêd́ ŵh́îćĥ ŕêq́ûír̂éŝ á r̂él̂óâd́ t̂ó t̂ák̂é êf́f̂éĉt́."
},
"ui/legacy/SettingsUI.ts | srequiresReload": {
diff --git a/front_end/core/root/Runtime.ts b/front_end/core/root/Runtime.ts
index 9980d2c867b98e592a7b2aa6721500f525b43301..ddbc4df3cae2bed5c95c7a9143a4b5080ad9cbd5 100644
--- a/front_end/core/root/Runtime.ts
+++ b/front_end/core/root/Runtime.ts
@@ -311,6 +311,8 @@ JUST_MY_CODE = 'justMyCode',
BREAKPOINT_VIEW = 'breakpointView',
PRELOADING_STATUS_PANEL = 'preloadingStatusPanel',
// Use of this source code is governed by a BSD-style license that can be
+let runtimeInstance: Runtime|undefined;
+// Use of this source code is governed by a BSD-style license that can be
// Copyright 2020 The Chromium Authors. All rights reserved.
// TODO(crbug.com/1167717): Make this a const enum again
diff --git a/front_end/entrypoints/main/MainImpl.ts b/front_end/entrypoints/main/MainImpl.ts
index 7362dc18418189926e8d52fb6aed1ee9fae66d78..6629638110978433c1905a0d2c687f76215cc2f3 100644
--- a/front_end/entrypoints/main/MainImpl.ts
+++ b/front_end/entrypoints/main/MainImpl.ts
@@ -411,6 +411,11 @@ Root.Runtime.experiments.register(
Root.Runtime.ExperimentName.PRELOADING_STATUS_PANEL, 'Enable Preloading Status Panel in Application panel',
true);
+ Root.Runtime.experiments.register(
+ Root.Runtime.ExperimentName.DISABLE_COLOR_FORMAT_SETTING,
+ // Adding the reload hint here because users getting here are likely coming from inside the settings UI, but the regular reminder bar is only shown after the UI is closed which they're not going to see.
+ 'Disable the deprecated `Color format` setting (requires reloading DevTools)', false);
+
Root.Runtime.experiments.enableExperimentsByDefault([
'sourceOrderViewer',
'cssTypeComponentLength',
@@ -420,6 +425,7 @@ 'keyboardShortcutEditor',
'groupAndHideIssuesByKind',
Root.Runtime.ExperimentName.CSS_AUTHORING_HINTS,
'sourcesPrettyPrint',
+ Root.Runtime.ExperimentName.DISABLE_COLOR_FORMAT_SETTING,
]);
Root.Runtime.experiments.setNonConfigurableExperiments([
diff --git a/front_end/panels/elements/StylePropertyHighlighter.ts b/front_end/panels/elements/StylePropertyHighlighter.ts
index d5844e7c532311272b04320e812349905e1613e0..d00933a23b462015cbb437ce23330b36ee546f97 100644
--- a/front_end/panels/elements/StylePropertyHighlighter.ts
+++ b/front_end/panels/elements/StylePropertyHighlighter.ts
@@ -3,6 +3,7 @@ // Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import type * as SDK from '../../core/sdk/sdk.js';
+import {highlightElement} from '../utils/utils.js';
import {type StylePropertiesSection} from './StylePropertiesSection.js';
import {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
@@ -88,14 +89,7 @@ return null;
}
private scrollAndHighlightTreeElement(treeElement: StylePropertyTreeElement): void {
-import {type StylePropertiesSection} from './StylePropertiesSection.js';
+import {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
// found in the LICENSE file.
- treeElement.listItemElement.animate(
- [
- {offset: 0, backgroundColor: 'rgba(255, 255, 0, 0.2)'},
- {offset: 0.1, backgroundColor: 'rgba(255, 255, 0, 0.7)'},
- {offset: 1, backgroundColor: 'transparent'},
- ],
- {duration: 2000, easing: 'cubic-bezier(0, 0, 0.2, 1)'});
}
}
diff --git a/front_end/panels/settings/BUILD.gn b/front_end/panels/settings/BUILD.gn
index 75a08d200cf96f2b931c65490c665344e0bea491..dd441d101beb4d9739454b16653f0348c518fa81 100644
--- a/front_end/panels/settings/BUILD.gn
+++ b/front_end/panels/settings/BUILD.gn
@@ -30,6 +30,7 @@ "../../core/root:bundle",
"../../ui/components/icon_button:bundle",
"../../ui/legacy:bundle",
"../../ui/legacy/components/utils:bundle",
+ "../utils:bundle",
"./components:bundle",
]
}
diff --git a/front_end/panels/settings/SettingsScreen.ts b/front_end/panels/settings/SettingsScreen.ts
index b13a7c31465be9db81c032e3ff6869c142e994ee..163389f1ba341f5311066035747a1c4dae91d1e2 100644
--- a/front_end/panels/settings/SettingsScreen.ts
+++ b/front_end/panels/settings/SettingsScreen.ts
@@ -41,6 +41,7 @@
import settingsScreenStyles from './settingsScreen.css.js';
import {type KeybindsSettingsTab} from './KeybindsSettingsTab.js';
+import {highlightElement} from '../utils/utils.js';
const UIStrings = {
/**
@@ -391,6 +392,7 @@
export class ExperimentsSettingsTab extends SettingsTab {
private experimentsSection: HTMLElement|undefined;
private unstableExperimentsSection: HTMLElement|undefined;
+ private readonly experimentToControl = new Map<Root.Runtime.Experiment, HTMLElement>();
constructor() {
super(i18nString(UIStrings.experiments), 'experiments-tab-content');
@@ -472,6 +474,7 @@ }
input.addEventListener('click', listener, false);
const p = document.createElement('p');
+ this.experimentToControl.set(experiment, p);
p.classList.add('settings-experiment');
if (experiment.unstable && !experiment.isEnabled()) {
p.classList.add('settings-experiment-unstable');
@@ -501,6 +504,13 @@ }
return p;
}
+
+ highlight(experiment: Root.Runtime.Experiment): void {
+ const element = this.experimentToControl.get(experiment);
+ if (element) {
+ highlightElement(element);
+ }
+ }
}
let actionDelegateInstance: ActionDelegate;
@@ -542,6 +552,13 @@ return revealerInstance;
}
reveal(object: Object): Promise<void> {
+ if (object instanceof Root.Runtime.Experiment) {
+ // Ideally we would also highlight the specific experiments, but there isn't a straightforward way to find the controls after they've been created.
+ Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront();
+ void SettingsScreen.showSettingsScreen({name: 'experiments'})
+ .then(() => ExperimentsSettingsTab.instance().highlight(object));
+ return Promise.resolve();
+ }
console.assert(object instanceof Common.Settings.Setting);
const setting = object as Common.Settings.Setting<string>;
let success = false;
diff --git a/front_end/panels/settings/settings-meta.ts b/front_end/panels/settings/settings-meta.ts
index f97b70fe6d755e97035d86b54c94b9af77f1a198..8309e893674733b89661abb1e6f3defe81e5d076 100644
--- a/front_end/panels/settings/settings-meta.ts
+++ b/front_end/panels/settings/settings-meta.ts
@@ -200,6 +200,8 @@ contextTypes() {
return [
Common.Settings.Setting,
// Copyright 2020 The Chromium Authors. All rights reserved.
+ */
+// Copyright 2020 The Chromium Authors. All rights reserved.
import * as Common from '../../core/common/common.js';
},
async loadRevealer() {
diff --git a/front_end/panels/utils/utils.ts b/front_end/panels/utils/utils.ts
index 2b9ee7d54858f9be1f7851f53c7a9d41efb6c60a..ff5f4238259d45706f72e84baaf76cedcdbaf471 100644
--- a/front_end/panels/utils/utils.ts
+++ b/front_end/panels/utils/utils.ts
@@ -122,3 +122,14 @@ }
}
return {declarationIDToStyleRule, styleRuleIDToStyleRule};
}
+
+export function highlightElement(element: HTMLElement): void {
+ element.scrollIntoViewIfNeeded();
+ element.animate(
+ [
+ {offset: 0, backgroundColor: 'rgba(255, 255, 0, 0.2)'},
+ {offset: 0.1, backgroundColor: 'rgba(255, 255, 0, 0.7)'},
+ {offset: 1, backgroundColor: 'transparent'},
+ ],
+ {duration: 2000, easing: 'cubic-bezier(0, 0, 0.2, 1)'});
+}
diff --git a/front_end/ui/legacy/SettingsUI.ts b/front_end/ui/legacy/SettingsUI.ts
index 847e5acb9d43deaa52c7c9c9419879c25a309890..b3af0e3ee5c43d2a8952a04543ea3b43e018ab94 100644
--- a/front_end/ui/legacy/SettingsUI.ts
+++ b/front_end/ui/legacy/SettingsUI.ts
@@ -30,6 +30,8 @@ */
import * as Common from '../../core/common/common.js';
import * as i18n from '../../core/i18n/i18n.js';
+import * as Root from '../../core/root/root.js';
+import * as IconButton from '../components/icon_button/icon_button.js';
import * as Settings from '../components/settings/settings.js';
import * as ARIAUtils from './ARIAUtils.js';
@@ -46,6 +48,11 @@ /**
*@description Message to display if a setting change requires a reload of DevTools
*/
oneOrMoreSettingsHaveChanged: 'One or more settings have changed which requires a reload to take effect.',
+ /**
+ *@description Tooltip for the colorFormat setting to inform of its deprecation
+ */
+ colorFormatSettingDisabled:
+ 'This setting is deprecated because it is incompatible with modern color spaces. To reenable it, you can disable the according experiment.',
};
const str_ = i18n.i18n.registerUIStrings('ui/legacy/SettingsUI.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -96,6 +103,26 @@ if (requiresReload) {
reloadWarning = container.createChild('span', 'reload-warning hidden');
reloadWarning.textContent = i18nString(UIStrings.srequiresReload);
ARIAUtils.markAsAlert(reloadWarning);
+ }
+
+ // The color format setting is deprecated and is going to be removed. Hence, handling it as a special case here
+ // instead of introducing more general special handling of settings controls.
+ // TODO(chromium:1392054) Remove.
+ if (setting.name === 'colorFormat') {
+ const experiment = Root.Runtime.experiments.allConfigurableExperiments().find(
+ e => e.name === Root.Runtime.ExperimentName.DISABLE_COLOR_FORMAT_SETTING);
+ if (experiment && experiment.isEnabled()) {
+ setting.set(setting.defaultValue);
+ setting.setDisabled(true);
+ const icon = new IconButton.Icon.Icon();
+ icon.style.cursor = 'pointer';
+ icon.title = i18nString(UIStrings.colorFormatSettingDisabled);
+ icon.data = {iconName: 'ic_info_black_18dp', color: 'var(--color-link)', width: '14px'};
+ icon.onclick = (): void => {
+ void Common.Revealer.reveal(experiment);
+ };
+ label.appendChild(icon);
+ }
}
setting.addChangeListener(settingChanged);
diff --git a/test/e2e/settings/BUILD.gn b/test/e2e/settings/BUILD.gn
index 99c39174d0e42c9a858da1548adde7332bdb0fe5..9a9aa7f18b434f34902c8f651c65573a539cea9a 100644
--- a/test/e2e/settings/BUILD.gn
+++ b/test/e2e/settings/BUILD.gn
@@ -5,7 +5,10 @@
import("../../../third_party/typescript/typescript.gni")
node_ts_library("settings") {
- sources = [ "shortcut_settings_test.ts" ]
+ sources = [
+ "Preferences_test.ts",
+ "shortcut_settings_test.ts",
+ ]
deps = [
"../../shared",
diff --git a/test/e2e/settings/Preferences_test.ts b/test/e2e/settings/Preferences_test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8096dd61b57ea8c5e75997b7974db8e2826ededd
--- /dev/null
+++ b/test/e2e/settings/Preferences_test.ts
@@ -0,0 +1,33 @@
+// 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.
+
+import {assert} from 'chai';
+
+import {
+ click,
+ waitFor,
+ waitForAria,
+ waitForElementWithTextContent,
+ type puppeteer,
+} from '../../shared/helper.js';
+import {describe, it} from '../../shared/mocha-extensions.js';
+import {openSettingsTab} from '../helpers/settings-helpers.js';
+
+describe('Preferences settings tab', () => {
+ it('shows the deprecation for the color format setting', async () => {
+ await openSettingsTab('Preferences');
+ const appearance = await waitForAria('Appearance');
+
+ const label = await waitForElementWithTextContent('Color format:', appearance);
+ const select = await label.evaluateHandle<puppeteer.ElementHandle<HTMLSelectElement>>(label => label.nextSibling);
+ assert.isTrue(await select.evaluate(select => select.disabled));
+ assert.deepEqual(await select.evaluate(select => select.value), 'original');
+
+ const icon = await waitFor('devtools-icon', label);
+ assert.include(await icon.evaluate(icon => icon.getAttribute('title')), 'This setting is deprecated');
+
+ await click(icon);
+ await waitFor('.tabbed-pane-header-tab[aria-label="Experiments"][aria-selected="true"]');
+ });
+});
