Merge pull request #837 from ueokande/use-styled-components

Use styled-components instead of vanilla CSS/SCSS in console

6 files changed, 150 insertions, 178 deletions

diff --git a/e2e/completion.test.ts b/e2e/completion.test.ts
index bc065d3..c0e7052 100644
--- a/e2e/completion.test.ts
+++ b/e2e/completion.test.ts
@@ -28,33 +28,24 @@ describe("general completion test", () => {
     page = await Page.navigateTo(webdriver, "about:blank");
   });
 
-  it("should all commands on empty line", async () => {
+  it("should shows all commands on empty line", async () => {
     const console = await page.showConsole();
 
-    const items = await console.getCompletions();
-    assert.strictEqual(items.length, 12);
-    assert.deepStrictEqual(items[0], {
-      type: "title",
-      text: "Console Command",
-    });
-    assert.ok(items[1].text.startsWith("set"));
-    assert.ok(items[2].text.startsWith("open"));
-    assert.ok(items[3].text.startsWith("tabopen"));
+    const groups = await console.getCompletions();
+    assert.strictEqual(groups.length, 1);
+    assert.strictEqual(groups[0].title, "Console Command");
+    assert.strictEqual(groups[0].items.length, 11);
   });
 
-  it("should only commands filtered by prefix", async () => {
+  it("should shows commands filtered by prefix", async () => {
     const console = await page.showConsole();
     await console.inputKeys("b");
 
-    const items = await console.getCompletions();
-    assert.strictEqual(items.length, 4);
-    assert.deepStrictEqual(items[0], {
-      type: "title",
-      text: "Console Command",
-    });
-    assert.ok(items[1].text.startsWith("buffer"));
-    assert.ok(items[2].text.startsWith("bdelete"));
-    assert.ok(items[3].text.startsWith("bdeletes"));
+    const groups = await console.getCompletions();
+    const items = groups[0].items;
+    assert.ok(items[0].text.startsWith("buffer"));
+    assert.ok(items[1].text.startsWith("bdelete"));
+    assert.ok(items[2].text.startsWith("bdeletes"));
   });
 
   // > byffer
@@ -65,21 +56,24 @@ describe("general completion test", () => {
     const console = await page.showConsole();
     await console.inputKeys("b");
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.strictEqual(items.length, 4);
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.strictEqual(items.length, 3);
     });
 
     await console.sendKeys(Key.TAB);
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.ok(items[1].highlight);
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.ok(items[0].highlight);
       assert.strictEqual(await console.currentValue(), "buffer");
     });
 
     await console.sendKeys(Key.TAB, Key.TAB);
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.ok(items[3].highlight);
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.ok(items[2].highlight);
       assert.strictEqual(await console.currentValue(), "bdeletes");
     });
 
@@ -90,8 +84,9 @@ describe("general completion test", () => {
 
     await console.sendKeys(Key.SHIFT, Key.TAB);
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.ok(items[3].highlight);
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.ok(items[2].highlight);
       assert.strictEqual(await console.currentValue(), "bdeletes");
     });
   });
diff --git a/e2e/completion_buffers.test.ts b/e2e/completion_buffers.test.ts
index 57603f6..13d07ea 100644
--- a/e2e/completion_buffers.test.ts
+++ b/e2e/completion_buffers.test.ts
@@ -72,17 +72,19 @@ describe("completion on buffer/bdelete/bdeletes", () => {
     await console.inputKeys("buffer ");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.strictEqual(items.length, 6);
-      assert.deepStrictEqual(items[0], { type: "title", text: "Buffers" });
-      assert.ok(items[1].text.startsWith("1:"));
-      assert.ok(items[2].text.startsWith("2:"));
-      assert.ok(items[3].text.startsWith("3:"));
-      assert.ok(items[4].text.startsWith("4:"));
-      assert.ok(items[5].text.startsWith("5:"));
-
-      assert.ok(items[3].text.includes("%"));
-      assert.ok(items[5].text.includes("#"));
+      const groups = await console.getCompletions();
+      assert.strictEqual(groups.length, 1);
+      assert.strictEqual(groups[0].title, "Buffers");
+
+      const items = groups[0].items;
+      assert.ok(items[0].text.startsWith("1:"));
+      assert.ok(items[1].text.startsWith("2:"));
+      assert.ok(items[2].text.startsWith("3:"));
+      assert.ok(items[3].text.startsWith("4:"));
+      assert.ok(items[4].text.startsWith("5:"));
+
+      assert.ok(items[2].text.includes("%"));
+      assert.ok(items[4].text.includes("#"));
     });
   });
 
