Allow for the buttons to be displayed even without a refresh (#39)

* allow for the buttons to be displayed event without a refresh

* fix snapshots

Author: qmenoret

extension/background/index.ts

@@ -1,6 +1,7 @@
 import { Request } from '../types/request'
 import { Response } from '../types/response'
 import { CodeTour, EnhancedCodeTourStep } from '../types/code-tour'
+import { Actions, BackgroundMessage } from '../types/background-messages'
 import MessageSender = chrome.runtime.MessageSender
 
 const codeTourMap: Record<string, CodeTourGenerator> = {}
@@ -92,3 +93,12 @@ chrome.runtime.onMessage.addListener(function (
   }
   return false
 })
+
+chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
+  if (changeInfo.url) {
+    const message: BackgroundMessage = {
+      action: Actions.UrlChanged,
+    }
+    chrome.tabs.sendMessage(tabId, message)
+  }
+})

extension/github/__snapshots__/add-code-tour.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`buildSection renders properly the section when the next and previous URLs are not defined 1`] = `
 <div
-  class="dl-doctolib-code-tour-comment"
+  class="code-tour-comment"
   style="
     padding: 14px;
     margin: 14px;
@@ -52,7 +52,7 @@ exports[`buildSection renders properly the section when the next and previous UR
 
 exports[`buildSection renders properly the whole section 1`] = `
 <div
-  class="dl-doctolib-code-tour-comment"
+  class="code-tour-comment"
   style="
     padding: 14px;
     margin: 14px;

extension/github/add-code-tour.ts

@@ -86,7 +86,7 @@ export function buildSection(currentStep: EnhancedCodeTourStep, step: number): H
   const nextButton = buttonTo('Next', currentStep.nextUrl)
 
   const section = document.createElement('div')
-  section.setAttribute('class', 'dl-doctolib-code-tour-comment')
+  section.setAttribute('class', 'code-tour-comment')
 
   const tourInfo = buildTitleRow(currentStep, step)
 
@@ -112,6 +112,8 @@ export function buildSection(currentStep: EnhancedCodeTourStep, step: number): H
 }
 
 export async function addCodeTour(): Promise<void> {
+  // Prevent displaying the code tour twice
+  if (document.querySelector('.code-tour-comment')) return
   const sheet = document.createElement('style')
   sheet.innerHTML = `
   pre {

extension/github/index.ts

@@ -1,6 +1,7 @@
 import { onMainPage } from './on-main-page'
 import { onCodeTourList } from './on-code-tour-list'
 import { addCodeTour } from './add-code-tour'
+import { Actions, BackgroundMessage } from '../types/background-messages'
 
 enum PageType {
   NoWhere,
@@ -38,4 +39,12 @@ function main(): void {
   return undefined
 }
 
-setTimeout(main, 1000)
+document.addEventListener('DOMContentLoaded', () => {
+  main()
+})
+
+chrome.runtime.onMessage.addListener(function (request: BackgroundMessage) {
+  if (request.action === Actions.UrlChanged) {
+    setTimeout(main, 1000)
+  }
+})

extension/github/on-code-tour-list.ts

@@ -24,6 +24,9 @@ export function onCodeTourList(): void {
   const currentRepository = currentRepositoryMatches[1]
   const currentBranch = currentBranchMatches[1]
 
+  // Prevent displaying the buttons twice
+  if (document.querySelector('.code-tour-start')) return
+
   const insertPreparation = Array.from(
     document.querySelectorAll('div[role=row] > div[role="rowheader"] > span > a').values(),
   ).map(
@@ -52,6 +55,7 @@ export function onCodeTourList(): void {
 
         const newChild = document.createElement('a')
         newChild.classList.add('btn')
+        newChild.classList.add('code-tour-start')
         newChild.innerHTML = `Learn ${prettyName}`
         newChild.onclick = async () => {
           const result = await forwardRequest({ action: 'START', codeTour: tourContent })
@@ -71,6 +75,8 @@ export function onCodeTourList(): void {
   )
 
   void Promise.all(insertPreparation).then((operations) => {
+    // Prevent displaying the buttons twice
+    if (document.querySelector('.code-tour-start')) return
     operations.forEach((operation) => {
       if (!operation) return
       const { newChild, row } = operation

extension/github/on-main-page.ts

@@ -2,11 +2,14 @@ export function onMainPage(): void {
   const node = document.querySelector('a[href$="/.tours"]')
   if (!node) return
 
+  if (document.querySelector('.code-tour-access')) return
+
   const codeTourFolderUrl = node.getAttribute('href')
   if (!codeTourFolderUrl) return
 
   const codeTourButton = document.createElement('a')
   codeTourButton.classList.add('btn')
+  codeTourButton.classList.add('code-tour-access')
   codeTourButton.classList.add('ml-2')
   codeTourButton.classList.add('d-none')
   codeTourButton.classList.add('d-md-block')

extension/types/background-messages.ts

@@ -0,0 +1,11 @@
+export enum Actions {
+  UrlChanged = 'URL_CHANGED',
+}
+
+interface Message<T extends Actions> {
+  action: T
+}
+
+type UrlChangedMessage = Message<Actions.UrlChanged>
+
+export type BackgroundMessage = UrlChangedMessage