1 files changed, 38 insertions, 12 deletions

diff --git a/web_src/js/features/repo-code.js b/web_src/js/features/repo-code.js
index 8562ba0072..002a25f6ed 100644
--- a/web_src/js/features/repo-code.js
+++ b/web_src/js/features/repo-code.js
@@ -1,6 +1,8 @@
 import $ from 'jquery';
 import {svg} from '../svg.js';
 import {invertFileFolding} from './file-fold.js';
+import {createTippy} from '../modules/tippy.js';
+import {copyToClipboard} from './clipboard.js';
 
 function changeHash(hash) {
   if (window.history.pushState) {
@@ -39,13 +41,13 @@ function selectRange($list, $select, $from) {
     $viewGitBlame.attr('href', href);
   };
 
-  const updateCopyPermalinkHref = function(anchor) {
+  const updateCopyPermalinkUrl = function(anchor) {
     if ($copyPermalink.length === 0) {
       return;
     }
-    let link = $copyPermalink.attr('data-clipboard-text');
+    let link = $copyPermalink.attr('data-url');
     link = `${link.replace(/#L\d+$|#L\d+-L\d+$/, '')}#${anchor}`;
-    $copyPermalink.attr('data-clipboard-text', link);
+    $copyPermalink.attr('data-url', link);
   };
 
   if ($from) {
@@ -67,7 +69,7 @@ function selectRange($list, $select, $from) {
 
       updateIssueHref(`L${a}-L${b}`);
       updateViewGitBlameFragment(`L${a}-L${b}`);
-      updateCopyPermalinkHref(`L${a}-L${b}`);
+      updateCopyPermalinkUrl(`L${a}-L${b}`);
       return;
     }
   }
@@ -76,17 +78,36 @@ function selectRange($list, $select, $from) {
 
   updateIssueHref($select.attr('rel'));
   updateViewGitBlameFragment($select.attr('rel'));
-  updateCopyPermalinkHref($select.attr('rel'));
+  updateCopyPermalinkUrl($select.attr('rel'));
 }
 
 function showLineButton() {
-  if ($('.code-line-menu').length === 0) return;
-  $('.code-line-button').remove();
-  $('.code-view td.lines-code.active').closest('tr').find('td:eq(0)').first().prepend(
-    $(`<button class="code-line-button">${svg('octicon-kebab-horizontal')}</button>`)
-  );
-  $('.code-line-menu').appendTo($('.code-view'));
-  $('.code-line-button').popup({popup: $('.code-line-menu'), on: 'click'});
+  const menu = document.querySelector('.code-line-menu');
+  if (!menu) return;
+
+  // remove all other line buttons
+  for (const el of document.querySelectorAll('.code-line-button')) {
+    el.remove();
+  }
+
+  // find active row and add button
+  const tr = document.querySelector('.code-view td.lines-code.active').closest('tr');
+  const td = tr.querySelector('td');
+  const btn = document.createElement('button');
+  btn.classList.add('code-line-button');
+  btn.innerHTML = svg('octicon-kebab-horizontal');
+  td.prepend(btn);
+
+  // put a copy of the menu back into DOM for the next click
+  btn.closest('.code-view').appendChild(menu.cloneNode(true));
+
+  createTippy(btn, {
+    trigger: 'click',
+    content: menu,
+    placement: 'right-start',
+    role: 'menu',
+    interactive: 'true',
+  });
 }
 
 export function initRepoCodeView() {
@@ -159,4 +180,9 @@ export function initRepoCodeView() {
     const blob = await $.get(`${url}?${query}&anchor=${anchor}`);
     currentTarget.closest('tr').outerHTML = blob;
   });
+  $(document).on('click', '.copy-line-permalink', async (e) => {
+    const success = await copyToClipboard(e.currentTarget.getAttribute('data-url'));
+    if (!success) return;
+    document.querySelector('.code-line-button')?._tippy?.hide();
+  });
 }