zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-09-29 16:57:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

Avoid automatically reloading DevTools on Theme change

Browse Source 
Avoid automatically reloading the DevTools when the user changes
the theme within the DevTools . The user will be notified that a
Reload is required, and the settings page now has a "Reload DevTools"
button so the user can apply the changes immediately.

Reloading the DevTools automatically can result in the user losing
any state with their current debugging sessions (e.g. pause location,
console logs, style changes, etc).

https://imgur.com/a/47ICsdi

Bug: 1001549
Change-Id: I338dea7610a9a51c8292743a84c274a60e034b34
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2107500
Commit-Queue: Mike Jackson <mjackson@microsoft.com>
Reviewed-by: Robert Paveza <Rob.Paveza@microsoft.com>
This commit is contained in:
Mike Jackson
2020-03-19 04:41:21 +00:00
committed by Commit Bot
parent 2a8a4a1fbe
commit 64e0899efa
10 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front_end/emulation/emulation_strings.grdp
-3
View File
@@ -192,9 +192,6 @@
<message name="IDS_DEVTOOLS_8189965036f7d675e0b7af67a2a873a0" desc="Text in Sensors View of the Device Toolbar">
Timezone ID
</message>
<message name="IDS_DEVTOOLS_81c3744a7fe979d029d1e7b84afd613f" desc="Reload warning text content in Sensors View of the Device Toolbar">
*Requires reload
</message>
<message name="IDS_DEVTOOLS_82a9b801e28c4dec617b1cabc329f5bd" desc="Title of an action in the emulation tool to capture screenshot">
Capture screenshot
</message>
front_end/emulation/sensors.css
-5
View File
@@ -293,11 +293,6 @@ fieldset.device-orientation-override-section {
background: #f1f1f1;
}
.reload-warning {
align-self: center;
margin-left: 10px;
}
button.text-button {
margin: 0 10px;
}
front_end/langpacks/shared_strings.grdp
+6
View File
@@ -295,6 +295,9 @@
<message name="IDS_DEVTOOLS_6f6cb72d544962fa333e2e34ce64f719" desc="Text for the size of something">
Size
</message>
<message name="IDS_DEVTOOLS_72507d307327a430052f9fcd914dfaee" desc="Title of an action that reloads the DevTools">
Reload DevTools
</message>
<message name="IDS_DEVTOOLS_74540c79e377bea903e1023a46df5574" desc="Text to open a file">
Open file
</message>
@@ -325,6 +328,9 @@
<message name="IDS_DEVTOOLS_81aa2078d1eceede831b2976dbf32e62" desc="Text to clear everything">
Clear all
</message>
<message name="IDS_DEVTOOLS_81c3744a7fe979d029d1e7b84afd613f" desc="Reload warning text content in Sensors View of the Device Toolbar">
*Requires reload
</message>
<message name="IDS_DEVTOOLS_84d0c431d1472a0609d69b39dcb3a287" desc="Text for the index of something">
(index)
</message>
front_end/main/MainImpl.js
-1
View File
@@ -201,7 +201,6 @@ export class MainImpl {
const themeSetting = Common.Settings.Settings.instance().createSetting('uiTheme', 'systemPreferred');
UI.UIUtils.initializeUIUtils(document, themeSetting);
themeSetting.addChangeListener(Components.Reload.reload.bind(Components));
UI.UIUtils.installComponentRootStyles(/** @type {!Element} */ (document.body));
front_end/main/main_strings.grdp
-3
View File
@@ -75,9 +75,6 @@
<message name="IDS_DEVTOOLS_71f0df44b05415f2d20b59bb6188a118" desc="Text in the Shortcuts page in settings to explain a keyboard shortcut">
Toggle dock side
</message>
<message name="IDS_DEVTOOLS_72507d307327a430052f9fcd914dfaee" desc="Title of an action that reloads the DevTools">
Reload DevTools
</message>
<message name="IDS_DEVTOOLS_75def4784fa71c4ccde7762316ed0e3e" desc="Text in the Shortcuts page in settings to explain a keyboard shortcut in the Section">
Find next/previous
</message>
front_end/main/module.json
+1
View File
@@ -266,6 +266,7 @@
"settingName": "uiTheme",
"settingType": "enum",
"defaultValue": "systemPreferred",
"reloadRequired": true,
"options": [
{
"title": "Switch to system preferred color theme",
front_end/settings/SettingsScreen.js
+4 -1
View File
@@ -165,7 +165,10 @@ export class GenericSettingsTab extends SettingsTab {
self.runtime.extensions(UI.SettingsUI.SettingUI).forEach(this._addSettingUI.bind(this));
this._appendSection().appendChild(
UI.UIUtils.createTextButton(Common.UIString.UIString('Restore defaults and reload'), restoreAndReload));
UI.UIUtils.createTextButton(Common.UIString.UIString('Reload DevTools'), Components.Reload.reload));
this._appendSection().appendChild(UI.UIUtils.createTextButton(
Common.UIString.UIString('Restore defaults and reload DevTools'), restoreAndReload));
function restoreAndReload() {
Common.Settings.Settings.instance().clearAll();
front_end/settings/settings_strings.grdp
+3 -3
View File
@@ -1,8 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<grit-part>
<message name="IDS_DEVTOOLS_0f653ae68147586eb189d7baf37a696a" desc="Text of button in Settings Screen of the Settings">
Restore defaults and reload
</message>
<message name="IDS_DEVTOOLS_2cce43a6505a5d1bdf7ea98bf7fd1bc8" desc="Blackbox label in Framework Blackbox Settings Tab of the Settings">
Blackbox
</message>
@@ -30,6 +27,9 @@
<message name="IDS_DEVTOOLS_89bacc9715d030658f2602ce65426a7f" desc="Warning text content in Settings Screen of the Settings">
WARNING:
</message>
<message name="IDS_DEVTOOLS_a599915d2fc19385af5579f81ac713d5" desc="Text of button in Settings Screen of the Settings">
Restore defaults and reload DevTools
</message>
<message name="IDS_DEVTOOLS_ae25bc3ceebf44be4b59d0ade0e53f0b" desc="Placeholder text content in Framework Blackbox Settings Tab of the Settings">
No blackboxed patterns
</message>
front_end/ui/SettingsUI.js
+12 -2
View File
@@ -62,11 +62,12 @@ export const createSettingCheckbox = function(name, setting, omitParagraphElemen
/**
* @param {string} name
* @param {!Array<!{text: string, value: *, raw: (boolean|undefined)}>} options
* @param {boolean} reloadRequired
* @param {!Common.Settings.Setting} setting
* @param {string=} subtitle
* @return {!Element}
*/
const createSettingSelect = function(name, options, setting, subtitle) {
const createSettingSelect = function(name, options, reloadRequired, setting, subtitle) {
const settingSelectElement = createElement('p');
const label = settingSelectElement.createChild('label');
const select = settingSelectElement.createChild('select', 'chrome-select');
@@ -84,6 +85,12 @@ const createSettingSelect = function(name, options, setting, subtitle) {
select.add(new Option(optionName, option.value));
}
const reloadWarning = reloadRequired ? settingSelectElement.createChild('span', 'reload-warning hidden') : null;
if (reloadWarning) {
reloadWarning.textContent = ls`*Requires reload`;
ARIAUtils.markAsAlert(reloadWarning);
}
setting.addChangeListener(settingChanged);
settingChanged();
select.addEventListener('change', selectChanged, false);
@@ -101,6 +108,9 @@ const createSettingSelect = function(name, options, setting, subtitle) {
function selectChanged() {
// Don't use event.target.value to avoid conversion of the value to string.
setting.set(options[select.selectedIndex].value);
if (reloadWarning) {
reloadWarning.classList.remove('hidden');
}
}
};
@@ -156,7 +166,7 @@ export const createControlForSetting = function(setting, subtitle) {
return createSettingCheckbox(uiTitle, setting);
case 'enum':
if (Array.isArray(descriptor['options'])) {
return createSettingSelect(uiTitle, descriptor['options'], setting, subtitle);
return createSettingSelect(uiTitle, descriptor['options'], descriptor['reloadRequired'], setting, subtitle);
}
console.error('Enum setting defined without options');
return null;
front_end/ui/inspectorCommon.css
+5
View File
@@ -451,6 +451,11 @@ span[is=dt-icon-label] {
background-color: #9e9e9e;
}
.reload-warning {
align-self: center;
margin-left: 10px;
}
button.link {
border: none;
background: none;