@@ -91,11 +93,10 @@ describe("completion on buffer/bdelete/bdeletes", () => {
     await console.inputKeys("buffer title_site2");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.deepStrictEqual(items[0], { type: "title", text: "Buffers" });
-      assert.ok(items[1].text.startsWith("2:"));
-      assert.ok(items[1].text.includes("title_site2"));
-      assert.ok(items[1].text.includes(server.url("/site2")));
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.ok(items[0].text.startsWith("2:"));
+      assert.ok(items[0].text.includes("title_site2"));
     });
   });
 
@@ -104,9 +105,9 @@ describe("completion on buffer/bdelete/bdeletes", () => {
     await console.inputKeys("buffer /site2");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.deepStrictEqual(items[0], { type: "title", text: "Buffers" });
-      assert.ok(items[1].text.startsWith("2:"));
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.ok(items[0].text.startsWith("2:"));
     });
   });
 
@@ -115,10 +116,11 @@ describe("completion on buffer/bdelete/bdeletes", () => {
     await console.inputKeys("buffer 2");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.strictEqual(items.length, 2);
-      assert.deepStrictEqual(items[0], { type: "title", text: "Buffers" });
-      assert.ok(items[1].text.startsWith("2:"));
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+
+      assert.strictEqual(items.length, 1);
+      assert.ok(items[0].text.startsWith("2:"));
     });
   });
 
@@ -127,11 +129,12 @@ describe("completion on buffer/bdelete/bdeletes", () => {
     await console.inputKeys("bdelete site");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.strictEqual(items.length, 4);
-      assert.ok(items[1].text.includes("site3"));
-      assert.ok(items[2].text.includes("site4"));
-      assert.ok(items[3].text.includes("site5"));
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.strictEqual(items.length, 3);
+      assert.ok(items[0].text.includes("site3"));
+      assert.ok(items[1].text.includes("site4"));
+      assert.ok(items[2].text.includes("site5"));
     });
   });
 
@@ -140,11 +143,12 @@ describe("completion on buffer/bdelete/bdeletes", () => {
     await console.inputKeys("bdeletes site");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.strictEqual(items.length, 4);
-      assert.ok(items[1].text.includes("site3"));
-      assert.ok(items[2].text.includes("site4"));
-      assert.ok(items[3].text.includes("site5"));
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.strictEqual(items.length, 3);
+      assert.ok(items[0].text.includes("site3"));
+      assert.ok(items[1].text.includes("site4"));
+      assert.ok(items[2].text.includes("site5"));
     });
   });
 
@@ -153,13 +157,14 @@ describe("completion on buffer/bdelete/bdeletes", () => {
     await console.inputKeys("bdelete! site");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.strictEqual(items.length, 6);
-      assert.ok(items[1].text.includes("site1"));
-      assert.ok(items[2].text.includes("site2"));
-      assert.ok(items[3].text.includes("site3"));
-      assert.ok(items[4].text.includes("site4"));
-      assert.ok(items[5].text.includes("site5"));
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.strictEqual(items.length, 5);
+      assert.ok(items[0].text.includes("site1"));
+      assert.ok(items[1].text.includes("site2"));
+      assert.ok(items[2].text.includes("site3"));
+      assert.ok(items[3].text.includes("site4"));
+      assert.ok(items[4].text.includes("site5"));
     });
   });
 
