Closed Bug 1115363 Opened 9 years ago Closed 5 years ago

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

Categories

(DevTools :: Storage Inspector, defect, P3)

34 Branch
defect

Tracking

(firefox68 verified)

VERIFIED FIXED
Firefox 68
Tracking Status
firefox68 --- verified

People

(Reporter: u451083, Assigned: fanny, Mentored)

References

Details

(Keywords: good-first-bug, Whiteboard: [good-first-bug lang=css,js])

Attachments

(2 files)

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.
Component: Untriaged → Developer Tools: Storage Inspector
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
Blocks: 1194190
Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: Disallow selecting a storage values → Storage Inspector's variables view should be selectable
Same is valid for the tables. I assume, this may be implemented as part of bug 1214318, though might also happen separately.

Sebastian
OS: Mac OS X → All
Hardware: x86 → All
See Also: → 1214318
Summary: Storage Inspector's variables view should be selectable → Sidebar and tables in Storage Inspector's don't allow to select and copy text
This is a really easy CSS fix so setting it as a good first bug.
Mentor: mratcliffe
Priority: -- → P3
Whiteboard: [good-first-bug lang=css,js]
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?
As i can see that problem is not happening on network panel in the sidebar but i cannot see css difference.
Hi Michael,

The values can be copied as a whole (a line). Do we expect to copy, selected parts of it?
Flags: needinfo?(mratcliffe)
(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.
Flags: needinfo?(mratcliffe)
I am interested in fixing this bug.can some one assign the bug to me..
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.
Assignee: nobody → saranandyashu
Status: NEW → ASSIGNED
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.
[good first bug] whiteboard -> keyword mass change
Keywords: good-first-bug
Product: Firefox → DevTools

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.

Assignee: saranandyashu → nobody
Status: ASSIGNED → NEW

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

(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

Flags: needinfo?(f20160600)

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

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

Flags: needinfo?(f20160600)

(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.

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

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

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

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

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

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.

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

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.

Flags: needinfo?(mratcliffe)

nikitara, me and adrian are working on this bug

(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?

no, i'm a gsoc applicant

(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 :)

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

Assignee: nobody → fannyvieira082
Flags: needinfo?(mratcliffe)

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.

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

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?

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.

Pushed by mratcliffe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/f12b85babb3f
Implement copy text option on sidebar of storage. r=miker
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
Flags: qe-verify+

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.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: