Adding labels to the saved sessions

[emecas]

This is how it looks right now:

I am wondering how easy would be to add a label for each saved session, that helps for a better identification what is the session about, something like this:

Thanks

[allen505]

Hi @emecas . Thanks for issue. I'd like to know more on what exactly you mean by label:

1. Is it just a single work like a tag?
2. Is it a sentence?

The first way is relatively simple and maybe in the future each session can have a background color related to the tag for easy identification. One thing blocking such a feature is editable text which is also blocking the #4 issue. If we can find a easily adding and modifying editable text we can implement this
With the second option one thing to consider is how long the sentence can be.

If you are interested in working on this issue please let me know.

[emecas]

Thank you @allen505 for replying so fast

I think, it could be a single word, something meaningful that make the session identifiable with a quick view, easier than having to expand the tabs content in order to see what is in each of the saved sessions.

The background color is a good idea too, but I would keep this simple for now.

I see what you meant by the issue about editable text, so what if it is just an optional word that you can input right when someone is saving the window? that way it must not be editable.

[allen505]

What I meant to say about the Editable Text is that it is definetly possible, but I haven't looked deep into it and haven't tried implementing. So it is definitely possible and I think it is the way to go. I have provided some implementation idea here

I'd like this feature to be available, but not a must. Making the user add a tag when saving would in my opinion would make it a must and the user might have to make atleast an additional click in order to avoid it.

My suggestion would be to keep it as a editable text or even a dropdown(which will certainly complicate things but is best suited for a tag) which is selected after the save is made.

[emecas]

I'd like this feature to be available, but not a must. Making the user add a tag when saving would in my opinion would make it a must and the user might have to make atleast an additional click in order to avoid it.

My suggestion would be to keep it as a editable text or even a dropdown(which will certainly complicate things but is best suited for a tag) which is selected after the save is made.

it sounds good to me , thanks, how can i help ?

[allen505]

Before you start working on this issue, I would recomend you to check out #4 and see if that would remove the need for adding tags. If it does then you could work on #4 by adding the editable text because that is a priority for the next release.
The part where the Accordion is made can be found here in the createList() function

[emecas]

Thanks @allen505

Since extensions development is not something that I am too involved on, if you don't mind, I would like to ask some questions before going deeper on the source code:

1. in addition to the Development setup section available currently on README.md file, what other tools you typically use for for save-for-later development? or for browser add-on/extensions' development in general?

2. Any other recommendation regarding to the development process you follow?

3. is the Development setup section still up to date for old and latest browsers versions or any consideration you need to take into account about compatibility?

[allen505]

Sorry for the late reply.

1. Development setup does contain everything you need to set things up. You'll need a text editor like VS Code. Creating a Web extension is very much like creating a web page. Adding to the normal Web page stuff, we have some special API. The Web Extension docs is really well documented source of these APIs.
2. Just a browser and text editor should do. I use Chromium+VS Code.
3. Yes it is up to date as nothing notable has changed since I've written it

A tip would be to open the extension and right-click. Choose Inspect here. Now a developer tool should've opened up. This tool is similar to a dev console for web pages. You can console.log here and debug the Extension.

If there are any doubts still lingering please do ask. Also let me know the issue you'll be working on so that I can assign you. I would suggest you checkout or work on #4 before going into this issue.

[emecas]

Sorry for the late reply.

1. Development setup does contain everything you need to set things up. You'll need a text editor like VS Code. Creating a Web extension is very much like creating a web page. Adding to the normal Web page stuff, we have some special API. The Web Extension docs is really well documented source of these APIs.

Yes, that was my original impression and approach, but I was missing something closer to a IDE experience during the extensions development. It took me too much discovering something really nice, I am covering it in the next point.

2. Just a browser and text editor should do. I use Chromium+VS Code.

I use Firefox.

I have added web-ext to the recommended development kid and it is being a really good experience,

I am getting quick results, but I am exceptionally happy about the automatic-reload-extension feature when any source file change. Something like web-ext is what I had been looking for a long time.

3. Yes it is up to date as nothing notable has changed since I've written it

OK

A tip would be to open the extension and right-click. Choose Inspect here. Now a developer tool should've opened up. This tool is similar to a dev console for web pages. You can console.log here and debug the Extension.

Thank you for all tips.

In Firefox I was not able to use inspect, since it never gets active for elements on the task bar

You can go to Add-ons Manager Ctr+Shift+A and then click on Debug Add-ons option available under the gear icon, and finally click Inspect button at the right of extension name, that would open the toolbox.

If there are any doubts still lingering please do ask. Also let me know the issue you'll be working on so that I can assign you. I would suggest you checkout or work on #4 before going into this issue.

Regarding to #4, I started there but after a while, IMO, "messing" with the title does not look esthetic and the current information is valuable enough to keep it like that.

I am more inclined to keep the title like that and instead using the available area initially proposed here for adding a description. What do you think? You can appreciate both options here

[allen505]

Thank you for your tips. I used to use Firefox but had some weird scaling issues on my Linux system which has resulted in the Extension having unusally large fonts and icons.
Changing the title is actually a priority for the next release. The way it is planned is, it will a Editable text which by default is the text currently present (date,time and number of tabs), but if the user wants he can modify it and hit enter, which should save the text.

For adding tags, after some thought, I think the best way to implement it would be to have a drop down which has some pre-defined tags which can be added to each save. These pre-defined tags can be customized by the user through the settings page. This implementation came to me because tags will have to be repeated often and it makes sense to choose such words from a drop down rather than typing them out.