Add option to open Treetop in a new tab

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Added
 
 - Add Google Chrome support.
+- Add option to open Treetop in a new tab.
 
 ### Changed
 

_locales/en/messages.json

@@ -72,6 +72,10 @@
     "message": "Appearance",
     "description": "Title of group for appearance options."
   },
+  "optionOpenInNewTab": {
+    "message": "Open Treetop in a new tab",
+    "description": "Title of option to open Treetop in a new tab."
+  },
   "optionTruncateLongTitles": {
     "message": "Truncate long titles",
     "description": "Title of option to truncate long bookmark titles."

src/background_script/init.ts

@@ -18,9 +18,7 @@ export const init = async (): Promise<void> => {
 
   // Set default options
   const options = {
-    showBookmarksToolbar: true,
-    showBookmarksMenu: true,
-    showOtherBookmarks: true,
+    openInNewTab: true,
     truncate: true,
     tooltips: true,
     showRecentlyVisited: true,

src/background_script/open-treetop.test.ts

@@ -1,31 +1,60 @@
 import faker from 'faker';
-import { expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { openTreetop } from '@Treetop/background_script/open-treetop';
 
-it('opens in current tab', () => {
-  const tab: chrome.tabs.Tab = {
-    active: false,
-    autoDiscardable: false,
-    discarded: false,
-    groupId: 0,
-    highlighted: false,
-    incognito: false,
-    index: 0,
-    pinned: false,
-    selected: false,
-    windowId: 0,
-  };
+describe('open-treetop', () => {
+  let tab: chrome.tabs.Tab;
+  let url: string;
 
-  const url = faker.internet.url();
+  beforeEach(() => {
+    tab = {
+      active: false,
+      autoDiscardable: false,
+      discarded: false,
+      groupId: 0,
+      highlighted: false,
+      incognito: false,
+      index: 0,
+      pinned: false,
+      selected: false,
+      windowId: 0,
+    };
 
-  const update = vi.fn();
-  vi.spyOn(chrome.tabs, 'update').mockImplementation(update);
+    url = faker.internet.url();
+  });
 
-  vi.spyOn(chrome.runtime, 'getURL').mockReturnValue(url);
+  it('opens in current tab', async () => {
+    const get = vi.fn().mockResolvedValue({ openInNewTab: false });
+    vi.spyOn(chrome.storage.local, 'get').mockImplementation(get);
 
-  openTreetop(tab);
+    const update = vi.fn();
+    vi.spyOn(chrome.tabs, 'update').mockImplementation(update);
 
-  expect(update).toHaveBeenCalledOnce();
-  expect(update).toHaveBeenCalledWith({ url });
+    vi.spyOn(chrome.runtime, 'getURL').mockReturnValue(url);
+
+    openTreetop(tab);
+
+    await new Promise((resolve) => setTimeout(resolve));
+
+    expect(update).toHaveBeenCalledOnce();
+    expect(update).toHaveBeenCalledWith({ url });
+  });
+
+  it('opens in new tab', async () => {
+    const get = vi.fn().mockResolvedValue({ openInNewTab: true });
+    vi.spyOn(chrome.storage.local, 'get').mockImplementation(get);
+
+    const create = vi.fn();
+    vi.spyOn(chrome.tabs, 'create').mockImplementation(create);
+
+    vi.spyOn(chrome.runtime, 'getURL').mockReturnValue(url);
+
+    openTreetop(tab);
+
+    await new Promise((resolve) => setTimeout(resolve));
+
+    expect(create).toHaveBeenCalledOnce();
+    expect(create).toHaveBeenCalledWith({ url });
+  });
 });

src/background_script/open-treetop.ts

@@ -4,10 +4,22 @@
 
 import type { ChromeEventCallback } from '@Treetop/treetop/types';
 
+const asyncOpenTreetop = async (): Promise<void> => {
+  const url = chrome.runtime.getURL('treetop.html');
+
+  const { openInNewTab } = await chrome.storage.local.get('openInNewTab');
+
+  if (openInNewTab) {
+    await chrome.tabs.create({ url });
+  } else {
+    await chrome.tabs.update({ url });
+  }
+};
+
 export const openTreetop: ChromeEventCallback<
   typeof chrome.action.onClicked
 > = () => {
-  const url = chrome.runtime.getURL('treetop.html');
-
-  void chrome.tabs.update({ url });
+  asyncOpenTreetop().catch((err) => {
+    console.error(err);
+  });
 };

src/options/Options.svelte

@@ -5,8 +5,10 @@
   let options: Record<string, any>;
 
   const strings = {
+    general: chrome.i18n.getMessage('optionHeadingGeneral'),
     bookmarks: chrome.i18n.getMessage('optionHeadingBookmarks'),
     appearance: chrome.i18n.getMessage('optionHeadingAppearance'),
+    openInNewTab: chrome.i18n.getMessage('optionOpenInNewTab'),
     truncate: chrome.i18n.getMessage('optionTruncateLongTitles'),
     tooltips: chrome.i18n.getMessage('optionDisplayTooltips'),
     showRecentlyVisited: chrome.i18n.getMessage('optionShowRecentlyVisited'),
@@ -114,6 +116,17 @@
 
 {#if options}
   <main>
+    <h3>{strings.general}</h3>
+    <div>
+      <label>
+        <input
+          type="checkbox"
+          bind:checked={options.openInNewTab}
+          on:change={handleCheckboxChange}
+          data-option-name="openInNewTab" />
+        {strings.openInNewTab}
+      </label>
+    </div>
     <h3>{strings.bookmarks}</h3>
     <div>
       <label>

src/options/Options.svelte.test.ts

@@ -23,10 +23,14 @@ describe('Options', () => {
   beforeEach(() => {
     vi.spyOn(chrome.i18n, 'getMessage').mockImplementation((messageName) => {
       switch (messageName) {
+        case 'optionHeadingGeneral':
+          return 'general';
         case 'optionHeadingBookmarks':
           return 'bookmarks';
         case 'optionHeadingAppearance':
           return 'appearance';
+        case 'optionOpenInNewTab':
+          return 'open in new tab';
         case 'optionTruncateLongTitles':
           return 'truncate';
         case 'optionDisplayTooltips':
@@ -52,6 +56,7 @@ describe('Options', () => {
     });
 
     const get = vi.fn().mockResolvedValue({
+      openInNewTab: true,
       truncate: false,
       tooltips: true,
       showRecentlyVisited: true,
@@ -64,8 +69,10 @@ describe('Options', () => {
     setup();
 
     await waitFor(() => {
+      expect(screen.getByText(/^general/i)).toBeInTheDocument();
       expect(screen.getByText(/^bookmarks/i)).toBeInTheDocument();
       expect(screen.getByText(/^appearance/i)).toBeInTheDocument();
+      expect(screen.getByLabelText(/^open in new tab/i)).toBeInTheDocument();
       expect(screen.getByLabelText(/^truncate/i)).toBeInTheDocument();
       expect(screen.getByLabelText(/^tooltips/i)).toBeInTheDocument();
       expect(
@@ -86,9 +93,10 @@ describe('Options', () => {
     setup();
 
     await waitFor(() => {
-      expect(screen.getByText(/^bookmarks/i)).toBeInTheDocument();
+      expect(screen.getByText(/^general/i)).toBeInTheDocument();
     });
 
+    expect(screen.getByLabelText(/^open in new tab/i)).toBeChecked();
     expect(screen.getByLabelText(/^truncate/i)).not.toBeChecked();
     expect(screen.getByLabelText(/^tooltips/i)).toBeChecked();
     expect(screen.getByLabelText(/^show recently visited/i)).toBeChecked();