Делаем Electron UI более «нативным». Простой гайд из 15 шагов

Я не буду сильно морализировать на тему того, почему Electron.js ^[1] в разработке приложений для ПК это плохо или хорошо, где взять деньги в open-source и т.п. Скажем так: он есть и широко используется, и является таким же инструментом как ножовка, может быть, не самой острой, сделанной из плотного картона, но со встроенным mp3 плеером!

Ниже я приведу примеры, как пустить пыль в глаза юзерам можно улучшить ситуацию с ощущением чужеродности приложения среди других, написанных на честном Gtk, китами из XCode, Windows UWP и прочим с 0% вайбкодинга

1. Шрифты

Здесь не стоит сильно думать, а выставить стандартный пресет font-family ^[3] на корневой стиль всей страницы

:root{
    font-size: medium;
    font-family: system-ui;
}

С размерами лучше ничего не выдумывать, а взять что-то из CSS named values: medium, small, large. Иначе в некоторых случаях и на некоторых разрешениях можно словить мыльницу.

2. Не показывать окно, пока не загружено

Довольно простой фикс, который позволяет избежать показ пустого окна Chromium, если загрузка страницы по какой-то причине оказалось немного медленнее, чем нужно

При создании окна указываем show:false

win = new BrowserWindow({
  show: false,
  ...

и затем подписываемся до самой загрузки по URL

win.once('ready-to-show', () => {
  win.show();
});

3. Никаких DIY модалок и прочего

Если речь идет о диалоговом окне из 3-4 пунктов выбора, то я настоятельно рекомендую не создавать свой велосипед на HTML/CSS и просто использовать классы:

• dialog.showMessageBox([window, ]options)

• dialog.showErrorBox(title, content)

С ошибками совсем просто, а MessageBox позволяет создавать как окна типа window.confirm, так и окно с несколькими кнопками и даже чекбоксы (только 1). К примеру

const result = await dialog.showMessageBox({
  message: 'Evaluate initialization cells?',
  title: 'Initialization cells',
  type: 'question',
  buttons: ['Evaluate', 'Cancel'],
  noLink: false
});

здесь noLink работает только на Windows, и меняет стиль показа диалогового окна, точнее способ размещения кнопок. Вот так оно выглядит на Windows 10

Мы ещё вернемся к различиям Windows 10/11, которые придется учитывать

И вот то же самое окно на MacOS

Prompt window?

К сожалению среди инструментов Electron отсуствует напрочь возможность простого текстового ввода. Если бы они просто поддержали window.prompt ^[4] фичу из Chromium, то больших проблем бы не было. Однако авторы изрядно сопротивляются.

Можно пойти по пути VSCode и Obsidian, которые то же сделаны на основе Electron - переиспользовать окно палитры команд, если, конечно, оно у вас присуствует как концепт

Скажем при переименовании файла:

Traffic lights, X, O кнопки

MacOS

В целом, чтобы разместить что-то в верхней части окна надо сильно постараться. Вот как выглядит изначальная конфигурация (MacOS)

win = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload_main.js')
  }
});

Спрячем "верхнюю корочку" нашей буханки

win = new BrowserWindow({
  titleBarStyle: 'hiddenInset',
  webPreferences: {
    preload: path.join(__dirname, 'preload_main.js')
  }
});

Ура, готово! Казалось бы, на Windows / Linux должно быть также, да? Да, ведь?

4-15. Шаги

Если вы дочитали до этого момента, а дальше ничего нет, значит редактор Habrahabr удалил оставшиеся 11 шагов, записав какой-то мусор в localStorage. Как я узнал, эта и 99 других проблем уже тянется с 201X года, но почему-то никого не беспокоит.

Как другие авторы терпят откровенные косяки центральной русскоязычной платформы - для меня загадка. Впрочем, наверное просто нет выбора.

Спасибо за внимание.