Skip to content

Add copy buttons to the network inspector Headers and Cookies tabs - #10052

Draft
hkarmoush wants to merge 2 commits into
flutter:masterfrom
hkarmoush:network-inspector-copy
Draft

hkarmoush wants to merge 2 commits into
flutter:masterfrom
hkarmoush:network-inspector-copy

Conversation

@hkarmoush

Copy link
Copy Markdown
Contributor

Part of #8190

The Headers and Cookies tabs in the network request inspector had no way to copy their contents, and the cookie table and image metadata weren't selectable at all. This adds a copy button to the tab bar for Headers and Cookies, the same as Request and Response already have, so all the tabs work the same way.

  • Headers copies each section (General, Response Headers, Request Headers) under its title as key: value lines. Multi-value headers are joined the way they'd be sent (set-cookie gets one line per value, cookie is joined with ; ), so the text can be pasted straight into curl or a bug report.
  • Cookies copies response cookies as their raw Set-Cookie values (parsing drops Max-Age and SameSite, so the raw header is used when it's there) and request cookies as a Cookie header value.
  • Cookie cells and image metadata are now inside a SelectionArea. Selection doesn't work in VS Code on Mac (SelectableText and SelectionArea do not work correctly when calling document.execCommand("copy") unless you right-click flutter#182756), which is why the copy buttons are the main fix here.

While in there I also fixed calculateHeadersSize, used for the HAR export. It checked value is List<String>, but headers decoded from JSON are List<dynamic>, so list values were counted with their brackets. It now shares the same formatting as the copy text.

Per-row copy and the request list actions menu mentioned in the issue are left for a follow-up.

Before/after screenshots to come.

Pre-launch Checklist

General checklist

  • I read the Contributor Guide and followed the process outlined there for submitting PRs.
  • I read the Tree Hygiene wiki page, which explains my responsibilities.
  • I read the Flutter Style Guide recently, and have followed its advice.
  • I signed the CLA.
  • I updated/added relevant documentation (doc comments with ///).

Issues checklist

Tests checklist

  • I added new tests to check the change I am making...
  • OR there is a reason for not adding tests, which I explained in the PR description.

AI-tooling checklist

  • I did not use any AI tooling in creating this PR.
  • OR I did use AI tooling, and...
    • I read the AI contributions guidelines and agree to follow them.
    • I reviewed all AI-generated code before opening this PR.
    • I understand and am able to discuss the code in this PR.
    • I have verifed the accuracy of any AI-generated text included in the PR description.
    • I commit to verifying the accuracy of any AI-generated code or text that I upload in response to review comments.

Feature-change checklist

  • This PR does not change the DevTools UI or behavior and...
    • I added the release-notes-not-required label or left a comment requesting the label be added.
  • OR this PR does change the DevTools UI or behavior and...
    • I added an entry to packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md.
    • I included before/after screenshots and/or a GIF demo of the new UI to my PR description.
    • I ran the DevTools app locally to manually verify my changes.

build.yaml badge

If you need help, consider asking for help on Discord.

The Headers and Cookies tabs now have a copy button in the tab bar, the
same as Request and Response. Headers are copied as key: value lines
under each section title. Response cookies are copied as their raw
Set-Cookie values and request cookies as a Cookie header value.

Cookie values and image metadata are now selectable too.

Also fixes calculateHeadersSize, which never joined list values because
headers decoded from JSON are List<dynamic>, not List<String>.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant