1115363 - Sidebar and tables in Storage Inspector's don't allow to select and copy text

Status: VERIFIED FIXED

(DevTools :: Storage Inspector, defect, P3)

Description

[u451083]

Attachment: StorageCookiesValues.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:34.0) Gecko/20100101 Firefox/34.0
Build ID: 20141125180439

Steps to reproduce:

1. Open Storage Inspector;
2. Select Cookies (or Local or Session Storage) in Storage tree;
3. Select an element in Table Widget;
3.1. Values of the element will open in Sidebar.


Actual results:

I hover pointer to a value in Sidebar, but can not select/copy any data from values (see attachment).

In instance: I want to select only time stamp in the creationTime value. I click on a value, but can not highlight any characters to copy them. There is no menu under left click.


Expected results:

Values in Sidebar allowed to be selected and copied with mouse cursor highlighting.

Comment 1

[maxlath]

I think I come for the same thing:
when inspecting an indexed db, I can't see the whole value, thus I can't highlight it all for copying; and indeed there is no menu available at left click to provide to this need.

-- on Ubuntu 12.04 - Mozilla Firefox 38.0

Comment 3

[Sebastian Zartner [:sebo]]

Same is valid for the tables. I assume, this may be implemented as part of bug 1214318, though might also happen separately.

Sebastian

Comment 4

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

This is a really easy CSS fix so setting it as a good first bug.

Comment 5

[Daniele "Mte90" Scasciafratte]

I tried with user-select property on the label but when i click on them they change the color, so i think that CSS is not enough for fix.
Any suggestion?

Comment 6

[Daniele "Mte90" Scasciafratte]

As i can see that problem is not happening on network panel in the sidebar but i cannot see css difference.

Comment 7

[Sebastin Santy [:seban]]

Hi Michael,

The values can be copied as a whole (a line). Do we expect to copy, selected parts of it?

Comment 8

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

