Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI customisations for 0.73 launch #12

Merged
merged 5 commits into from
Sep 27, 2023
Merged

UI customisations for 0.73 launch #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a6c73da
Customise window title and favicon
huntie Sep 21, 2023
1c92ad9
Add "Technology Preview" label to Welcome panel
huntie Sep 22, 2023
df72105
Update Welcome panel links
huntie Sep 22, 2023
a47122b
Disable Performance panel, enable legacy JS Profiler
huntie Sep 22, 2023
cbd54e2
Disable Network panel
huntie Sep 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions config/gni/devtools_grd_files.gni
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ grd_files_release_sources = [
"front_end/Images/experiment-check.svg",
"front_end/Images/experiment.svg",
"front_end/Images/eye.svg",
"front_end/Images/favicon.ico",
"front_end/Images/file-document.svg",
"front_end/Images/file-font.svg",
"front_end/Images/file-generic.svg",
Expand Down
1 change: 1 addition & 0 deletions config/gni/devtools_image_files.gni
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ devtools_image_files = [
"chromeMiddle.avif",
"chromeRight.avif",
"cssoverview_icons_2x.avif",
"favicon.ico",
"navigationControls_2x.png",
"navigationControls.png",
"nodeIcon.avif",
Expand Down
Binary file added front_end/Images/favicon.ico
View file
Open in desktop
Binary file not shown.
3 changes: 2 additions & 1 deletion front_end/entrypoint_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>DevTools</title>
<title>DevTools (React Native)</title>
<style>
@media (prefers-color-scheme: dark) {
body {
Expand All @@ -16,5 +16,6 @@
</style>
<meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">
<meta name="referrer" content="no-referrer">
<link rel="icon" href="./Images/favicon.ico">
<script type="module" src="./entrypoints/%ENTRYPOINT_NAME%/%ENTRYPOINT_NAME%.js"></script>
<body class="undocked" id="-blink-dev-tools">
6 changes: 0 additions & 6 deletions front_end/entrypoints/main/MainImpl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,12 +313,6 @@ export class MainImpl {
'timelineAsConsoleProfileResultPanel', 'View console.profile() results in the Performance panel for Node.js',
true);

// JS Profiler
Root.Runtime.experiments.register(
'jsProfilerTemporarilyEnable', 'Enable JavaScript Profiler temporarily', /* unstable= */ false,
'https://developer.chrome.com/blog/js-profiler-deprecation/',
'https://bugs.chromium.org/p/chromium/issues/detail?id=1354548');

// Debugging
Root.Runtime.experiments.register(
'wasmDWARFDebugging', 'WebAssembly Debugging: Enable DWARF support', undefined,
Expand Down
3 changes: 1 addition & 2 deletions front_end/entrypoints/rn_inspector/BUILD.gn
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,17 @@ devtools_entrypoint("entrypoint") {
"../../panels/elements:meta",
"../../panels/emulation:meta",
"../../panels/issues:meta",
"../../panels/js_profiler:meta",
"../../panels/layer_viewer:meta",
"../../panels/layers:meta",
"../../panels/lighthouse:meta",
"../../panels/media:meta",
"../../panels/mobile_throttling:meta",
"../../panels/network:meta",
"../../panels/performance_monitor:meta",
"../../panels/recorder:meta",
"../../panels/rn_welcome:meta",
"../../panels/security:meta",
"../../panels/sensors:meta",
"../../panels/timeline:meta",
"../../panels/web_audio:meta",
"../../panels/webauthn:meta",
"../main:bundle",
Expand Down
17 changes: 13 additions & 4 deletions front_end/entrypoints/rn_inspector/rn_inspector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,30 @@ import '../../panels/developer_resources/developer_resources-meta.js';
import '../inspector_main/inspector_main-meta.js';
import '../../panels/issues/issues-meta.js';
import '../../panels/mobile_throttling/mobile_throttling-meta.js';
import '../../panels/timeline/timeline-meta.js';
import '../../panels/js_profiler/js_profiler-meta.js';
import '../../panels/rn_welcome/rn_welcome-meta.js';

import * as Root from '../../core/root/root.js';
import * as Main from '../main/main.js';

// Legacy JavaScript Profiler - we support this until Hermes can support the
// modern Performance panel.
Root.Runtime.experiments.register(
Root.Runtime.ExperimentName.JS_PROFILER_TEMP_ENABLE,
'Enable JavaScript Profiler (legacy)',
/* unstable */ false,
);

Root.Runtime.experiments.register(
Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI,
'Show React Native-specific UI',
/* unstable */ false,
);

Root.Runtime.experiments.enableExperimentsByDefault(
[Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI],
);
Root.Runtime.experiments.enableExperimentsByDefault([
Root.Runtime.ExperimentName.JS_PROFILER_TEMP_ENABLE,
Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI,
]);

// @ts-ignore Exposed for legacy layout tests
self.runtime = Root.Runtime.Runtime.instance({forceNew: true});
Expand Down
16 changes: 1 addition & 15 deletions front_end/panels/js_profiler/js_profiler-meta.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,28 +88,14 @@ UI.ViewManager.registerViewExtension({
title: i18nLazyString(UIStrings.profiler),
commandPrompt: i18nLazyString(UIStrings.showProfiler),
order: 65,
persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
persistence: UI.ViewManager.ViewPersistence.PERMANENT,
experiment: Root.Runtime.ExperimentName.JS_PROFILER_TEMP_ENABLE,
async loadView() {
const Profiler = await loadProfilerModule();
return Profiler.ProfilesPanel.JSProfilerPanel.instance();
},
});

UI.ViewManager.registerViewExtension({
location: UI.ViewManager.ViewLocationValues.PANEL,
id: 'timeline',
title: i18nLazyString(UIStrings.performance),
commandPrompt: i18nLazyString(UIStrings.showPerformance),
order: 66,
hasToolbar: false,
isPreviewFeature: true,
async loadView() {
const Timeline = await loadTimelineModule();
return Timeline.TimelinePanel.TimelinePanel.instance({forceNew: null, isNode: true});
},
});

UI.ActionRegistration.registerActionExtension({
actionId: 'profiler.js-toggle-recording',
category: UI.ActionRegistration.ActionCategory.JAVASCRIPT_PROFILER,
Expand Down
3 changes: 3 additions & 0 deletions front_end/panels/profiler/ProfilesPanel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -704,6 +704,9 @@ export class JSProfilerPanel extends ProfilesPanel implements UI.ActionRegistrat
const registry = instance;
super('js_profiler', [registry.cpuProfileType], 'profiler.js-toggle-recording');
this.splitWidget().mainWidget()?.setMinimumSize(350, 0);
if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI)) {
return;
}
if (Root.Runtime.experiments.isEnabled('jsProfilerTemporarilyEnable')) {
this.#showDeprecationInfobar();
} else {
Expand Down
9 changes: 7 additions & 2 deletions front_end/panels/rn_welcome/RNWelcome.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import * as LitHtml from '../../ui/lit-html/lit-html.js';
const UIStrings = {
/** @description The name of the debugging product */
debuggerBrandName: 'React Native JS Inspector',
/** @description The name of the debugging product */
techPreviewLabel: 'Technology Preview',
/** @description Welcome text */
welcomeMessage: 'Welcome to debugging in React Native',
/** @description "Debugging docs" link */
Expand Down Expand Up @@ -58,15 +60,18 @@ export class RNWelcomeImpl extends UI.Widget.VBox {
<div class="rn-welcome-title">
${i18nString(UIStrings.debuggerBrandName)}
</div>
<div class="rn-welcome-title-accessory">
${i18nString(UIStrings.techPreviewLabel)}
</div>
</div>
<div class="rn-welcome-tagline">
${i18nString(UIStrings.welcomeMessage)}
</div>
<div class="rn-welcome-links">
<x-link class="devtools-link" href="https://reactnative.dev/docs/next/debugging">
<x-link class="devtools-link" href="https://reactnative.dev/docs/debugging">
${i18nString(UIStrings.docsLabel)}
</x-link>
<x-link class="devtools-link" href="https://reactnative.dev/blog/tags/debugging">
<x-link class="devtools-link" href="https://reactnative.dev/blog">
${i18nString(UIStrings.whatsNewLabel)}
</x-link>
</div>
Expand Down
9 changes: 9 additions & 0 deletions front_end/panels/rn_welcome/rnWelcome.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,15 @@
color: var(--color-text-primary);
}

.rn-welcome-title-accessory {
margin-left: 12px;
padding: 4px 8px;
border-radius: 4px;
background-color: var(--color-purple-bright);
font-size: 12px;
color: var(--color-on-primary);
}

.rn-welcome-tagline {
margin-bottom: 24px;
font-size: 1rem;
Expand Down