fix(trello): adjust selectors and debounce interval, and tweak margins (#2276)

Closes: #2275

* chore(trello): add trello.js metadata
* Update origins.js

Author: niyiAO

src/content/trello.js

@@ -1,3 +1,8 @@
+/**
+ * @name Trello
+ * @urlAlias trello.com 
+ * @urlRegex *://trello.com/*
+ */
 'use strict';
 /* global createTag */
 
@@ -6,9 +11,11 @@ const getProject = () => {
   return project ? project.textContent.trim() : '';
 };
 
+const cardContainerSelector = '.window-overlay .window-wrapper'
+
 togglbutton.render(
   '.window-header:not(.toggl)',
-  { observe: true },
+  { observe: true, debounceInterval: 300 },
   (elem) => {
     const actionButton =
       $('.js-move-card') ||
@@ -30,7 +37,7 @@ togglbutton.render(
       className: 'trello',
       description: getDescription,
       projectName: getProject,
-      container: '.window-wrapper'
+      container: cardContainerSelector
     });
 
     // Pass through click on Trello button to the timer link
@@ -42,7 +49,7 @@ togglbutton.render(
     container.appendChild(link);
     actionButton.parentNode.insertBefore(container, actionButton);
   },
-  '.window-wrapper'
+  cardContainerSelector
 );
 
 /* Checklist buttons */
@@ -69,15 +76,14 @@ togglbutton.render(
       buttonType: 'minimal',
       projectName: getProject,
       description: getDescription,
-      container: '.window-wrapper'
+      container: cardContainerSelector
     });
     const wrapper = document.createElement('span');
     wrapper.classList.add('checklist-item-menu');
     wrapper.style.display = 'flex';
     wrapper.style.alignItems = 'center';
-    wrapper.style.marginRight = '4px';
     wrapper.appendChild(link);
     elem.querySelector('.checklist-item-controls').appendChild(wrapper);
   },
-  '.checklist-items-list, .window-wrapper'
+  `.checklist-items-list, ${cardContainerSelector}`
 );

src/origins.js

@@ -594,8 +594,9 @@ export default {
     clone: 'true'
   },
   'trello.com': {
-    url: '*://*.trello.com/*',
-    name: 'Trello'
+    url: '*://trello.com/*',
+    name: 'Trello',
+    file: 'trello.js'
   },
   'unfuddle.com': {
     url: '*://*.unfuddle.com/*',

src/styles/style.css

@@ -175,6 +175,8 @@ SingleTaskPaneToolbar .toggl-button.asana-board, /* new ui v1 */
 .toggl-button.trello-list:not(.toggl-button-edit-form-button) {
   visibility: hidden;
   pointer-events: none;
+  margin-top: 6px;
+  margin-left: 1px;
 }
 .checklist-item-details:hover .toggl-button.trello-list, .toggl-button.trello-list.active:not(.toggl-button-edit-form-button) {
   visibility: visible;