Vimium-like keymaps recipes share

[qw457812]

I have searched glide.ctx.is_editing() in GitHub, but there are no results, so I decided to share some vimium like keymaps here as a starting point for people who want to migrate from vimium/vimium-c to glide.

function when_editing(
  editing_action: glide.ExcmdString | glide.KeymapCallback | null,
  non_editing_action: glide.ExcmdString | glide.KeymapCallback | null,
): glide.KeymapCallback {
  return async (props) => {
    const action = (await glide.ctx.is_editing())
      ? editing_action
      : non_editing_action;

    if (!action) return;

    if (typeof action === "string") {
      await glide.excmds.execute(action);
    } else {
      await action(props);
    }
  };
}

// Based on: https://github.com/glide-browser/glide/blob/107e240a8fd274cafef403d089dc2b646319e8f8/src/glide/browser/base/content/plugins/keymaps.mts
glide.keymaps.set("normal", "/", "keys <D-f>");
glide.keymaps.set("normal", "r", when_editing("r", "reload"));
glide.keymaps.set("normal", "t", when_editing(null, "tab_new"));
glide.keymaps.set("normal", "T", when_editing(null, "commandline_show tab "));
glide.keymaps.set(
  "normal",
  "yt",
  when_editing(
    null,
    async ({ tab_id }) => await browser.tabs.duplicate(tab_id),
  ),
);
glide.keymaps.set(
  "normal",
  "p",
  when_editing(null, async () => {
    const url = await navigator.clipboard.readText();
    await browser.tabs.update({ url });
  }),
);
glide.keymaps.set(
  "normal",
  "P",
  when_editing(null, async () => {
    const url = await navigator.clipboard.readText();
    await browser.tabs.create({ url });
  }),
);
glide.keymaps.set(
  "normal",
  "e",
  when_editing("motion e", async () => {
    await glide.keys.send("<D-l>");
    await sleep(50);
    await glide.excmds.execute("mode_change normal");
    await glide.excmds.execute("caret_move right");
  }),
);
glide.keymaps.set("normal", "gu", async () => {
  const url = new URL(glide.ctx.url);
  const parts = url.pathname.split("/").filter(Boolean);
  assert(parts.length > 0, "Cannot go up: already at root of URL hierarchy");
  parts.pop();
  await browser.tabs.update({
    url: [url.origin, ...parts].filter(Boolean).join("/"),
  });
});
glide.keymaps.set("normal", "gU", async () => {
  const url = new URL(glide.ctx.url);
  await browser.tabs.update({ url: url.origin });
});
glide.keymaps.set(
  "normal",
  "d",
  when_editing("mode_change op-pending --operator=d", async () => {
    // await glide.excmds.execute("scroll_page_down"); // buggy

    for (let i = 0; i < 4; i++) {
      await glide.excmds.execute("caret_move down");
      await sleep(20);
    }
  }),
  // { retain_key_display: true }, // no way to display key sequence only for editing
);
glide.keymaps.set(
  "normal",
  "u",
  when_editing("undo", async () => {
    // await glide.excmds.execute("scroll_page_up"); // buggy

    for (let i = 0; i < 4; i++) {
      await glide.excmds.execute("caret_move up");
      await sleep(20);
    }
  }),
);
glide.keymaps.set("normal", "x", when_editing("motion x", "tab_close"));
glide.keymaps.set(
  "normal",
  "X",
  when_editing("motion X", async () => await browser.sessions.restore()),
);
glide.keymaps.set("normal", "H", "back");
glide.keymaps.set("normal", "L", "forward");
glide.keymaps.set("normal", "J", "tab_prev");
glide.keymaps.set("normal", "K", "tab_next");
glide.keymaps.set("normal", "<C-p>", async ({ tab_id }) => {
  const tab = await browser.tabs.get(tab_id);
  await browser.tabs.update(tab_id, { pinned: !tab.pinned });
});

// track previously active tab
let previousTabId: number | undefined;
browser.tabs.onActivated.addListener((activeInfo) => {
  previousTabId = activeInfo.previousTabId;
});
glide.keymaps.set("normal", "^", async () => {
  if (previousTabId) {
    await browser.tabs.update(previousTabId, { active: true });
  }
});

function sleep(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

Edit: add <esc>

glide.autocmds.create("ModeChanged", "command:*", focus_page);

glide.keymaps.set(
  "normal",
  "<Esc>",
  when_editing(
    async () => {
      // for <D-f> find in this page
      await glide.keys.send("<Esc>", { skip_mappings: true });

      // defocus the editable element
      await focus_page();
    },
    async () => {
      await glide.keys.send("<Esc>", { skip_mappings: true });

      // additional actions you want to perform on esc, like:
      // await glide.excmds.execute("clear");
    },
  ),
);

async function focus_page() {
  // HACK: defocus the editable element by focusing the address bar and then refocusing the page
  await glide.keys.send("<F6>", { skip_mappings: true });
  await sleep(100);
  // check insert mode for address bar
  if (glide.ctx.mode === "insert") {
    await glide.keys.send("<F6>", { skip_mappings: true });
  }
}

Edit: add gi, update u/d

glide.keymaps.set("normal", "gi", async () => {
  await glide.excmds.execute("focusinput last");
  if (!(await glide.ctx.is_editing())) {
    await glide.keys.send("gI");
  }
});

[RobertCraigie]

This is very cool, thanks for sharing!

I originally went with just normal mode instead of an editing normal mode and a non editing mode to keep things simple, but seeing how much you're branching on is_editing() makes me reconsider the current approach... adding multiple normal modes would result in some awkward naming / behaviour 🤔

[qw457812]

@RobertCraigie Thanks for the reply, glad to help!

Based on my experience using and configuring Vimium and qutebrowser, I think the vim modes in a browser should (ideally) be grouped into two layers: a browsing layer (not sure about the name, I just made it
up) and an editing layer. Here are some keymap examples (approximate):

Browsing layer (targets the web page, like what Vimium and qutebrowser do):

• normal mode: j/k to scroll down/up, h/l to scroll left/right, H/L to navigate back/forward, r to reload, t for new tab...
• visual mode: v to start/create selections, y to copy visual selection... (I rarely use this feature, so I'm not sure about these keybindings)
• insert mode: passes all keys to the web page/browser (similar to Glide's ignore mode, I think), <esc> to exit
• command-line mode (qutebrowser provide this feature too)

Editing layer (Vimium and qutebrowser don't handle this; qutebrowser provides <c-e> to edit in an external editor):

• normal mode: same as Vim
• visual mode: same as Vim
• insert mode: same as Vim
• operator-pending mode: same as Vim

Glide has an editing layer, which is a killer feature. I suspect most users spend roughly 90% of their time browsing and 10% editing, so I think it would be great if Glide clearly distinguished between the browsing layer and editing layer.

I think what's Glide really missing here is visual mode for the browsing layer. It would also be helpful if Glide had it, since we currently often select and copy text using the mouse, and having vim-style visual selection would provide a nice keyboard-driven alternative.

That's quite a lot of feature requests. Just wanted to share my thoughts.