fix(outlook): Fix Outlook integration (#2291)

Closes #2216, #2167

Author: pkvach

src/content/outlook.js

@@ -3,7 +3,7 @@
  * @urlAlias outlook.office.com
  * @urlRegex *://outlook.office.com/*
  */
- 
+
 "use strict";
 
 // Inbox emails
@@ -16,10 +16,14 @@ togglbutton.render(
         'div[role="tabpanel"] div[role="group"]'
       )[1];
 
+      // If the container is not found or the button is already there, do nothing
+      if (!container || container.querySelector('.toggl-button')) {
+        return;
+      }
+
       const link = togglbutton.createTimerLink({
-        className: `outlook`,
-        description: () =>
-          document.querySelector('div[role="heading"][title]').textContent
+        className: "outlook-panel",
+        description: getOpenedEmailSubject,
       });
 
       container.appendChild(link);
@@ -29,21 +33,37 @@ togglbutton.render(
 
 // Composing emails
 togglbutton.render(
-  '[role="menubar"] .ms-CommandBar-primaryCommand:not(.toggl)',
+  '#ReadingPaneContainerId div[data-testid="ComposeSendButton"]:not(.toggl)',
   { observe: true },
   (elem) => {
-    const isComposingEmail = document.querySelector('div[data-testid="ComposeSendButton"]');
+    const composeSendButton = $('div[data-testid="ComposeSendButton"]');
 
-    if (isComposingEmail) {
-      const subject = () =>
-        document.querySelector('input.ms-TextField-field').value;
+    if (!composeSendButton) {
+      return;
+    }
 
-      const link = togglbutton.createTimerLink({
-        className: "outlook",
-        description: subject,
-      });
+    function getDescription() {
+      // If making a reply, the subject is already filled
+      const emailSubject = getOpenedEmailSubject();
+      if (emailSubject) {
+        return emailSubject;
+      }
 
-      elem.appendChild(link);
+      // If composing a new email or making a forward
+      return document.querySelector('input.ms-TextField-field').value;
     }
+
+    const link = togglbutton.createTimerLink({
+      className: "outlook",
+      description: getDescription,
+    });
+
+    composeSendButton.after(link);
   }
 );
+
+function getOpenedEmailSubject() {
+  const emailSubjectElement = document.querySelector('div[role="heading"][title]');
+
+  return emailSubjectElement ? emailSubjectElement.textContent.trim() : '';
+}

src/styles/style.css

@@ -1293,16 +1293,17 @@ li .toggl-button.heflo {
 }
 
 /********* OUTLOOK *********/
-.toggl-button.outlook {
-  margin-left: 10px;
-  color: rgb(102, 102, 102);
+.toggl-button.outlook-panel {
+  margin: 0 5px;
   text-decoration: none;
-  position: relative;
-  bottom: 3px;
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
 }
 
-.ms-CommandBar-primaryCommand .toggl-button.outlook {
-  align-self: center;
+.toggl-button.outlook {
+  margin: 0 10px;
 }
 
 /********* NOTION *********/