ribbon widgets titles show associated keyboard shortcuts

src/public/app/services/keyboard_actions.js

@@ -16,6 +16,10 @@ const keyboardActionsLoaded = server.get('keyboard-actions').then(actions => {
 	return actions;
 });
 
+async function getActions() {
+	return await keyboardActionsLoaded;
+}
+
 async function getActionsForScope(scope) {
 	const actions = await keyboardActionsLoaded;
 
@@ -115,6 +119,7 @@ export default {
 	setElementActionHandler,
 	updateDisplayedShortcuts,
 	setupActionsForElement,
+	getActions,
 	getActionsForScope,
 	getAction
 };

src/public/app/widgets/containers/ribbon_container.js

@@ -1,4 +1,5 @@
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import keyboardActionsService from "../../services/keyboard_actions.js";
 
 const TPL = `
 <div class="ribbon-container">
@@ -208,7 +209,8 @@ export default class RibbonContainer extends NoteContextAwareWidget {
                 .attr('data-ribbon-component-name', ribbonWidget.name)
                 .append($('<span class="ribbon-tab-title-icon">')
                             .addClass(ret.icon)
-                            .attr("title", ret.title))
+                            .attr("data-title", ret.title)
+                            .attr('data-toggle-command', ribbonWidget.toggleCommand))
                 .append(" ")
                 .append($('<span class="ribbon-tab-title-label">').text(ret.title));
 
@@ -224,7 +226,22 @@ export default class RibbonContainer extends NoteContextAwareWidget {
             }
         }
 
-        this.$tabContainer.find('.ribbon-tab-title-icon').tooltip();
+        keyboardActionsService.getActions().then(actions => {
+            this.$tabContainer.find('.ribbon-tab-title-icon').tooltip({
+                title: function() {
+                    const toggleCommandName = $(this).attr("data-toggle-command");
+                    const action = actions.find(act => act.actionName === toggleCommandName);
+                    const title = $(this).attr("data-title");
+
+                    if (action && action.effectiveShortcuts.length > 0) {
+                        return `${title} (${action.effectiveShortcuts.join(", ")})`;
+                    }
+                    else {
+                        return title;
+                    }
+                }
+            });
+        });
 
         if (!$ribbonTabToActivate) {
             $ribbonTabToActivate = $lastActiveRibbon;

src/public/app/widgets/ribbon_widgets/basic_properties.js

@@ -50,6 +50,10 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget {
         return "basicProperties";
     }
 
+    get toggleCommand() {
+        return "toggleRibbonBasicProperties";
+    }
+
     isEnabled() {
         return this.note && (this.note.type === 'text' || this.note.type === 'code');
     }

src/public/app/widgets/ribbon_widgets/book_properties.js

@@ -46,6 +46,10 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
         return "bookProperties";
     }
 
+    get toggleCommand() {
+        return "toggleRibbonTabBookProperties";
+    }
+
     isEnabled() {
         return this.note && this.note.type === 'book';
     }

src/public/app/widgets/ribbon_widgets/file_properties.js

@@ -59,6 +59,10 @@ export default class FilePropertiesWidget extends NoteContextAwareWidget {
         return "fileProperties";
     }
 
+    get toggleCommand() {
+        return "toggleRibbonTabFileProperties";
+    }
+
     isEnabled() {
         return this.note && this.note.type === 'file';
     }

src/public/app/widgets/ribbon_widgets/image_properties.js

@@ -41,6 +41,10 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
         return "imageProperties";
     }
 
+    get toggleCommand() {
+        return "toggleRibbonTabImageProperties";
+    }
+
     isEnabled() {
         return this.note && this.note.type === 'image';
     }

src/public/app/widgets/ribbon_widgets/inherited_attribute_list.js

@@ -25,6 +25,10 @@ export default class InheritedAttributesWidget extends NoteContextAwareWidget {
         return "inheritedAttributes";
     }
 
+    get toggleCommand() {
+        return "toggleRibbonTabInheritedAttributes";
+    }
+
     constructor() {
         super();
 

src/public/app/widgets/ribbon_widgets/link_map.js

@@ -42,6 +42,10 @@ export default class LinkMapWidget extends NoteContextAwareWidget {
         return "linkMap";
     }
 
+    get toggleCommand() {
+        return "toggleRibbonTabLinkMap";
+    }
+
     isEnabled() {
         return this.note;
     }

src/public/app/widgets/ribbon_widgets/note_info_widget.js

@@ -66,6 +66,10 @@ export default class NoteInfoWidget extends NoteContextAwareWidget {
         return "noteInfo";
     }
 
+    get toggleCommand() {
+        return "toggleRibbonTabNoteInfo";
+    }
+
     isEnabled() {
         return this.note;
     }

src/public/app/widgets/ribbon_widgets/note_paths.js

@@ -40,6 +40,10 @@ export default class NotePathsWidget extends NoteContextAwareWidget {
         return "notePaths";
     }
 
+    get toggleCommand() {
+        return "toggleRibbonTabNotePaths";
+    }
+
     isEnabled() {
         return this.note;
     }

src/public/app/widgets/ribbon_widgets/owned_attribute_list.js

@@ -26,6 +26,10 @@ export default class OwnedAttributeListWidget extends NoteContextAwareWidget {
         return "ownedAttributes";
     }
 
+    get toggleCommand() {
+        return "toggleRibbonTabOwnedAttributes";
+    }
+
     constructor() {
         super();
 

src/public/app/widgets/ribbon_widgets/promoted_attributes.js

@@ -39,6 +39,10 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
         return "promotedAttributes";
     }
 
+    get toggleCommand() {
+        return "toggleRibbonTabPromotedAttributes";
+    }
+
     doRender() {
         this.$widget = $(TPL);
         this.contentSized();

src/public/app/widgets/ribbon_widgets/similar_notes.js

@@ -35,6 +35,10 @@ export default class SimilarNotesWidget extends NoteContextAwareWidget {
         return "similarNotes";
     }
 
+    get toggleCommand() {
+        return "toggleRibbonTabSimilarNotes";
+    }
+
     isEnabled() {
         return super.isEnabled()
             && this.note.type !== 'search'