Move the icons to the comment toolbar of the textarea

Moving the icons to the toolbar means they are always displayed for
easier use, as well as not getting in the way when you try to
continue editing longer text in the textarea

This change also updates the code to dynamically add these
buttons to any new textarea rather than waiting for the click

As a nice addition while restyling, it also now makes use of
the existing GitLab tooltips system

src/inject/inject.css

@@ -1,37 +1,42 @@
+.has-conventional-comments-buttons.comment-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.has-conventional-comments-buttons.comment-toolbar .toolbar-text {
+  margin: 0;
+}
+
+.has-conventional-comments-buttons.comment-toolbar .uploading-container {
+  float: none;
+  margin-right: 0;
+}
+
 #conventionalCommentButtonContainer {
   display: flex;
   align-items: flex-end;
-  position: absolute;
+  margin-left:0;
-  bottom: 0;
-  left: 0;
-  opacity: 0;
-  width: 25px;
-  height: 60px;
-  transition: all 0.3s;
-  overflow: hidden;
-}
-
-#conventionalCommentButtonContainer:hover {
-  width: 300px;
-  opacity: 1;
 }
 
 #conventionalCommentButtonContainer .buttonContainer {
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: row;
   height: 25px;
   width: 25px;
   overflow: hidden;
   transition: all 0.3s;
 }
 
-#conventionalCommentButtonContainer .buttonContainer:hover {
+#conventionalCommentButtonContainer .buttonContainer.hasBlockingButton:hover {
-  height: 60px;
+  width: 50px;
 }
 
 #conventionalCommentButtonContainer button {
   margin-right: 0.5rem;
+  background: transparent;
   border: none;
+  color: #666;
   height: 25px;
   width: 25px;
   outline: 0;
@@ -42,10 +47,26 @@
   width: 13px;
 }
 
+#conventionalCommentButtonContainer button:hover {
+  color: #1068bf;
+}
+
 #conventionalCommentButtonContainer button:focus {
   outline: 0;
 }
 
+.gl-dark #conventionalCommentButtonContainer button {
+  color: #999;
+}
+
+.gl-dark #conventionalCommentButtonContainer button:hover {
+  color: #63a6e9;
+}
+
 #conventionalCommentButtonContainer button.blocking {
   color: red;
 }
+
+#conventionalCommentButtonContainer button.blocking:hover {
+  color: #f57f6c;
+}

src/inject/inject.js

@@ -81,10 +81,15 @@ const semanticButtonClickHandler = (e, { textarea, label, blocking }) => {
 
 const buttonGenerator = (textarea, parent, label, blocking) => {
   const button = document.createElement("button");
+  button.classList.add("has-tooltip")
+  button.setAttribute("data-title", semanticLabels[label].text);
   button.innerHTML = semanticLabels[label].icon;
+
   if (blocking) {
     button.classList.add("blocking");
+    button.setAttribute("data-title", `${semanticLabels[label].text} (blocking)`);
   }
+
   button.addEventListener("click", (e) =>
     semanticButtonClickHandler(e, { textarea, label, blocking })
   );
@@ -96,28 +101,28 @@ const buttonPairGenerator = (textarea, parent, label) => {
   buttonContainer.classList.add("buttonContainer");
   buttonGenerator(textarea, buttonContainer, label, false);
   if (semanticLabels[label].blocking) {
+    buttonContainer.classList.add("hasBlockingButton");
     buttonGenerator(textarea, buttonContainer, label, true);
   }
   parent.appendChild(buttonContainer);
 };
 
 const addSemanticButton = (element) => {
-  const parent = element.closest("div");
+  const parent = element.closest(".div-dropzone-wrapper").querySelector(".comment-toolbar");
   const container = document.createElement("div");
   container.id = "conventionalCommentButtonContainer";
 
   Object.keys(semanticLabels).forEach((label) => {
     buttonPairGenerator(element, container, label);
   });
-  parent.appendChild(container);
+  parent.classList.remove("clearfix");
+  parent.classList.add('has-conventional-comments-buttons');
+  parent.prepend(container);
 };
 
-document.addEventListener("click", (e) => {
+setInterval(function () {
-  if (
+  document.querySelectorAll("#note_note:not([data-semantic-button-initialized]), #note-body:not([data-semantic-button-initialized])").forEach(function(note) {
-    (e.target.id === "note_note" || e.target.id === "note-body") &&
+    note.dataset.semanticButtonInitialized = "true";
-    !e.target.dataset.semanticButtonInitialized
+    addSemanticButton(note);
-  ) {
+  });
-    e.target.dataset.semanticButtonInitialized = true;
+}, 1000);
-    addSemanticButton(e.target);
-  }
-});