The NotebookBar (NBB) or tabbed interface is a modernization of LibreOffice’s user interface. In the second part of this series, I explain the way the NotebookBar takes icons and text to create the final output that you see on the screen.

How is the NotebookBar created in the code?

Currently, the NotebookBar is not exactly like the other UI files that in LibreOffice with weld mechanism. In the first part of these series of blog posts on this topiuc, I discussed the custom widgets that are used to create them, and how to edit them using Glade.

The custom widgets rely on C++ code, especially for sizing and other characteristics. For example, Priority Merged Horizontal Box (sfxlo-PriorityMergedHBox) is a “horizontal box hiding children depending on its priorities”, which needs C++ code to implement the priority display of the children. If you search for it in C++ files, you will reach builder.cxx:

$ git grep -l sfxlo-PriorityMergedHBox "*.cxx"
vcl/source/window/builder.cxx

The above file is a huge > 100 KB C++ source code that handles NotebookBar custom widgets, but also handles every other VCL widget.

The other parts of the relevant code for the NotebookBar resides in below files. Search for both “Notebookbar” and “notebookbar” in C++ files:

$ git ls-files "*otebook*cxx"
sfx2/source/notebookbar/NotebookbarTabControl.cxx
sfx2/source/notebookbar/SfxNotebookBar.cxx
vcl/qt5/QtInstanceNotebook.cxx
vcl/qt6/QtInstanceNotebook.cxx
vcl/source/control/NotebookbarPopup.cxx
vcl/source/control/notebookbar.cxx
vcl/source/window/NotebookBarAddonsMerger.cxx

Icon

If you open the NotebookBar UI for LibreOffice Writer or other components like Calc, etc., what you see lacks two important things: icons and text.

First, let’s look into icons. The icon filess come from the set of icon themes that are shipped with LibreOffice. The icon theme of LibreOffice is configurable, therefore you do not see some specific LibreOffice icon in the design. That makes the work of UI designers harder, but lets LibreOffice choose among different icon themes.

You may find more information in the icon-themes/ module README.md file, which describes how to create new icon themes, and how to link the icons to specific icons via .xcu files. For example, in officecfg/registry/data/org/openoffice/Office/UI/CalcCommands.xcu you see:

<node oor:name=".uno:OpenFromCalc" oor:op="replace">
    <prop oor:name="Label" oor:type="xs:string">
        <value xml:lang="en-US">~Open...</value>
    </prop>
    <prop oor:name="Properties" oor:type="xs:int">
        <value>1</value>
    </prop>
</node>

This is defined for the UNO dispatch command, .uno:OpenFromCalc, which opens a file for Calc. The complete list of UNO dispatch commands can be found here:

UNO dispatch commands

For each command, two icon sizes are created, one small and one big icon. lc_<command name>.png and sc_<command name>.png, if not in SVG format. At first, one should add the icons for a new command to the colibre theme, in order to be usable also with other themes.

Here, the filenames will be lc_openfromcalc.png and sc_openfromcalc.png, which are available in the instdir/cache/ folder. In this case, these icons are not available from in the source, as they are fallback of sc_open.png and sc_open.png.

Text

The text for the commands can be found alongside the other details about the command in the .xcu file. For the UNO dispatch command .uno:OpenFromCalc, you can see the text “~Open…” is used. “~O” is for activating the shortcut “O” for this command, and “…” shows that this command will open a dialog, as a usual convention.

Some other properties of this command are defined in .sdi file scalc.sdi, as shown below:

SfxStringItem OpenFromCalc SID_OPEN_CALC
()
[
    AutoUpdate = FALSE,
    FastCall = FALSE,
    ReadOnlyDoc = TRUE,
    Toggle = FALSE,
    Container = FALSE,
    RecordAbsolute = FALSE,
    RecordPerSet;
    Asynchron;

    AccelConfig = TRUE,
    MenuConfig = TRUE,
    ToolBoxConfig = FALSE,
    GroupId = SfxGroupId::Options;
]

Following the SID_OPEN_CALC symbolic constant in C++ code shows where the implementation resides.

As another example, you may follow .uno:AddDirect, and then SID_NEWDOCDIRECT to find the place where the menu that shows the possible new files is created. This menu is activated when you click on the v button on “New Document” in the File section of the notebookbar.

$ git grep -l SID_NEWDOCDIRECT
basctl/sdi/baside.sdi
basctl/source/basicide/basides1.cxx
dbaccess/source/ui/app/AppController.cxx
include/sfx2/sfxsids.hrc
sfx2/sdi/appslots.sdi
sfx2/sdi/frmslots.sdi
sfx2/sdi/sfx.sdi
sfx2/source/appl/appopen.cxx
sfx2/source/view/viewfrm2.cxx
sw/source/uibase/app/apphdl.cxx
sw/source/uibase/utlui/glbltree.cxx

There are both shared and application specific C++ files in the above results. I will write more about the way the final menu of possible new files is displayed, in later posts.

Final Notes

The NotebookBar is a complicated UI, and if you want to modify and change it, it is important to understand how it is created, used and displayed on the screen.

There are plans to improve the NotebookBar and make it more like other weld UIs, but that is yet to be implemented: