[WIP] add button of jump to the selected line in PR

_locales/en/messages.json

@@ -67,5 +67,11 @@
     },
     "popup_dashboard_gantt_link": {
         "message": "Show link for gantt on my issues"
+    },
+    "popup_git": {
+        "message": "Git"
+    },
+    "popup_pr_diff_jump": {
+        "message": "Add button of jump to the selected line in PR"
     }
 }

_locales/ja/messages.json

@@ -67,5 +67,11 @@
     },
     "popup_dashboard_gantt_link": {
         "message": "ガントチャートへのリンクをダッシュボードに表示する"
+    },
+    "popup_git": {
+        "message": "Git"
+    },
+    "popup_pr_diff_jump": {
+        "message": "PRの各ファイルの行を指定して開けるボタンを追加する"
     }
 }

libs/power-ups.js

@@ -30,6 +30,12 @@ const POWER_UP_PLUGINS = [
             "relative-date",
             "dashboard-gantt-link"
         ]
+    },
+    {
+        groupId: "git",
+        pluginIds: [
+            "pr-diff-jump"
+        ]
     }
 ];
 

manifest.json

@@ -193,6 +193,12 @@
       ],
       "css": ["plugins/backlog-card/backlog-card.css"],
       "js": ["libs/jquery.js", "libs/power-ups.js", "plugins/backlog-card/backlog-card.js"]
+    },
+    {
+      "matches": [
+        "https://*.backlog.jp/git/*"
+      ],
+      "js": ["libs/power-ups.js", "plugins/pr-diff-jump/pr-diff-jump.js"]
     }
   ]
 }

plugins/pr-diff-jump/pr-diff-jump.js

@@ -0,0 +1,65 @@
+(() => {
+
+    const addJumpActionButton = (node) => {
+        const actions = node.querySelector('.js_line-comment-actions');
+
+        const span = document.createElement('span');
+        span.className = "icon-button icon-button--default -floating";
+        span.onclick = (ev) => {
+            const fileContainer = ev.target.parentNode.parentNode;
+            const href = fileContainer.parentNode.parentNode.querySelector('.code-view__header-action').href;
+            const lines = fileContainer.querySelectorAll('tr');
+
+            const targetRect = ev.target.getBoundingClientRect();
+            const y = Math.floor((targetRect.top + targetRect.bottom) / 2);
+
+            let ourLineNumber;
+            for (let i = 0; i < lines.length; ++i) {
+                const line = lines[i];
+                const rect = line.getBoundingClientRect();
+
+                const nums = line.querySelectorAll('.Line-number span');
+                if (nums.length > 1) {
+                    if (nums[1].hasAttribute('data-line-number')) {
+                        ourLineNumber = nums[1].getAttribute('data-line-number');
+                    }
+                }
+
+                if (rect.top < y && y < rect.bottom) {
+                    for (let j = nums.length - 1; j >= 0; --j) {
+                        if (ourLineNumber) {
+                            window.open(href + '#' + ourLineNumber, '_blank');
+                            return;
+                        }
+                    }
+                    return;
+                }
+            }
+        }
+
+        actions.appendChild(span);
+    }
+
+    const main = () => {
+        const observer = new MutationObserver((records, observer) => {
+            records.forEach((r) => {
+                if (r.addedNodes.length > 0) {
+                    for (let i = 0; i < r.addedNodes.length; ++i) {
+                        const n = r.addedNodes[i];
+                        if (n.className == 'line-comment-warapper') {
+                            addJumpActionButton(n);
+                        }
+                    }
+                }
+
+            });
+        });
+
+        observer.observe(document.querySelector('div.content-main'), { childList: true, subtree: true });
+    };
+
+    PowerUps.isEnabled("pr-diff-jump", (enabled) => {
+        if (enabled)
+            main();
+    })
+})();