feat(nozbe): Add button to task list

src/scripts/content/nozbe.js

@@ -1,11 +1,14 @@
 'use strict';
 
+/**
+ * Nozbe detail view
+ */
 togglbutton.render(
   '.details__attributes-right:not(.toggl)',
   { observe: true },
-  function (elem) {
-    const description = $('.details__title-name, js--displayEditForm').textContent;
-    const project = $('.details__attribute-name').textContent;
+  function renderNozbeDetailView (elem) {
+    const description = document.querySelector('.details .details__title-name').innerText.trim();
+    const project = document.querySelector('.details .details__attribute-name').innerText.trim();
 
     const link = togglbutton.createTimerLink({
       className: 'nozbe',
@@ -19,3 +22,26 @@ togglbutton.render(
     elem.appendChild(div);
   }
 );
+
+/**
+ * Nozbe task list
+ */
+togglbutton.render(
+  '.item.task:not(.toggl)',
+  { observe: true },
+  function renderNozbeList (elem) {
+    const description = elem.querySelector('.task__name').innerText.trim();
+    const projectName = elem.querySelector('.task__project-name').innerText.trim();
+
+    const link = togglbutton.createTimerLink({
+      className: 'nozbe-list',
+      buttonType: 'minimal',
+      description,
+      projectName
+    });
+
+    const container = elem.querySelector('.task__icons-right');
+    const starIcon = container.querySelector('.task__star');
+    container.insertBefore(link, starIcon);
+  }
+);

src/styles/style.css

@@ -1179,6 +1179,16 @@ a.toggl-button.workfront.min {
   background-size: 24px 24px;
   color: #151515 !important;
 }
+.toggl-button.nozbe-list {
+  visibility: hidden;
+  pointer-events: none;
+}
+.task:hover .toggl-button.nozbe-list,
+.task:active .toggl-button.nozbe-list,
+.task:focus .toggl-button.nozbe-list {
+  visibility: visible;
+  pointer-events: all;
+}
 
 /********* RallyDev *********/
 .timer__container.togglContainer {