@@ -168,13 +173,14 @@ describe("completion on buffer/bdelete/bdeletes", () => {
     await console.inputKeys("bdeletes! site");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.strictEqual(items.length, 6);
-      assert.ok(items[1].text.includes("site1"));
-      assert.ok(items[2].text.includes("site2"));
-      assert.ok(items[3].text.includes("site3"));
-      assert.ok(items[4].text.includes("site4"));
-      assert.ok(items[5].text.includes("site5"));
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.strictEqual(items.length, 5);
+      assert.ok(items[0].text.includes("site1"));
+      assert.ok(items[1].text.includes("site2"));
+      assert.ok(items[2].text.includes("site3"));
+      assert.ok(items[3].text.includes("site4"));
+      assert.ok(items[4].text.includes("site5"));
     });
   });
 });
diff --git a/e2e/completion_open.test.ts b/e2e/completion_open.test.ts
index cefb44f..7eef4c2 100644
--- a/e2e/completion_open.test.ts
+++ b/e2e/completion_open.test.ts
@@ -45,31 +45,13 @@ describe("completion on open/tabopen/winopen commands", () => {
     await console.inputKeys("open ");
 
     await eventually(async () => {
-      const completions = await console.getCompletions();
-      assert.ok(
-        completions.find(
-          (x) => x.type === "title" && x.text === "Search Engines"
-        )
-      );
-      assert.ok(
-        completions.find((x) => x.type === "title" && x.text === "Bookmarks")
-      );
-      assert.ok(
-        completions.find((x) => x.type === "title" && x.text === "History")
-      );
-    });
-  });
-
-  it('should filter items with URLs by keywords on "open" command', async () => {
-    const console = await page.showConsole();
-    await console.inputKeys("open https://");
-
-    await eventually(async () => {
-      const completions = await console.getCompletions();
-      const items = completions
-        .filter((x) => x.type === "item")
-        .map((x) => x.text);
-      assert.ok(items.every((x) => x.includes("https://")));
+      const groups = await console.getCompletions();
+      const titles = groups.map((group) => group.title);
+      assert.deepStrictEqual(titles, [
+        "Search Engines",
+        "Bookmarks",
+        "History",
+      ]);
     });
   });
 
@@ -78,11 +60,9 @@ describe("completion on open/tabopen/winopen commands", () => {
     await console.inputKeys("open getting");
 
     await eventually(async () => {
-      const completions = await console.getCompletions();
-      const items = completions
-        .filter((x) => x.type === "item")
-        .map((x) => x.text);
-      assert.ok(items.every((x) => x.toLowerCase().includes("getting")));
+      const groups = await console.getCompletions();
+      const items = groups.map((group) => group.items).flat();
+      assert.ok(items.every((x) => x.text.toLowerCase().includes("getting")));
     });
   });
 
@@ -91,24 +71,20 @@ describe("completion on open/tabopen/winopen commands", () => {
     await console.inputKeys("tabopen getting");
 
     await eventually(async () => {
-      const completions = await console.getCompletions();
-      const items = completions
-        .filter((x) => x.type === "item")
-        .map((x) => x.text);
-      assert.ok(items.every((x) => x.includes("https://")));
+      const groups = await console.getCompletions();
+      const items = groups.map((group) => group.items).flat();
+      assert.ok(items.every((x) => x.text.toLowerCase().includes("getting")));
     });
   });
 
   it('should filter items with titles by keywords on "winopen" command', async () => {
     const console = await page.showConsole();
-    await console.inputKeys("winopen https://");
+    await console.inputKeys("winopen getting");
 
     await eventually(async () => {
-      const completions = await console.getCompletions();
-      const items = completions
-        .filter((x) => x.type === "item")
-        .map((x) => x.text);
-      assert.ok(items.every((x) => x.includes("https://")));
+      const groups = await console.getCompletions();
+      const items = groups.map((group) => group.items).flat();
+      assert.ok(items.every((x) => x.text.toLowerCase().includes("getting")));
     });
   });
 
