Closed Bug 1584298 Opened 5 years ago Closed 5 years ago

Hard to copy response payload in developer tools

Categories

(DevTools :: Netmonitor, defect, P3)

Product:
DevTools
Component:
Netmonitor
Version:
69 Branch
Type:
defect

Tracking

(Not tracked)

Status:
RESOLVED DUPLICATE of bug 1403203

People

(Reporter: bmchild16, Unassigned)

Details

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:69.0) Gecko/20100101 Firefox/69.0

Steps to reproduce:

  1. In developer tools > network tab, select a request that responds with unformatted json.
  2. Select the response payload text (raw json)
    -- I've tried double clicking the payload to select as well as dragging the cursor up/down to select the entire payload
  3. Hit cmd + c
  4. Try to paste in an external text editor, but it was not copied

In some cases it I can select it just right and it will copy. Perhaps with smaller payloads it is just easier to select everything with dragging over the text.

Actual results:

No text was copied to the clipboard

Expected results:

When selecting raw json and hitting the copy command, it should be added to the clipboard. Or, if you were to add a copy button that would simplify adding the response payload to the clipboad.

I found if I triple click and hold it selects all of the text and I am able to copy it.

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Component: Untriaged → Netmonitor
Product: Firefox → DevTools

@bmchild16: I can't reproduce the issue on Win10. Selecting the text by mouse works just fine for me.

Can you please post screencast of what you are doing?

Honza

Flags: needinfo?(bmchild16)

I can reproduce on macOS.

I made a screencast but it's too large for Bugzilla, and sadly send.firefox.com will only keep it online for seven days:
https://send.firefox.com/download/3b15d481871d2ea0/#MxrrmS_1DOap3SoS-_AFmQ

It shows a few different response payloads:

  1. Working: a JS response, with the Response payload displayed as a single value (blue text). When selecting text with the mouse and releasing the mouse click, the selection is lost immediately. When selecting text again and, without releasing the mouse click, hitting Cmd+C, the selected content is copied.

  2. Working: a JSON response, when copying from the rendered "JSON" accordion content (using Cmd+C).

  3. Not working: the same JSON response, when copying from the "Response payload" accordion content, using Cmd+C. In the screencast we can see that hitting Cmd+V in an editor pastes the content selected in step 2.

  4. Not working: another JSON response, when opening the "Response payload" accordion content and triple-clicking to select all the text and hitting Cmd+V. Still pasting content copied in step 2.

Not shown in the screencast: copying text in a JSON request's "Response payload" CodeMirror instance using right-click and "Copy" does work.

I can't load the screencast (link expired)

I can repro #3

Re #4 - triple clicking selects just the clicked row not the all text (Win10). Should the triple click also automatically copy the row into clipboard?

Honza

Priority: -- → P3

Here's my screencast: https://drive.google.com/open?id=1lkssysLFalRS5MvmY2hqoR8LiWxsK5_p

Re #4: For me I had to triple click and hold the mouse button while hitting cmd + v to copy. My response was a single line.

Flags: needinfo?(bmchild16)

Thanks for the additional info!

I can reproduce the issue now.

Honza

Status: UNCONFIRMED → NEW
Ever confirmed: true

Raw Headers are also affected by this.

The focus that screws select up here is probably in TreeView, which I don't understand enough for why it should be used for the simple accordions: https://searchfox.org/mozilla-central/source/devtools/client/shared/components/tree/TreeView.js#675

We shouldn't be using TreeView for the accordions. It's super hacky, we have a bunch of small visual and UX issues linked to that (e.g. click the empty space between "Request Headers" and the "Raw Headers" button: you just clicked the "Raw Headers" button).

We should use the (more recent) shared Accordion component, which I'm trying to strengthen a bit for more use cases and use in Inspector: bug 1525939.

There was also a bug for using the shared Accordion in Netmonitor (I don't find it right now, but should be easy to find), someone contributed a big patch a few months ago which has gone a bit stale I believe. The issue was maybe that the patch tried to change too many things at a time; we should probably roll out the shared Accordion component one pane at a time rather than in all the Netmonitor sub-tabs all at once.

s/It's super hacky/It has a few downsides/
s/We should use/We could solve those by using/

We shouldn't be using TreeView for the accordions. It's super hacky, we have a bunch of small visual and UX issues linked to that

100% agree

There is bug 1403203 that covers transition to the real Accordion component.
There is a patch attached, but I haven't time to focus on it. Any help there appreciated!

should probably roll out the shared Accordion component one pane at a time rather than in all the Netmonitor sub-tabs all at once.

Yep, I have the same in mind.

Honza

Tracking fix in bug 1403203 then.

Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → DUPLICATE

This should be fixed by work in bug 1613885 and it works for me on my machine.

bmchild16, can you please verify on your machine using Firefox Nightly build, thanks!
https://www.mozilla.org/en-US/firefox/channel/desktop/

Honza

Flags: needinfo?(bmchild16)

Checked on the nightly build and it works great!

Flags: needinfo?(bmchild16)

Thanks for the update!

Honza

You need to log in before you can comment on or make changes to this bug.