Enable document Navigator

pedropintosilva commented 1 year ago

Detailed description and rationale

Expose the functionality (Navigator) already present in the LibreOffice (LO) Core. The Navigator displays the different parts of a document, such as headings, tables, frames, objects, or hyperlinks. To see it in action. Open LO Writer and press F5, this will open Navigator. Quick jump to a location in the document by double-clicking an item listed in the Navigator window or enter the respective page number in the spin button.

Initially and if easier, this could be limited (by priority):

Text documents
Presentations and Spreadsheets

Milestones with estimated time

Add icon in the Collabora Online (COOL) UI which can switch to the Navigator
Adapt Navigator deck look / layout , if needed, for COOL
Make Navigator working - when we click on the object name then view should jump to that object
- it will require to send LOK callbacks to the online so view will be scrolled and block default desktop actions
Optional: Implement missing JSDialogs functionality (context menu for treeview widget)
- jsdialogbuilder.cxx will be extended with weld::Menu support, online side will need new popup type (if it doesn't have it ahlready)
- [ ] #9567

Code pointers

These might (not) be helpful, in doubt consult with @aszucs3 and @eszkadev :

Disabled switching to navigator: https://cgit.freedesktop.org/libreoffice/core/commit/?id=ca54fde Code handling uno commands in the core: https://opengrok.libreoffice.org/xref/core/desktop/source/lib/init.cxx?r=aea216e2#4263 Callback commands to send message from core to online: https://opengrok.libreoffice.org/xref/core/include/LibreOfficeKit/LibreOfficeKitEnums.h?r=c4b93412 Navigator panel implementation: https://opengrok.libreoffice.org/xref/core/sw/source/uibase/utlui/navipi.cxx JSDialogs Treeview widget in Online: https://github.com/CollaboraOnline/online/blob/master/browser/src/control/Control.JSDialogBuilder.js#L1715 Navigator's context menu: https://opengrok.libreoffice.org/xref/core/sw/source/uibase/utlui/content.cxx?r=6a031514#1333 JSDialogs core implementation: https://opengrok.libreoffice.org/xref/core/vcl/jsdialog/jsdialogbuilder.cxx Current JSDialogs popups generation: https://github.com/CollaboraOnline/online/blob/master/browser/src/control/Control.JSDialog.js#L105

JSDialog enabling: https://opengrok.libreoffice.org/xref/core/vcl/jsdialog/enabled.cxx?r=490fcebb

Required skills / knowledge

C++ - LibreOffice core hacking will be needed JavaScript + CSS - Collabora Online side

WIP

https://github.com/CollaboraOnline/online/pull/6237 https://gerrit.libreoffice.org/c/core/+/150906

pedropintosilva commented 1 year ago

I look to my old notes on this subject (navigator) and I think we have an opportunity here to improve also existing things or make it worse:

It would be good to avoid adding yet another (sidebar) icon on the top toolbar. Specially when integrators tend to add their own additional icon there
- This becomes evident in impress, plus we could solve the problem of not being able to hide slides (which is also a way to navigate)
Cool if we would allow the user to access Properties controls (located in the sidebar) without forcing, every time, to click in a different sidebar icon
- Otherwise it becomes a pain to use the navigator -> then switch sidebar -> Edit property -> switch again sidebar to access navigator [loop]
Independent of what it can be achieved technically I would love if we could avoid adding all the options, bells and whistles that comes with core's navigator (I would like, if possible, to avoid increase user flow complexity).
Others: MS O, G D also seem to share the same opinion I guess.

Please check gh#6248-navigator-online.odp (pass gh#6248-navigator) for a quick mockup of what I have in mind.

Still any of this ^ should not be taken as a guide or set of instructions. I'm merely initiating a discussion here. Any feedback is welcome.

Andreas-Kainz commented 1 year ago

That's a great idea to have only one Navigator icon where the navigation will popup. What I really really like is that the Navigator is not writer only, there will be also the tabs for calc and the slide previews for impress/draw. Maybe we can expand the Navigator for search and other stuff in the future too (as you show links, comments, ... in the mockup).

At least for mobile it would be also a great improvement to have an navigator icon instead of an preview's toolbar for example.

aszucs3 commented 1 year ago

collected what buttons/controls would work in Lool now:

WRITER: what works: up/down buttons, Page selector SpinField, content navigation view, header/footer, promote/demote/move buttons listbox //works, but when value changed, after treeContent selection is jumped, treecontent selection go back to previous state ... (probably a missplaced update or similar)

what not works: heading lvl dropdown, drag mode selector (drag mode does not work on PC app) List box on-off toggle button (this only works on PC only if navigator is not on sidebar.. it just hide the treeview)

I dont know: anchor works something, but may differ from PC app, and im not sure if that really work right set remainder: i was not able to make it do anything yet... not even at PC app ...

CALC: works: Data Range, Start/End button, toggle button not works: Scenarios, drag mode selector (they not work pl PC app as well) colum/row spinField (probably i could fix it)

IMPRESS: works: prev/next/first/last slide buttons not works: drag mode selection, show shapes dropdownlist

TreeContent works in all 3, but it does not know all the PC capabilities, like right click menu, stepping up/down with keyboard... There are still some glitches with the selection

pedropintosilva commented 1 year ago

[edited] Talked with @eszkadev, better to hide all controls for now. Focus solely on the Navigator tree view and its behaviour/performance. We can then think/test one by one and add it if needed. [/edited]

Writer

Control	Status	Notes
Up/Down buttons	Works
Page selector SpinField	Works
Content navigation view	Works
Header/footer	Works
Promote/demote/move buttons	Works
Listbox	Almost works	But when value changed, after treeContent selection is jumped, treecontent selection go back to previous state ... (probably a missplaced update or similar)
TreeContent	Almost works	It does not know all the PC capabilities, like right click menu, stepping up/down with keyboard... There are still some glitches with the selection
Heading lvl dropdown	Doesn't work
Drag mode selector	Doesn't work	Drag mode does not work on PC app
List box on-off toggle button	Doesn't work	This is also flimsy on PC app. It only works on PC only if navigator is not on sidebar
Anchor	To test	works something, but may differ from PC app. Not sure if that really works right. I was not able to make it do anything yet... not even at PC app ...
Documents dropdown	Hide it	Let's hide this

Calc

Control	Status	Notes
Data Range,	Works
Start/End button	Works
Toggle button	Works	Pedro: I'm not sure what is this
TreeContent	Almost works	It does not know all the PC capabilities, like right click menu, stepping up/down with keyboard... There are still some glitches with the selection
Scenarios	Doesn't work
Drag mode selector	Doesn't work	Also doesn't work on PC app
Colum/row spinField	Doesn't work	Probably i could fix it
Documents dropdown	Hide it	Let's hide this

Impress

Control	Status	Notes
Prev/next/first/last slide buttons	Works
TreeContent	Almost works	It does not know all the PC capabilities, like right click menu, stepping up/down with keyboard... There are still some glitches with the selection
Drag mode selection	Doesn't work
Show shapes dropdownlist	Doesn't work
Documents dropdown	Hide it	Let's hide this

aszucs3 commented 1 year ago

I found these glitches/errors: used document: https://opengrok.libreoffice.org/xref/core/sw/qa/uitest/data/tdf122449.odt

Single user: TreeScroll: scroll jumps to top then scroll down (FullUpdate?) ... so the selected row will be the most bottom on the tree

Repro1: Dblclick children of other contentType (on the tree)
Repro2: Dblclick on any graphics / frame content (on the tree)

Unsuccessful Drag&drop item in Tree, change scrollness (FullUpdate?):

Repro1: Expand all, Jump to Table14, Scroll bottom, Drag any field item, drop anywhere on the tree. RESULT: Tree Scoll back to Table14 (normal update?) NOTE: This Drag&Drop Does nothing to Document, so no update is needed
Repro2: Expand all, Jump to Table14, Scroll a bit, Drag Text (heading), drop anywhere on the tree. RESULT: Tree Scoll top, then to Table14 (fullUpdate?) NOTE: Scroll a bit up or down is not needed for scroll top, it is just for showing that we lose the "scroll a bit" information, as tree Scroll will be in state of "Jump to Table14"

Actual scroll Position changes with sidebar on/off toggle

Repro1: open doc, open Navigator, expand all, scroll down, close, then open Navigator RESULT: Tree scrolled to top NOTE: scroll info not saved when navigator disabled?
Repro2: jump to graphic26, close/open navigator (many times) RESULT: Tree scoll changes randomly, but graphic26 will be visible somewhere.. +1 BUG: in case of headings/hyperlinks/fields, sometimes the the actual row is not visible, it is only 1 line upper. NOTE: scroll works ok, if i click on a document's heading, that is not visible in the Tree, and have to scroll up.

multi user: expand / collapse synchronized ?! dont views have separate info about what contentTypes are expanded/collapsed ?!

Repro1: U12: open, U2: expand hyperlinks, U1: toggle sidebar/refresh (hyperlinks expanded)
Repro2: U1: open, expand Tables, U2: open (tables expanded)

Change on Tree update other user Tree, resulting non needed scolls

Repro: U1: jump to Table14, ScrollDown Tree, U2: jump to Heading Text, rewrite Text->Text2 RESULT: U1: tree scroll back (Scrollless Update would be needed?)

Design question:

long tree element cut into multiple lines, while in desktop app it always 1 line (using horizontal scrollbar if needed) for example, this will be 4 line in heading 4 format: "123456789 123456789 123456789 123456789"
selected line is not visible now. (it was before), and now it is harder to see if 4 lines are 4 element, or only 1 element.

not sure (maybe not happened):

Once I may seen U2 doc jumped while only U1 did somethingt on contetnTree.. (?)

pedropintosilva commented 1 year ago

We should probably rename it from "Navigator" to something else. For example "Document Outline" as tooltip (hover) and as Title maybe just "Outline"

jancborchardt commented 1 year ago

We should probably rename it from "Navigator" to something else. For example "Document Outline" as tooltip (hover) and as Title maybe just "Outline"

Yup, agree with that one! :)