@@ -121,10 +97,8 @@ describe("completion on open/tabopen/winopen commands", () => {
     await console.inputKeys("open ");
 
     await eventually(async () => {
-      const completions = await console.getCompletions();
-      const titles = completions
-        .filter((x) => x.type === "title")
-        .map((x) => x.text);
+      const groups = await console.getCompletions();
+      const titles = groups.map((group) => group.title);
       assert.deepStrictEqual(titles, [
         "Search Engines",
         "Bookmarks",
@@ -141,10 +115,8 @@ describe("completion on open/tabopen/winopen commands", () => {
     await console.inputKeys("open ");
 
     await eventually(async () => {
-      const completions = await console.getCompletions();
-      const titles = completions
-        .filter((x) => x.type === "title")
-        .map((x) => x.text);
+      const groups = await console.getCompletions();
+      const titles = groups.map((group) => group.title);
       assert.deepStrictEqual(titles, [
         "Bookmarks",
         "Search Engines",
@@ -164,10 +136,8 @@ describe("completion on open/tabopen/winopen commands", () => {
     await console.inputKeys("open ");
 
     await eventually(async () => {
-      const completions = await console.getCompletions();
-      const titles = completions
-        .filter((x) => x.type === "title")
-        .map((x) => x.text);
+      const groups = await console.getCompletions();
+      const titles = groups.map((group) => group.title);
       assert.deepStrictEqual(titles, [
         "Search Engines",
         "Bookmarks",
@@ -188,10 +158,8 @@ describe("completion on open/tabopen/winopen commands", () => {
     await console.inputKeys("open ");
 
     await eventually(async () => {
-      const completions = await console.getCompletions();
-      const titles = completions
-        .filter((x) => x.type === "title")
-        .map((x) => x.text);
+      const groups = await console.getCompletions();
+      const titles = groups.map((group) => group.title);
       assert.deepStrictEqual(titles, [
         "Bookmarks",
         "Search Engines",
diff --git a/e2e/completion_set.test.ts b/e2e/completion_set.test.ts
index 0a45ed3..929f649 100644
--- a/e2e/completion_set.test.ts
+++ b/e2e/completion_set.test.ts
@@ -33,14 +33,14 @@ describe("completion on set commands", () => {
     await console.inputKeys("set ");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.strictEqual(items.length, 6);
-      assert.deepStrictEqual(items[0], { type: "title", text: "Properties" });
-      assert.ok(items[1].text.startsWith("hintchars"));
-      assert.ok(items[2].text.startsWith("smoothscroll"));
-      assert.ok(items[3].text.startsWith("nosmoothscroll"));
-      assert.ok(items[4].text.startsWith("complete"));
-      assert.ok(items[5].text.startsWith("colorscheme"));
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.strictEqual(items.length, 5);
+      assert.ok(items[0].text.startsWith("hintchars"));
+      assert.ok(items[1].text.startsWith("smoothscroll"));
+      assert.ok(items[2].text.startsWith("nosmoothscroll"));
+      assert.ok(items[3].text.startsWith("complete"));
+      assert.ok(items[4].text.startsWith("colorscheme"));
     });
   });
 
@@ -49,9 +49,10 @@ describe("completion on set commands", () => {
     await console.inputKeys("set no");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.strictEqual(items.length, 2);
-      assert.ok(items[1].text.includes("nosmoothscroll"));
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.strictEqual(items.length, 1);
+      assert.ok(items[0].text.includes("nosmoothscroll"));
     });
   });
 });
diff --git a/e2e/lib/Console.ts b/e2e/lib/Console.ts
index 2c128d1..4d017cc 100644
--- a/e2e/lib/Console.ts
+++ b/e2e/lib/Console.ts
@@ -1,7 +1,11 @@
 import { WebDriver, By, Key } from "selenium-webdriver";
 
+export type CompletionGroups = {
+  title: string;
+  items: Array<CompletionItem>;
+};
+
 export type CompletionItem = {
-  type: string;
   text: string;
   highlight: boolean;
 };
@@ -25,23 +29,17 @@ export class Console {
   }
 
   async execCommand(command: string): Promise<void> {
-    const input = await this.webdriver.findElement(
-      By.css("input.vimvixen-console-command-input")
-    );
+    const input = await this.webdriver.findElement(By.css("input"));
     await input.sendKeys(command, Key.ENTER);
   }
 
   async getErrorMessage(): Promise<string> {
-    const p = await this.webdriver.findElement(
-      By.css(".vimvixen-console-error")
-    );
+    const p = await this.webdriver.findElement(By.css("[role=alert]"));
     return p.getText();
   }
 
   async getInformationMessage(): Promise<string> {
-    const p = await this.webdriver.findElement(
-      By.css(".vimvixen-console-info")
-    );
+    const p = await this.webdriver.findElement(By.css("[role=status]"));
     return p.getText();
   }
 
@@ -50,36 +48,42 @@ export class Console {
     await input.sendKeys(...keys);
   }
 
-  getCompletions(): Promise<CompletionItem[]> {
+  getCompletions(): Promise<CompletionGroups[]> {
     return this.webdriver.executeScript(() => {
-      const items = document.querySelectorAll(
-        ".vimvixen-console-completion > li"
-      );
-      if (items.length === 0) {
+      const groups = document.querySelectorAll("[role=group]");
+      if (groups.length === 0) {
         throw new Error("completion items not found");
       }
 
-      const objs = [];
-      for (const li of Array.from(items)) {
-        if (li.classList.contains("vimvixen-console-completion-title")) {
-          objs.push({ type: "title", text: li.textContent!.trim() });
-        } else if (li.classList.contains("vimvixen-console-completion-item")) {
-          const highlight = li.classList.contains(
-            "vimvixen-completion-selected"
-          );
-          objs.push({ type: "item", text: li.textContent!.trim(), highlight });
-        } else {
-          throw new Error(`unexpected class: ${li.className}`);
-        }
-      }
-      return objs;
+      return Array.from(groups).map((group) => {
+        const describedby = group.getAttribute("aria-describedby") as string;
+        const title = document.getElementById(describedby)!;
+        const items = group.querySelectorAll("[role=menuitem]");
+
+        return {
+          title: title.textContent!.trim(),
+          items: Array.from(items).map((item) => ({
+            text: document.getElementById(
+              item.getAttribute("aria-labelledby")!
+            )!.textContent,
+            highlight: item.getAttribute("aria-selected") === "true",
+          })),
+        };
+      });
     });
   }
 
   async getTheme(): Promise<string> {
-    const wrapper = await this.webdriver.findElement(By.css("div[data-theme]"));
-    const theme = await wrapper.getAttribute("data-theme");
-    return theme;
+    const color = (await this.webdriver.executeScript(() => {
+      const input = document.querySelector("input")!;
+      return window.getComputedStyle(input).backgroundColor;
+    })) as string;
+    if (color === "rgb(5, 32, 39)") {
+      return "dark";
+    } else if (color === "rgb(255, 255, 255)") {
+      return "light";
+    }
+    throw new Error(`unknown input color: ${color}`);
   }
 
   async close(): Promise<void> {
diff --git a/e2e/lib/Page.ts b/e2e/lib/Page.ts
index 85bda8d..6531f19 100644
--- a/e2e/lib/Page.ts
+++ b/e2e/lib/Page.ts
@@ -46,9 +46,7 @@ export default class Page {
     await this.sendKeys(":");
     await this.webdriver.wait(until.elementIsVisible(iframe));
     await this.webdriver.switchTo().frame(0);
-    await this.webdriver.wait(
-      until.elementLocated(By.css("input.vimvixen-console-command-input"))
-    );
+    await this.webdriver.wait(until.elementLocated(By.css("input")));
     return new Console(this.webdriver);
   }