Clippings sidebar

[aecreations]

There were requests in the past of adding a sidebar to the Firefox browser window with a list of clippings. This would provide an alternative to the browser context menu for choosing a clipping to paste into a web page textbox.

It should be possible to paste the chosen clipping by double click on it, as well as copy the selected clipping content to the clipboard. The sidebar won't allow any editing, but users should be able to launch Clippings Manager to edit the selected clipping.

A nice bonus - the user should also be able to navigate to the source URL of the selected clipping.

There should be a preview pane in the bottom of the sidebar showing the content of the selected clipping. An option should be available to toggle pane visibility.

On first-run, show a very brief tutorial on how to use it: Double-click on a clipping to paste into a web page text. Right-click for more options.

Sidebar toolbar buttons:

• Paste
• Copy clipping text
• Edit clipping
• Open Clippings Manager

Context menu for selected clipping:

Paste
Copy Clipping Text
Go to Source Web Page
Edit
---
Show/Hide Preview Pane
Customize...

The context menu for selected folder should only show the last two menu items.

Sidebar customization options:

Double-click Action:
(•) Paste
( ) Copy Clipping Text
( ) Go to Source Web Page
---
[X] Show preview pane

< Done >

[aecreations]

Extra bonus: Clipping search box.

Also, extra inspiration - Opera Notes (a sidebar feature in past versions of the Opera web browser): https://imgur.com/o2Xklm5

[aecreations]

Due to limited space, the search box should be on its own row, below the toolbar. It should be possible to hide the toolbar and search bar.

Customize dialog:

[X] Show toolbar
[X] Show search bar
[X] Show preview pane

Double-click Action --------
(•) Paste
( ) Copy Clipping Text
( ) Go to Source Web Page
----------------------------
< Done >

[aecreations]

Reduce scope of available customizations:

Customize

[X] Show toolbar
[X] Show search bar
[X] Show preview pane

< Done >

[aecreations]

Due to limited horizontal space imposed by the sidebar width, toolbar buttons should be limited to:

• Organize Clippings - opens Clippings Manager
• Help - displays the first-run quick tutorial

[aecreations]

Due to time constraints, editing a clipping or folder from the sidebar will be removed from scope - the user can click Organize Clippings in the sidebar toolbar to launch Clippings Manager.

[aecreations]

Remaining work:

1. Preview pane
2. Customization options for toggling toolbar, search bar and preview pane
3. Styling fixes, especially for dark mode
4. First-run mini-tutorial, and extended help via popup window

[aecreations]

Pasting a clipping from the sidebar will need to be made an experimental feature, due to UX issues regarding focusing behaviour between the sidebar and the target web page. The user must interact with the web page (click on the text box or HTML editor) before performing the action in the sidebar to insert the clipping. Even if the user wishes to paste multiple clippings into the same web page textbox, that textbox must always be clicked first before invoking the paste action from the sidebar. It's also been observed that changing the selected clipping in the sidebar cancels out the web page user interaction, and so the web page textbox needs to be clicked again.

[aecreations]

Attempting to make the browser action configurable - either open Clippings Manager or Clippings Sidebar: https://discourse.mozilla.org/t/configurable-browser-action-for-mv3-extension/133603

[aecreations]

Clippings Sidebar empty state content:

Clippings Sidebar

Get started by creating a clipping from selected text in the web page or in Clippings Manager.

< Open Clippings Manager >

---

Clippings Sidebar help window (click the Help button in the toolbar):

Clippings Sidebar

With Clippings Sidebar, you can search for and select a clipping for copying and pasting into a web page textbox. Double-click on a clipping to copy its content to the clipboard. You can then paste it into a web page textbox or HTML editor by pressing CTRL+V or right-clicking and selecting Paste in the browser context menu. Right-click on a clipping for more options.

If the clipping contains HTML tags, you'll be prompted to choose the format of the copied content. Select "Copy as Formatted Text" if pasting into an HTML editor and want to include text formatting such as bold, italic, fonts and headings. Select "Copy as Plain Text" if pasting into a normal web page textbox or you want to paste the clipping into an HTML editor without any formatting.

To edit and organize your clippings, click Organize Clippings in the toolbar.

[aecreations]

Remaining work:

1. Make the preview pane height adjustable. Nice to have: persist its height in user prefs.
2. Minor tweaks to the height of the Copy Clipping Text dialog

[aecreations]

The ability to resize the preview pane is removed from scope for version 7.0 due to time constraints. This will be revisited if there is user demand.

[aecreations]

Remaining work: Dark mode fixes.

[aecreations]

When right-clicking on a clipping or folder in the sidebar search result, the context menu shows the same menu items from the previous selection, before the search was performed. E.g., if a clipping was previously selected, the user did a search and opened the context menu on a folder in the search result, the context menu shows menu items that are applicable to clippings but not folders.

EDIT 2024-09-13: Issue is not reproducible.

[aecreations]

Remaining work: Dark mode fixes.

[aecreations]

Replace the temporary image for the sidebar empty state.