Skip to content

Commit

Permalink
Improve the network screen UI for narrow views (#7726)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kenzieschmoll
kenzieschmoll authored May 9, 2024
1 parent 4b71c77 commit a855c4e
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 46 deletions.
27 changes: 18 additions & 9 deletions packages/devtools_app/lib/src/screens/network/network_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import '../../shared/table/table.dart';
import '../../shared/table/table_data.dart';
import '../../shared/ui/filter.dart';
import '../../shared/ui/search.dart';
import '../../shared/ui/utils.dart';
import '../../shared/utils.dart';
import 'network_controller.dart';
import 'network_model.dart';
Expand Down Expand Up @@ -209,6 +210,7 @@ class _NetworkProfilerControlsState extends State<_NetworkProfilerControls>

@override
Widget build(BuildContext context) {
final screenWidth = ScreenSize(context).width;
final hasRequests = _filteredRequests.isNotEmpty;
return Row(
children: [
Expand Down Expand Up @@ -237,7 +239,9 @@ class _NetworkProfilerControlsState extends State<_NetworkProfilerControls>
SearchField<NetworkController>(
searchController: widget.controller,
searchFieldEnabled: hasRequests,
searchFieldWidth: wideSearchFieldWidth,
searchFieldWidth: screenWidth <= MediaSize.xs
? defaultSearchFieldWidth
: wideSearchFieldWidth,
),
const SizedBox(width: denseSpacing),
DevToolsFilterButton(
Expand Down Expand Up @@ -268,10 +272,11 @@ class _NetworkProfilerBody extends StatelessWidget {

@override
Widget build(BuildContext context) {
final splitAxis = SplitPane.axisFor(context, 1.0);
return SplitPane(
initialFractions: const [0.5, 0.5],
initialFractions: splitAxis == Axis.horizontal ? [0.6, 0.4] : [0.5, 0.5],
minSizes: const [200, 200],
axis: Axis.horizontal,
axis: splitAxis,
children: [
ValueListenableBuilder<List<NetworkRequest>>(
valueListenable: controller.filteredData,
Expand Down Expand Up @@ -353,7 +358,7 @@ class UriColumn extends ColumnData<NetworkRequest>
UriColumn()
: super.wide(
'Uri',
minWidthPx: scaleByFontFactor(100.0),
minWidthPx: scaleByFontFactor(isEmbedded() ? 100 : 150.0),
showTooltip: true,
);

Expand Down Expand Up @@ -385,7 +390,7 @@ class UriColumn extends ColumnData<NetworkRequest>
}

class MethodColumn extends ColumnData<NetworkRequest> {
MethodColumn() : super('Method', fixedWidthPx: scaleByFontFactor(70));
MethodColumn() : super('Method', fixedWidthPx: scaleByFontFactor(60));

@override
String getValue(NetworkRequest dataObject) {
Expand Down Expand Up @@ -474,7 +479,8 @@ class StatusColumn extends ColumnData<NetworkRequest>
: super(
'Status',
alignment: ColumnAlignment.right,
fixedWidthPx: scaleByFontFactor(62),
headerAlignment: TextAlign.right,
fixedWidthPx: scaleByFontFactor(50),
);

@override
Expand Down Expand Up @@ -510,7 +516,8 @@ class TypeColumn extends ColumnData<NetworkRequest> {
: super(
'Type',
alignment: ColumnAlignment.right,
fixedWidthPx: scaleByFontFactor(62),
headerAlignment: TextAlign.right,
fixedWidthPx: scaleByFontFactor(50),
);

@override
Expand All @@ -529,7 +536,8 @@ class DurationColumn extends ColumnData<NetworkRequest> {
: super(
'Duration',
alignment: ColumnAlignment.right,
fixedWidthPx: scaleByFontFactor(80),
headerAlignment: TextAlign.right,
fixedWidthPx: scaleByFontFactor(75),
);

@override
Expand All @@ -554,7 +562,8 @@ class TimestampColumn extends ColumnData<NetworkRequest> {
: super(
'Timestamp',
alignment: ColumnAlignment.right,
fixedWidthPx: scaleByFontFactor(135),
headerAlignment: TextAlign.right,
fixedWidthPx: scaleByFontFactor(115),
);

@override
Expand Down
36 changes: 0 additions & 36 deletions packages/devtools_app/macos/Runner.xcodeproj/project.pbxproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@
33CC10F62044A3C60003C045 /* MainMenu.xib in Resources */ = {isa = PBXBuildFile; fileRef = 33CC10F42044A3C60003C045 /* MainMenu.xib */; };
33CC11132044BFA00003C045 /* MainFlutterWindow.swift in Sources */ = {isa = PBXBuildFile; fileRef = 33CC11122044BFA00003C045 /* MainFlutterWindow.swift */; };
E678665441E5C0F7F629BAD5 /* Pods_Runner.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 5062035DDDD18FB35E98D5B6 /* Pods_Runner.framework */; };
F6D68DDB908CAECA76BB6E78 /* Pods_RunnerTests.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 966F755DF85E4D687B55AB0F /* Pods_RunnerTests.framework */; };
/* End PBXBuildFile section */

/* Begin PBXContainerItemProxy section */
Expand Down Expand Up @@ -80,22 +79,17 @@
33E51914231749380026EE4D /* Release.entitlements */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.entitlements; path = Release.entitlements; sourceTree = "<group>"; };
33E5194F232828860026EE4D /* AppInfo.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = AppInfo.xcconfig; sourceTree = "<group>"; };
5062035DDDD18FB35E98D5B6 /* Pods_Runner.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_Runner.framework; sourceTree = BUILT_PRODUCTS_DIR; };
51D69F6B9204385AC92D0E75 /* Pods-RunnerTests.profile.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-RunnerTests.profile.xcconfig"; path = "Target Support Files/Pods-RunnerTests/Pods-RunnerTests.profile.xcconfig"; sourceTree = "<group>"; };
68C587FFA5A0B8F46A0C5150 /* Pods-Runner.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.release.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig"; sourceTree = "<group>"; };
7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = Release.xcconfig; sourceTree = "<group>"; };
966F755DF85E4D687B55AB0F /* Pods_RunnerTests.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_RunnerTests.framework; sourceTree = BUILT_PRODUCTS_DIR; };
9740EEB21CF90195004384FC /* Debug.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; path = Debug.xcconfig; sourceTree = "<group>"; };
A7CE48BF63861DD9F3A9FA2F /* Pods-Runner.profile.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.profile.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig"; sourceTree = "<group>"; };
D5697440EB9B4CFA6D35B5BC /* Pods-RunnerTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-RunnerTests.debug.xcconfig"; path = "Target Support Files/Pods-RunnerTests/Pods-RunnerTests.debug.xcconfig"; sourceTree = "<group>"; };
DACECF9A61B9BBC94A1A20E4 /* Pods-RunnerTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-RunnerTests.release.xcconfig"; path = "Target Support Files/Pods-RunnerTests/Pods-RunnerTests.release.xcconfig"; sourceTree = "<group>"; };
/* End PBXFileReference section */

/* Begin PBXFrameworksBuildPhase section */
331C80D2294CF70F00263BE5 /* Frameworks */ = {
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
F6D68DDB908CAECA76BB6E78 /* Pods_RunnerTests.framework in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
Expand Down Expand Up @@ -191,9 +185,6 @@
11BB555C0F1767B9B5CB7CE0 /* Pods-Runner.debug.xcconfig */,
68C587FFA5A0B8F46A0C5150 /* Pods-Runner.release.xcconfig */,
A7CE48BF63861DD9F3A9FA2F /* Pods-Runner.profile.xcconfig */,
D5697440EB9B4CFA6D35B5BC /* Pods-RunnerTests.debug.xcconfig */,
DACECF9A61B9BBC94A1A20E4 /* Pods-RunnerTests.release.xcconfig */,
51D69F6B9204385AC92D0E75 /* Pods-RunnerTests.profile.xcconfig */,
);
name = Pods;
path = Pods;
Expand All @@ -203,7 +194,6 @@
isa = PBXGroup;
children = (
5062035DDDD18FB35E98D5B6 /* Pods_Runner.framework */,
966F755DF85E4D687B55AB0F /* Pods_RunnerTests.framework */,
);
name = Frameworks;
sourceTree = "<group>";
Expand All @@ -215,7 +205,6 @@
isa = PBXNativeTarget;
buildConfigurationList = 331C80DE294CF71000263BE5 /* Build configuration list for PBXNativeTarget "RunnerTests" */;
buildPhases = (
1A853CBD8E1A280FD3313832 /* [CP] Check Pods Manifest.lock */,
331C80D1294CF70F00263BE5 /* Sources */,
331C80D2294CF70F00263BE5 /* Frameworks */,
331C80D3294CF70F00263BE5 /* Resources */,
Expand Down Expand Up @@ -322,28 +311,6 @@
/* End PBXResourcesBuildPhase section */

/* Begin PBXShellScriptBuildPhase section */
1A853CBD8E1A280FD3313832 /* [CP] Check Pods Manifest.lock */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputFileListPaths = (
);
inputPaths = (
"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
"${PODS_ROOT}/Manifest.lock",
);
name = "[CP] Check Pods Manifest.lock";
outputFileListPaths = (
);
outputPaths = (
"$(DERIVED_FILE_DIR)/Pods-RunnerTests-checkManifestLockResult.txt",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
showEnvVarsInLog = 0;
};
3399D490228B24CF009A79C7 /* ShellScript */ = {
isa = PBXShellScriptBuildPhase;
alwaysOutOfDate = 1;
Expand Down Expand Up @@ -472,7 +439,6 @@
/* Begin XCBuildConfiguration section */
331C80DB294CF71000263BE5 /* Debug */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = D5697440EB9B4CFA6D35B5BC /* Pods-RunnerTests.debug.xcconfig */;
buildSettings = {
BUNDLE_LOADER = "$(TEST_HOST)";
CURRENT_PROJECT_VERSION = 1;
Expand All @@ -487,7 +453,6 @@
};
331C80DC294CF71000263BE5 /* Release */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = DACECF9A61B9BBC94A1A20E4 /* Pods-RunnerTests.release.xcconfig */;
buildSettings = {
BUNDLE_LOADER = "$(TEST_HOST)";
CURRENT_PROJECT_VERSION = 1;
Expand All @@ -502,7 +467,6 @@
};
331C80DD294CF71000263BE5 /* Profile */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = 51D69F6B9204385AC92D0E75 /* Pods-RunnerTests.profile.xcconfig */;
buildSettings = {
BUNDLE_LOADER = "$(TEST_HOST)";
CURRENT_PROJECT_VERSION = 1;
Expand Down
3 changes: 2 additions & 1 deletion packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ TODO: Remove this section if there are not any general updates.

## Network profiler updates

TODO: Remove this section if there are not any general updates.
* Add better support for narrow viewing windows, like when this
screen is embedded in the IDE. - [#7726](https://github.com/flutter/devtools/pull/7726)

## Logging updates

Expand Down

0 comments on commit a855c4e

Please sign in to comment.