export modbarExists promise (#617)

* export modbarExists promise

* wait for modbar before adding personalnotes button

extension/data/modules/modbar.js

@@ -5,6 +5,17 @@ import * as TBHelpers from '../tbhelpers.js';
 import * as TBCore from '../tbcore.js';
 import * as TBApi from '../tbapi.js';
 
+// Hold onto the modbarExists resolver so we can call it when the time is right
+let resolveModbarExists = null;
+
+/**
+ * A promise which resolves when the modbar is added to the page.
+ * @constant {Promise<void>}
+ */
+export const modbarExists = new Promise(resolve => {
+    resolveModbarExists = resolve;
+});
+
 export default new Module({
     name: 'Modbar',
     id: 'Modbar',
@@ -306,6 +317,9 @@ export default new Module({
 
     toggleMenuBar(modbarHidden);
 
+    // modbar was added to the DOM, let everyone know so they can add buttons and stuff
+    resolveModbarExists();
+
     // moderated subreddits button.
     if (enableModSubs) {
         TBCore.getModSubs().then(async () => {

extension/data/modules/personalnotes.js

@@ -4,6 +4,8 @@ import * as TBui from '../tbui.js';
 import * as TBHelpers from '../tbhelpers.js';
 import * as TBCore from '../tbcore.js';
 
+import {modbarExists} from './modbar.js';
+
 export default new Module({
     name: 'Personal Notes',
     id: 'PNotes',
@@ -124,8 +126,10 @@ export default new Module({
         });
     };
 
-    // add the button to the modbar
-    $body.find('#tb-toolbarshortcuts').before(' <a href="javascript:void(0)" class="tb-modbar-button" id="tb-personal-notes-button">Personal Notes</a>');
+    // add the button to the modbar once the modbar is available
+    modbarExists.then(() => {
+        $body.find('#tb-toolbarshortcuts').before(' <a href="javascript:void(0)" class="tb-modbar-button" id="tb-personal-notes-button">Personal Notes</a>');
+    });
 
     // Since we have a button we can click on it!
     $body.on('click', '#tb-personal-notes-button', async () => {