pedropintosilva commented 1 year ago

Just a note here. In the long run and once the Navigator is placed as shown in https://github.com/CollaboraOnline/online/issues/6248#issuecomment-1527143532 [1] I still think Navigation is the best option. However, and for now, I think we can either let it as it is Navigator or change it to Outline

Label	Pros	Cons
Navigator	Familiar to LO users (not all)	Describes the component rather than the function/action
Navigation	Familiar to MS O users and understandable to anyone else. Emphasis on the function/action	For now: It can be to generic specially since `Navigator` is still not integrated with pages/slides sorter
Outline	Familiar to G users.	Describes the display content rather than function/action. Also can be mistaken for other outline types (Bullets and Numbering) and `Outline` is already a quite prominent label in dialogs and buttons

1."Please check gh#6248-navigator-online.odp (pass gh#6248-navigator) for a quick mockup of what I have in mind."

jancborchardt commented 1 year ago

@pedropintosilva sure, "Navigation" seems good as well. :) Note that one of the bigger things is also that in both G and MS cases, the navigation is on the left (we do the same for the outline in Nextcloud Text), so that would be something to look into. (It’s also pretty standard in other places like web apps, PDF readers, wikipedia articles etc you know what I mean. ;)

pedropintosilva commented 1 year ago

@jancborchardt agreed, that's what I meant in my previous comment with "For now: It can be to generic specially since Navigator is still not integrated with pages/slides sorter" (s/to/too)

thebearon commented 11 months ago

@pedropintosilva Can you please update this issue to reflect the current state?

pedropintosilva commented 11 months ago

excerpt from https://github.com/CollaboraOnline/online/issues/6248#issuecomment-1527143532

[...]
* It would be good to avoid adding yet another (sidebar) icon on the top toolbar. Specially when integrators tend to add their own additional icon there

  [...]
Please check gh#6248-navigator-online.odp (pass gh#6248-navigator) for a quick mockup of what I have in mind.

Just a quick update:

What was done
- Many bugs were fixed
- Only categories with items are shown
- Buggy non-functional drag-n-drop was disabled
- Expand/collapse and document scrolling (click to navigate to that element in the document) improved
To go
- After discussing with @eszkadev the bigger plan here is to follow the mockup. And for that we probably need to use the Navigator control in dialog that comes from core instead of the Sidebar related control that we are using
- In the core side (LibreOffice) you can see what I mean by heading over to View -> Navigator

CollaboraOnline / online