[v5] [Feature Request] Tab Notes

[megamorphg]

Description

Frequently I have some action-item based on a tab or a "next step" and I have to record that externally somehow (notebook, bookmark organization, to-do list, etc.)... or forget. Sadly it is the latter with most "low priority" tabs.

It would be awesome to have the ability to add text-only notes similar to Tabs Outliner but better.

I know this is requesting a whole new feature but it seems like this would best be integrated into the Sidebery system. My current workaround: using "OurStickys", literally the only Firefox page notes extension.

Suggested Implementation (only first 3 are necessary for a beta release):

• tab context menu: create/edit note
• simple text editor pop-up
• note indicator (yellow dot) on tab visible if there is a note tied to the tab
• shortcut: create/edit note by holding middle click over a tab
• if mouse hovers over a tab with a note, shows text on tooltip (append to current tooltip)
• notes panel which lists all current notes and allows editing and jumping to tab. This serves as a "to-do" list of sorts.
• snapshots contain any notes corresponding to a tab
• notes for closed tabs are also not lost and kept somewhere in snapshots

[emvaized]

My first thought was that it would be too much work to implement. But then I figured out it could be added in easy way, by defining some "note" type of tab, which could be added via context menu, and store the note content in it's url.

After some work and testing, I managed to implement experimental support for such tab notes in my fork. Notes can be created both from context menu entry, or by dragging some text from page on a tab (as shown in your video). Note tabs persist as long as their associated tabs exist, and can be moved in tabs tree as any other tab. However, this implementation is slightly different from your request, as the notes do not get strongly associated with the tabs, their association is achieved via tabs tree structure.

Nice bonus is, notes support some rich text formatting (visible only on the note page). Also I found it better looking to dim opacity for notes tabs just a little bit with this CSS rule in Sidebery settings: .Tab[title*="/page.note/note.html"] { opacity: 0.75; } which ends up looking like this:

---

The feature is currently quite raw, and more of a proof-of-concept. Here are some remaining tasks to polish it, which I haven't figured out yet how to do:

• Add config for behavior on dragging text on tab (search or create note) – currently it's overwritten to always create a note ✓
• Probably will be needed to update notes urls on addon update, as the extension ids in urls may become invalid
• Maybe apply more styling to the note editor to make it better fit in Sidebery style

You can test the feature by going to about:debug and installing the attached archive (or build it yourself from my fork): sidebery-5.0.0b25-with-notes.zip

Maybe @mbnuqw you could be interested in finishing it? Or I can try to finish it later after some more investigation. After some testing I found this feature quite fun, and maybe worth further development.

[jathek]

Strongly against adding these into the tree like the above screenshot. Would really clutter the tab tree imo. Usability-wise, I think it would be much better to add an icon to the tab, like audio events do. Hovering over that icon would then show the tab note in a tooltip.

[koppor]

Note that OP asked for a note indicator, too.

note indicator (yellow dot) on tab visible if there is a note tied to the tab