(In reply to Sebastin Santy [:seban] from comment #7)
> Hi Michael,
> 
> The values can be copied as a whole (a line). Do we expect to copy, selected
> parts of it?

Yes, users should be able to copy any section they want.

Comment 9

[saranandyashu]

I am interested in fixing this bug.can some one assign the bug to me..

Comment 10

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

The file you will do most of the work on is:
devtools/client/shared/widgets/TableWidget.js

Your first task would be to work out why they are not selectable.

Comment 11

[saranandyashu]

You gave me location and file which i have to work.when i open the file there is a code of some 800 lines.so how to know which part of the code i have to change so that bug gets fixed.

Comment 12

[Patrick Brosset <:pbro>]

[good first bug] whiteboard -> keyword mass change

Comment 13

[Patrick Brosset <:pbro>]

This bug has not been updated in the last 6 months. Resetting the assignee field.
Please, feel free to pick it up again and add a comment outlining your plans for it if you do still intend to work on it.
This is just trying to clean our backlog of bugs and make bugs available for people.

Comment 14

[Utkarsh]

Where can I get the code for storage inspector? I wish to work on this bug

Comment 15

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

(In reply to Utkarsh from comment #14)

Where can I get the code for storage inspector? I wish to work on this bug

@Utkarsh: First you will need to get yourself set up. Please follow the advice given here to find out how to do that:
https://docs.firefox-dev.tools/contributing.html

Comment 16

[Nadav]

Hello there!
I am also interested in trying to fix this.
I am completely new, so I guess have some beginner's silly questions...

I managed to build firefox on my computer, and I took a look at the relevant code file.
Being new, I figured I'll try to throw some log messages into the code just to get the feeling what's going on.
But I didn't realize that console.log does not work in this context...
Also I keep getting error messages from firefox, even after deleting this lines I added to the code.
It seems that the changes were cached somewhere...
Could you please provide some guideline regarding how to debug / add log messages to the code ?
And also some advice regarding how to revert changes and avoid cache ?

Thanks !

Nadav

Comment 17

[Utkarsh]

How do I open storage inspector after building and running firefox using mozilla-central

Comment 18

[Sebastian Zartner [:sebo]]

(In reply to Nadav from comment #16)

But I didn't realize that console.log does not work in this context...

console.log() in the browser context logs to the Browser Toolbox available via Ctrl+Alt+Shift+I, though you first have to enable it as explained on MDN.

Also I keep getting error messages from firefox, even after deleting this lines I added to the code.
It seems that the changes were cached somewhere...

After changing the code you need to do a ./mach build faster to rebuild it. (At least that works fine for me, but I am far from being an expert in Firefox' build process.)

And also some advice regarding how to revert changes and avoid cache ?

In Mercurial reverting local changes can be done via hg revert --all. Though note that this removes all your changes and resets the files to their checkout state.

(In reply to Utkarsh from comment #17)

How do I open storage inspector after building and running firefox using mozilla-central

The Storage Inspector should normally be enabled by default and available under the "Storage" tab. If not, you can enable it via the DevTools Settings under "Default Developer Tools".
If you can't get it opened, you may have an error in your code changes for it.

In any case, I think you both (Nadav and Utkarsh) should talk to each other to avoid conflicts in working on this bug.

Sebastian

PS: I'm also just a free contributor. Mike is the right person to ask about any more detailed info about the workflow and what exactly needs to be done to fix this.

Comment 19

[Adrian Anderson]

Hello, Mike would love to work on this bug and I am an Outreachy applicant. Any suggestions on where to start?

Comment 20

[Fanny Batista Vieira [:fanny] [:fanny]]

Hi @Adrian. I'm very interested in this bug too, i'm a newcomer and gsoc applicant, i would like to work in it. I believe that we can work together to fix this.

I think this link can be very useful for you.

After read that, i started debug TableWidget, it seems for me, that the problem is here:

https://hg.mozilla.org/mozilla-central/file/tip/devtools/client/shared/widgets/TableWidget.js#l1563

This method receives the item selected and set some labels, this labels, apparently, do not have the class that enable selection.

I saw that the css used on the widget is it: https://hg.mozilla.org/mozilla-central/file/tip/devtools/client/shared/widgets/widgets.css

But i don't know which class, i need add in this file.

@miker, do you can help us? And, if possible assign this bug for us too

Comment 21

[Fanny Batista Vieira [:fanny] [:fanny]]

in this image (i used the browser toolbox), we can see the classes of the labels

Comment 22

[Adrian Anderson]

Wow I see @fanny that's quite the investigation Thanks I will begin looking it

Comment 23

[Adrian Anderson]

Hey, @fanny whats good I was looking at the code and the suggestion you gave to me but I'm a little confused my self lol. Is
the fix supposed to be in Sidebar.js or Table-Widget.js base on my investigation they are separate implementations and further
digging down they both don't have any CSS independent files

https://mdn.mozillademos.org/files/14249/2-storage-inspector-annotated.png
Sidebar.js
https://bugzilla.mozilla.org/attachment.cgi?id=8541252
https://hg.mozilla.org/mozilla-central/devtools/client/shared/components/Sidebar.js

Comment 24

[Fanny Batista Vieira [:fanny] [:fanny]]

Adrian, i think that the problem is in TableWidget.js, because the labels that you see in sibebar are set it there.

Particularly, here, if i understood well: https://hg.mozilla.org/mozilla-central/file/tip/devtools/client/shared/widgets/TableWidget.js#l1567

the only method that i saw in sidebar that build a attribute list is this: https://hg.mozilla.org/mozilla-central/file/tip/devtools/client/storage/ui.js#l714

But,i don't think so that the problem is there, i can be wrong.

Comment 25

[Fanny Batista Vieira [:fanny] [:fanny]]

i saw a example in network tab, that it's possible copy an attribute and the class set there is objectBox objectBox-String, maybe the problem is because the classes used in labels are plain .. as we see, here comment 21

Comment 26

[nikitarajput360]

Hey, I am an Outreachy applicant. Can I work on this bug? Can you assign this to me or i just have to start working on it.

Comment 27

[Fanny Batista Vieira [:fanny] [:fanny]]

nikitara, me and adrian are working on this bug

Comment 28

[nikitarajput360]

(In reply to Fanny Batista Vieira [:fanny] [:fanny] from comment #27)

nikitara, me and adrian are working on this bug

are you an outreachy applicant too?

Comment 29

[Fanny Batista Vieira [:fanny] [:fanny]]

no, i'm a gsoc applicant

Comment 30

[nikitarajput360]

(In reply to Fanny Batista Vieira [:fanny] [:fanny] from comment #29)

no, i'm a gsoc applicant
since you are already working on this
I will leave you to it :)

Comment 31

[Fanny Batista Vieira [:fanny] [:fanny]]

thanks, if you can help us too, we'll appreciate :D

Comment 32

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Having looked into this I should point out that true text selection will not work with our variables view component. This is because the component itself manages focus and blur in such a way that only one item can be selected at any one time.

This is also a XUL document that has it's own special quirks so I will add some steps you need to take in order to get this working:

1. Add a copy label to devtools/client/locales/en-US/storage.dtd for l10n.
2. Find the place in devtools/client/shared/widgets/VariablesView.jsm where we handle [CTRL][C].
3. Move the copy logic to a _copyItem function so that it can be called from outside the component.
4. Add a variable-view-popup to devtools/client/storage/index.xul.
5. In devtools/client/storage/ui.js add contextMenuId: "variable-view-popup" to GENERIC_VARIABLES_VIEW_SETTINGS.
6. Add popup and listeners to the StorageUI constructor (see _tablePopup).
7. Add onVariableViewPopupShowing() and onCopy() to devtools/client/storage/ui.js.

Comment 33

[Fanny Batista Vieira [:fanny] [:fanny]]

Hi miker, thanks for your feedback, i'll analyse this steps.

Comment 34

[Fanny Batista Vieira [:fanny] [:fanny]]

Hi miker, i already can copy an element as you see in this image: https://imgur.com/hgWjOuK, i've completed steps one to six and seven, parcially, but i'm little confuse with onVariableViewPopupShowing(), i used onTablePopupShowing as a base, and from what i saw, this verify types and methods that are enable in view. In the case, would I do the same for the variable popup considering only the copy option?

Comment 35

[Fanny Batista Vieira [:fanny] [:fanny]]

Attachment: Bug 1115363 - Implement copy text option on sidebar of storage. r=miker!

Before this change, there was no option to copy text of an attribute in
sidebar of storage.You can now copy an attribute and it's text.

Comment 36

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=b7a426dac80404040efbf645e608506f80390d91

Comment 37

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f12b85babb3f
Implement copy text option on sidebar of storage. r=miker

Comment 38

[Stefan Hindli [:stefan_hindli]]

https://hg.mozilla.org/mozilla-central/rev/f12b85babb3f

Comment 39

[Timea Zsoldos [:zstimi/tzsoldos], Desktop QA]

I have reproduced this issue using Firefox 66.0a1 on Win 10 x64.
I can confirm this issue is fixed, I verified using Firefox 68.0b7 on Win 10 x64, macOS 10.13.6 and Ubuntu 18.04 x64.