Introduction

To streamline access to our internal infrastructure (.home.arpa) management and monitoring dashboards, I set up a dedicated QuteBrowser configuration. This approach allows for efficient, Vim-like navigation entirely via the keyboard.

Configuration Context

The purpose of this setup is to create a focused browsing environment specifically for checking services on the local network, such as the Edge router, Grafana, and Prometheus. I adjusted font sizes, scrolling behavior, and UI color schemes to maximize screen space while ensuring comfortable tab switching without needing a mouse.

QuteBrowser Configuration Details (config.py)

Below is the complete configuration. I disabled autosave and set the browser to automatically open the main monitoring pages upon startup.

  config.load_autoconfig(False)
c.auto_save.session = False
c.url.default_page = "about:blank"
c.url.start_pages = [
    "https://edge.home.arpa",
    "https://desktop.home.arpa:3000",
    "https://storage.home.arpa:9090/targets",
    "http://storage.home.arpa:9080/targets",
]

Font and UI Adjustments

To improve readability, I selected the programming font “Ricty Diminished” and increased the font size. The tab bar is positioned on the left side and fixed to a width of 18%.

  c.fonts.default_family = "Ricty Diminished"
c.fonts.default_size = "21pt"
c.fonts.statusbar = "28pt"
c.fonts.web.family.standard = "Ricty Diminished"

c.tabs.title.format = "{current_title}"
c.tabs.show = "multiple"
c.tabs.position = "left"
c.tabs.width = "18%"
c.tabs.favicons.scale = 0.9
c.tabs.title.alignment = "left"
c.tabs.max_width = 250
c.tabs.min_width = 180
c.tabs.padding = {"top": 8, "bottom": 8, "left": 12, "right": 12}
c.tabs.indicator.width = 3
c.statusbar.show = "in-mode"
c.zoom.default = "145%"

Improving Operability with Keybindings

I changed the key mappings to align with Vim mechanics: using H/L to go back/forward, and J/K to navigate tabs. Considering the frequent need to view large dashboards, I also increased the default scroll amount.

  config.bind("H", "back")
config.bind("L", "forward")
config.bind("J", "tab-prev")
config.bind("K", "tab-next")
config.bind("d", "tab-close")
config.bind("u", "undo")
config.bind("x", "tab-close")
config.bind("X", "undo")

# j/k: Large line scrolling
config.bind("j", "scroll-px 0 200")
config.bind("k", "scroll-px 0 -200")

# Ctrl-F/B: Half-page scrolling
config.bind("<Ctrl-f>", "scroll-page 0 2")
config.bind("<Ctrl-b>", "scroll-page 0 -2")

Web Page and Tab Bar Color Settings (Dark Mode)

To reduce eye strain during prolonged monitoring sessions, forced dark mode is enabled for web pages. Additionally, the tab bar and status bar are set to a solid black (#000000) theme. Self-signed certificate errors are set to ask to ensure each is verified manually.

  c.content.cookies.accept = "no-3rdparty"
c.content.javascript.enabled = True
c.content.tls.certificate_errors = "ask"
c.colors.webpage.darkmode.enabled = True
c.colors.webpage.preferred_color_scheme = "dark"
c.scrolling.smooth = False
c.scrolling.bar = "always"
c.content.autoplay = True
c.statusbar.padding = {"top": 8, "bottom": 8, "left": 8, "right": 8}
c.statusbar.position = "bottom"

c.colors.tabs.bar.bg = "#000000"

c.colors.tabs.even.bg = "#000000"
c.colors.tabs.odd.bg = "#000000"
c.colors.tabs.even.fg = "#bbbbbb"
c.colors.tabs.odd.fg = "#bbbbbb"

c.colors.tabs.selected.even.bg = "#111111"
c.colors.tabs.selected.odd.bg = "#111111"
c.colors.tabs.selected.even.fg = "#ffffff"
c.colors.tabs.selected.odd.fg = "#ffffff"

c.colors.tabs.indicator.start = "#000000"
c.colors.tabs.indicator.stop = "#000000"
c.colors.tabs.indicator.error = "#550000"

Future Work

With these configurations, navigating infrastructure monitoring screens like Grafana using only the keyboard has become highly efficient. In the future, I plan to explore session management based on specific use cases and potentially add more dashboards to the setup.