@emvaized Maybe you could use your experience to solve tab renaming (https://github.com/mbnuqw/sidebery/issues/185)? This could be a "quick win" for those wanting to have notes.

[emvaized]

solve tab renaming

I would have done it already if I could, as it's the feature I want to see in Sidebary the most! However, it looks like Max is preparing something awesome for us

[TeMPOraL]

Seconding overall idea. I've been using Sideberry extensively in recent times, and the ability to add notes to tabs and tab groups is the very one thing I've felt a really strong need for all the time.

Use case: using tabs as short-term bookmarks. Being able to quickly jot down on the tab itself why I'm keeping it around. Or adding a short summary. For example, I open multiple tabs for different failing builds of a program. I skim them quickly, observe the errors, and I'd then like to be able to write - directly on a tab - what the issue is, so that an hour or a day later, I come back to a tree of tabs with labels like "missing include", "test XYZ crash", "spurious failure", "timeout", instead of just the page titles, that all just say "blah blah build name #1234 Console [Jenkins]|, which is completely useless to me.

In my mind, this notes would ideally be plaintext, and would be rendered in the tree view as a tab subtitle, under the actual title, in a smaller font, truncated to panel width like the tab title, etc. Hovering could reveal the whole note in a tooltip (even a system/browser default one), but it's important to me to be able to see at least some of the tab notes in the tree view, without interaction. The ability to rename tabs (like you can rename groups) would work in a pinch.

[ConstantinosM]

Are there any updates on the progress regarding this feature? This would be a significant addition for me as well, as I use tabs as short-term bookmarks corresponding to various projects or tasks. The priority of these projects often changes, requiring me to switch between them every few days (or even weeks). Not sure if it is possible, but i was thinking a dot indicating that a note is attached to a tab and then being able to view the note when hovering. Or perhaps as @TeMPOraL mentioned with a rendered subtile. In Groups panel, someone could view the list with the tabs along with their attached notes. That way we could avoid clutter the tree.

I also have opened a discussion thread here.

[the-a-man-006]

NEW-TAB in context-menu (https://github.com/mbnuqw/sidebery/issues/1503#issuecomment-2015700864):

sometimes one just wants to open child tabs on far away tabs as a reminder/TODO to research something related to that tab, and since Sidebery allows changing the Title of New Tabs, makes for an epic usecase. For a far-away (our-of-focus) tab "Lemon Juice recipe", you could create a new child tab "Is citric acid toxic?", all without losing focus from the current tab "Work you're supposed to do instead of procrastinating on it by thinking about lemon juice".

If one wishes to avoid cluttering the tree so bad, one could group such New-Tabs-with-edited-titles-doubling-as-notes, under a New Tab with the title "NOTES".

--- Work Tab ------ More work ------ Even more work

--- Lemon Juice Recipe ------ NOTES --------- Is citric acid toxic? --------- Google the best fruits... --------- How to stop procrastinating lol.

--- Older work tab ------ Frequently needed still ------ That's why not closed yet

Then, you could even collapse all the new/empty tabs under the "NOTES" new-tab.

For actual serious note taking, I think the best note-taking extension already exists: WebStickies (https://addons.mozilla.org/en-US/firefox/addon/webstickies/); also my most favourite and most used extension. It's such a simple and minimalist and low-cost (stores everything on the device, unless you sign-up for sync, but then, it's not end-to-end-encrypted) extension that it's a shame that it's the only one of its kind. Annotations are lame and bound to malfunction (unless for PDFs, for which it's understandable).

One could create a new tab, load Google/Bing, and keep all of one's random notes on a Sticky Note there, and pin that tab! Not as great as option 1 though, which already works!

[umnikos]

What I would prefer over all of this is a new tab extension that allows you to write notes inside the new tab and keep notes between such tabs separate. It should be significantly simpler to implement than messing with Sidebery. I found such an extension for Chrome (Tab notes) but had no luck finding a similar thing for Firefox...

[emvaized]

@umnikos What you described is actually pretty close to the "note tabs" idea I suggested above, which implied creating new tabs for each note, with fullscreen editor open when selected.

But in fact, you don't actually need any separate extension to do that. For example, here is a basic snippet which you can paste directly to url bar as if it were a link: data:text/html,<html contenteditable autofocus>

It will create a new tab with nothing but a text editor. But it won't store your notes between browser restarts.

Here's my extended version with some styles added and line numbers to the left. It will try to preserve text between browser restarts by storing it in url hash, and it also updates the tab title to correspond with the first line of the note.

Feel free to try it as well by pasting the whole snippet to the url bar:

Note tab URL snippet

``` data:text/html,

```

[umnikos]

@emvaized now include backup support (or integrate it into sidebery snapshots somehow), custom themes, more bells and whistles, and it will absolutely be extension-worthy

[emvaized]

@umnikos I think Sidebery snapshots might already support it, as it's just a regular tab with all information stored in the url.

The advantage of using url snippet is that it doesn't require you to install an extension, so you can share such tab url to another person, or open it in another browser, and it will show the note correctly. Also, you will never lose such a note if you, for example, uninstall the extension.

But the resulting url for each note, with all the javascript and styles included, will be embarrassingly huge.

[megamorphg]

@emvaized Could link this to an Autohotkey shortcut for ease to create as a new child tab,.. Firefox also has unlimited URL length so this is a great solution to have as a new tab. It just increases tab clutter and does lack additional feature extension.

[emvaized]

@megamorphg It is also possible to create a bookmark for it. And then, if you also add #%s to the end of URL for this bookmark, you can use bookmark keyword to quickly create a tab note. For example, I have set a keyword "note" for this bookmark, and now I can create a new tab, type "note Hello world!" in the urlbar, and it will create a note tab using my URL snippet. Quite useful!

does lack additional feature extension

I don't think a note of such format really needs a ton of features... I see it more like a barebones notepad. Hence I would rather prefer to cut down the huge URL as much as possible, despite the unlimited URL length in Firefox.

For example, here I created a super minified version of the snippet, with no line numbers and almost no styles. It's still quite huge, but looks much denser (956 characters, compared to 2652 in the previous version):

Compact URL snippet for note tab

``` data:text/html, ```

I would like to cut the favicon part as well by using some of Firefox's built-in svg icons (for example, chrome://global/skin/reader/align-left-20.svg), but it doesn't work for some reason.

[megamorphg]

Keyword search is the way to go! ChatGPT compressed it a bit (over 100 characters)!

data:text/html,<html><head><title>Empty note</title><link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20'%3E%3Cpath d='M3 5h9v1.5H3V5zm0 6.25h6v1.5H3v-1.5zm0-3.13h9v1.5H3v-1.5zm13.78 3.87.65-.65c.29-.29.29-.77 0-1.06l-.71-.71a.754.754 0 0 0-1.06 0l-.65.65 1.77 1.77zm-.59.59L11.77 17H10v-1.77l4.42-4.42 1.77 1.77z'/%3E%3C/svg%3E"/></head><body style="margin:10%"><textarea style="width:100%;height:100%;border-radius:4px;border:1px solid lightgray;padding:8px" autofocus></textarea><script>const t=document.querySelector("textarea"),e=()=>{document.title=t.value.split("\n")[0],window.location.hash=encodeURI(t.value)};t.addEventListener("input",()=>setTimeout(e,100));if(location.hash){t.value=decodeURI(location.hash.slice(1));e()}</script></body></html>

Regarding the additional functionality, I was thinking of having "reminders" for notes and some of the other features in my 1st post in this thread. Kind of like a timed alert like Snooze Tabs. But I guess it may be better/reliable to just name the tabs appropriately, create a Task for it and link to it for later finding. It just requires that extra second step of creating a task item in one's task list, not to mention making sure to later find it.

And for smaller notes/reminders that we don't need a scheduled reminder, when having so many nested tabs open, I just use the title of Group tabs to remind me what the tab set is for. So maybe this request can be closed.

[umnikos]

I just had the realization the length of the html source does not matter if you simply turn this into a website.

https://umnikos.github.io/tab-notes/#Proof%20of%20concept!%0A%0AThis%20is%20emvaized's%20code%20turned%20into%20a%20github%20page.

[megamorphg]

I just had the realization the length of the html source does not matter if you simply turn this into a website.

That could be useful in a different situation but notes need to be ad-hoc and there could be dozens of different note pages (can't make an github website for every single one). The URL length is not an issue IMO.

[umnikos]

@megamorphg what do you mean? The text is still stored in the url after the #, there is no need for dozens of different github repos.

It's basically the exact same thing but with unlimited expandability feature-wise and with the ability to update the styling of all of your notes in a single place. The only drawback I can think of is that it no longer works without internet but I normally do not use a browser without internet so for me this ticks all of the boxes.

[emvaized]

@umnikos Great idea! This way note tabs are also saved in browser history and Sidebery correctly.

I wouldn't be worried much about losing it in case of lack of internet connection or server failure, because you can always access your note in the url directly, copy or edit it.

Here I created a Github repository with enhanced version of this snippet, splitted in separate files in a readable way. I added support for rich text formatting and several buttons to make the selected text bold, italics etc. It even supports pasting images, which get converted to base64 format under the hood. I also restored line numbers on the left and added characters count on the bottom.

It is hosted now on https://emvaized.github.io/notepad-tab/#Hello!

Maybe I'll add more features later, or consider publishing it as a separate addon as well.

[megamorphg]

@emvaized Woah, it takes a second to load but the RTF benefits might be worth it! And images, wow. Hyperlinks don't seem to open right. I don't like how it writes to history on every change. Maybe worth it to make the delay even longer. Turning it into a whole extension may be good since there are barely any good ones on the addon store but then it might not write to history at all. Keep us in the loop!

[emvaized]

And images, wow

It works great indeed, and might have it's own use cases, but I'm yet to figure out how to add resize handles for images as they're currently always pasted in the original resolution

Hyperlinks don't seem to open right

Yeah, currently you have to right click on them and open in new tab to interact with the hyperlink instead of a text content. I think of a solution to add a Lock button which will toggle editability of the text field, thus making hyperlinks clickable

UPD: I added now a special handler which will click links when Shift or Alt key is held. And also some test implementation for image resize handle.

[GitMurf]

I saw up in the discussion that it was marked as planned. Anyone heard what the plans may be for notes becoming “native” in sidebery? Or any progress on it? Thanks!

[GitMurf]

fyi for the tab note "hack" (creative approach) from above using bookmarklet, I am using focusout event instead of input as it will just save each time you leave focus from the note text area instead of update/saving every keystroke. You can then get rid of the settimeout debouncer.