dash-to-panel/prefs.js

/*
 * This file is part of the Dash-To-Panel extension for Gnome 3
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 *
 * Credits:
 * This file is based on code from the Dash to Dock extension by micheleg.
 * Some code was also adapted from the upstream Gnome Shell source code.
 */

import GdkPixbuf from 'gi://GdkPixbuf'
import Gio from 'gi://Gio'
import GLib from 'gi://GLib'
import GObject from 'gi://GObject'
import Gtk from 'gi://Gtk'
import Gdk from 'gi://Gdk'

import * as PanelSettings from './panelSettings.js'
import * as Pos from './panelPositions.js'

import {
  ExtensionPreferences,
  gettext as _,
  ngettext,
} from 'resource:///org/gnome/Shell/Extensions/js/extensions/prefs.js'

const SCALE_UPDATE_TIMEOUT = 500
const DEFAULT_PANEL_SIZES = [128, 96, 64, 48, 32, 24, 16]
const DEFAULT_FONT_SIZES = [96, 64, 48, 32, 24, 16, 0]
const DEFAULT_MARGIN_SIZES = [32, 24, 16, 12, 8, 4, 0]
const DEFAULT_PADDING_SIZES = [32, 24, 16, 12, 8, 4, 0, -1]
// Minimum length could be 0, but a higher value may help prevent confusion about where the panel went.
const LENGTH_MARKS = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10]
const MAX_WINDOW_INDICATOR = 4

const SCHEMA_PATH = '/org/gnome/shell/extensions/dash-to-panel/'

/**
 * This function was copied from the activities-config extension
 * https://github.com/nls1729/acme-code/tree/master/activities-config
 * by Norman L. Smith.
 */
function cssHexString(css) {
  let rrggbb = '#'
  let start
  for (let loop = 0; loop < 3; loop++) {
    let end = 0
    let xx = ''
    for (let loop = 0; loop < 2; loop++) {
      while (true) {
        let x = css.slice(end, end + 1)
        if (x == '(' || x == ',' || x == ')') break
        end++
      }
      if (loop == 0) {
        end++
        start = end
      }
    }
    xx = parseInt(css.slice(start, end)).toString(16)
    if (xx.length == 1) xx = '0' + xx
    rrggbb += xx
    css = css.slice(end)
  }
  return rrggbb
}

function setShortcut(settings, shortcutName) {
  let shortcut_text = settings.get_string(shortcutName + '-text')
  let [success, key, mods] = Gtk.accelerator_parse(shortcut_text)

  if (success && Gtk.accelerator_valid(key, mods)) {
    let shortcut = Gtk.accelerator_name(key, mods)
    settings.set_strv(shortcutName, [shortcut])
  } else {
    settings.set_strv(shortcutName, [])
  }
}

function checkHotkeyPrefix(settings) {
  settings.delay()

  let hotkeyPrefix = settings.get_string('hotkey-prefix-text')
  if (hotkeyPrefix == 'Super') hotkeyPrefix = '<Super>'
  else if (hotkeyPrefix == 'SuperAlt') hotkeyPrefix = '<Super><Alt>'
  let [, , mods] = Gtk.accelerator_parse(hotkeyPrefix)
  let [, , shift_mods] = Gtk.accelerator_parse('<Shift>' + hotkeyPrefix)
  let [, , ctrl_mods] = Gtk.accelerator_parse('<Ctrl>' + hotkeyPrefix)

  let numHotkeys = 10
  for (let i = 1; i <= numHotkeys; i++) {
    let number = i
    if (number == 10) number = 0
    let key = Gdk.keyval_from_name(number.toString())
    let key_kp = Gdk.keyval_from_name('KP_' + number.toString())
    if (Gtk.accelerator_valid(key, mods)) {
      let shortcut = Gtk.accelerator_name(key, mods)
      let shortcut_kp = Gtk.accelerator_name(key_kp, mods)

      // Setup shortcut strings
      settings.set_strv('app-hotkey-' + i, [shortcut])
      settings.set_strv('app-hotkey-kp-' + i, [shortcut_kp])

      // With <Shift>
      shortcut = Gtk.accelerator_name(key, shift_mods)
      shortcut_kp = Gtk.accelerator_name(key_kp, shift_mods)
      settings.set_strv('app-shift-hotkey-' + i, [shortcut])
      settings.set_strv('app-shift-hotkey-kp-' + i, [shortcut_kp])

      // With <Control>
      shortcut = Gtk.accelerator_name(key, ctrl_mods)
      shortcut_kp = Gtk.accelerator_name(key_kp, ctrl_mods)
      settings.set_strv('app-ctrl-hotkey-' + i, [shortcut])
      settings.set_strv('app-ctrl-hotkey-kp-' + i, [shortcut_kp])
    } else {
      // Reset default settings for the relevant keys if the
      // accelerators are invalid
      let keys = [
        'app-hotkey-' + i,
        'app-shift-hotkey-' + i,
        'app-ctrl-hotkey-' + i, // Regular numbers
        'app-hotkey-kp-' + i,
        'app-shift-hotkey-kp-' + i,
        'app-ctrl-hotkey-kp-' + i,
      ] // Key-pad numbers
      keys.forEach(function (val) {
        settings.set_value(val, settings.get_default_value(val))
      }, this)
    }
  }

  settings.apply()
}

function mergeObjects(main, bck) {
  for (const prop in bck) {
    if (!main.hasOwnProperty(prop) && bck.hasOwnProperty(prop)) {
      main[prop] = bck[prop]
    }
  }

  return main
}

const Preferences = class {
  constructor(window, settings, path) {
    // this._settings = ExtensionUtils.getSettings('org.gnome.shell.extensions.dash-to-panel');
    this._rtl = Gtk.Widget.get_default_direction() == Gtk.TextDirection.RTL
    this._builder = new Gtk.Builder()
    this._builder.set_scope(new BuilderScope(this))
    this._settings = settings
    this._path = path

    this._metadata = ExtensionPreferences.lookupByURL(import.meta.url).metadata
    this._builder.set_translation_domain(this._metadata['gettext-domain'])

    window.set_search_enabled(true)

    // dialogs
    this._builder.add_from_file(
      this._path + '/ui/BoxAnimateAppIconHoverOptions.ui',
    )
    this._builder.add_from_file(
      this._path + '/ui/BoxHighlightAppIconHoverOptions.ui',
    )
    this._builder.add_from_file(this._path + '/ui/BoxDotOptions.ui')
    this._builder.add_from_file(this._path + '/ui/BoxShowDesktopOptions.ui')
    this._builder.add_from_file(this._path + '/ui/BoxDynamicOpacityOptions.ui')
    this._builder.add_from_file(this._path + '/ui/BoxIntellihideOptions.ui')
    this._builder.add_from_file(
      this._path + '/ui/BoxShowApplicationsOptions.ui',
    )
    this._builder.add_from_file(this._path + '/ui/BoxWindowPreviewOptions.ui')
    this._builder.add_from_file(this._path + '/ui/BoxGroupAppsOptions.ui')
    this._builder.add_from_file(this._path + '/ui/BoxMiddleClickOptions.ui')
    this._builder.add_from_file(this._path + '/ui/BoxOverlayShortcut.ui')
    this._builder.add_from_file(this._path + '/ui/BoxSecondaryMenuOptions.ui')
    this._builder.add_from_file(this._path + '/ui/BoxScrollPanelOptions.ui')
    this._builder.add_from_file(this._path + '/ui/BoxScrollIconOptions.ui')
    this._builder.add_from_file(this._path + '/ui/BoxAdvancedOptions.ui')

    // pages
    this._builder.add_from_file(this._path + '/ui/SettingsPosition.ui')
    let pagePosition = this._builder.get_object('position')
    window.add(pagePosition)

    this._builder.add_from_file(this._path + '/ui/SettingsStyle.ui')
    let pageStyle = this._builder.get_object('style')
    window.add(pageStyle)

    this._builder.add_from_file(this._path + '/ui/SettingsBehavior.ui')
    let pageBehavior = this._builder.get_object('behavior')
    window.add(pageBehavior)

    this._builder.add_from_file(this._path + '/ui/SettingsAction.ui')
    let pageAction = this._builder.get_object('action')
    window.add(pageAction)

    this._builder.add_from_file(this._path + '/ui/SettingsFineTune.ui')
    let pageFineTune = this._builder.get_object('finetune')
    window.add(pageFineTune)

    this._builder.add_from_file(this._path + '/ui/SettingsDonation.ui')
    let pageDonation = this._builder.get_object('donation')
    window.add(pageDonation)

    this._builder.add_from_file(this._path + '/ui/SettingsAbout.ui')
    let pageAbout = this._builder.get_object('about')
    window.add(pageAbout)

    let listbox = this._builder.get_object('taskbar_display_listbox')
    let provider = new Gtk.CssProvider()
    provider.load_from_data('list { background-color: transparent; }', -1)
    let context = listbox.get_style_context()
    context.add_provider(provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)

    // set the window as notebook, it is being used as parent for dialogs
    this.notebook = window

    // Timeout to delay the update of the settings
    this._panel_size_timeout = 0
    this._dot_height_timeout = 0
    this._tray_size_timeout = 0
    this._leftbox_size_timeout = 0
    this._appicon_margin_timeout = 0
    this._appicon_margin_todesktop_timeout = 0
    this._appicon_margin_toscreenborder_timeout = 0
    this._appicon_padding_timeout = 0
    this._opacity_timeout = 0
    this._tray_padding_timeout = 0
    this._statusicon_padding_timeout = 0
    this._leftbox_padding_timeout = 0
    this._addFormatValueCallbacks()
    this._bindSettings()

    let maybeGoToPage = () => {
      let targetPageName = settings.get_string('target-prefs-page')

      if (targetPageName) {
        window.set_visible_page_name(targetPageName)
        settings.set_string('target-prefs-page', '')
      }
    }

    settings.connect('changed::target-prefs-page', maybeGoToPage)

    maybeGoToPage()
  }

  /**
   * Connect signals
   */
  _connector(builder, object, signal, handler) {
    object.connect(signal, this._SignalHandler[handler].bind(this))
  }

  _updateVerticalRelatedOptions() {
    let position = this._getPanelPosition(this._currentMonitorIndex)
    let isVertical = position == Pos.LEFT || position == Pos.RIGHT
    let showDesktopWidthLabel = this._builder.get_object(
      'show_showdesktop_width_label',
    )

    showDesktopWidthLabel.set_title(
      isVertical
        ? _('Show Desktop button height (px)')
        : _('Show Desktop button width (px)'),
    )

    this._displayPanelPositionsForMonitor(this._currentMonitorIndex)
  }

  _maybeDisableTopPosition() {
    let keepTopPanel = this._settings.get_boolean('stockgs-keep-top-panel')
    let monitorSync = this._settings.get_boolean(
      'panel-element-positions-monitors-sync',
    )
    let topAvailable =
      !keepTopPanel ||
      (!monitorSync && this._currentMonitorIndex != this.monitors[0])
    let topRadio = this._builder.get_object('position_top_button')

    topRadio.set_sensitive(topAvailable)
    topRadio.set_tooltip_text(
      !topAvailable
        ? _('Unavailable when gnome-shell top panel is present')
        : '',
    )
  }

  _getPanelPosition(monitorIndex) {
    return PanelSettings.getPanelPosition(this._settings, monitorIndex)
  }

  _setPanelPosition(position) {
    const monitorSync = this._settings.get_boolean(
      'panel-element-positions-monitors-sync',
    )
    const monitorsToSetFor = monitorSync
      ? this.monitors
      : [this._currentMonitorIndex]
    monitorsToSetFor.forEach((monitorIndex) => {
      PanelSettings.setPanelPosition(this._settings, monitorIndex, position)
    })
    this._setAnchorLabels(this._currentMonitorIndex)
  }

  _setPositionRadios(position) {
    this._ignorePositionRadios = true

    switch (position) {
      case Pos.BOTTOM:
        this._builder.get_object('position_bottom_button').set_active(true)
        break
      case Pos.TOP:
        this._builder.get_object('position_top_button').set_active(true)
        break
      case Pos.LEFT:
        this._builder.get_object('position_left_button').set_active(true)
        break
      case Pos.RIGHT:
        this._builder.get_object('position_right_button').set_active(true)
        break
    }

    this._ignorePositionRadios = false
  }

  /**
   * Set panel anchor combo labels according to whether the monitor's panel is vertical
   * or horizontal, or if all monitors' panels are being configured and they are a mix
   * of vertical and horizontal.
   */
  _setAnchorLabels(currentMonitorIndex) {
    const monitorSync = this._settings.get_boolean(
      'panel-element-positions-monitors-sync',
    )
    const monitorsToSetFor = monitorSync ? this.monitors : [currentMonitorIndex]
    const allVertical = monitorsToSetFor.every((i) => {
      const position = PanelSettings.getPanelPosition(this._settings, i)
      return position === Pos.LEFT || position === Pos.RIGHT
    })
    const allHorizontal = monitorsToSetFor.every((i) => {
      const position = PanelSettings.getPanelPosition(this._settings, i)
      return position === Pos.TOP || position === Pos.BOTTOM
    })

    const anchor_combo = this._builder.get_object('panel_anchor_combo')
    anchor_combo.remove_all()

    if (allHorizontal) {
      anchor_combo.append(Pos.START, _('Left'))
      anchor_combo.append(Pos.MIDDLE, _('Center'))
      anchor_combo.append(Pos.END, _('Right'))
    } else if (allVertical) {
      anchor_combo.append(Pos.START, _('Top'))
      anchor_combo.append(Pos.MIDDLE, _('Middle'))
      anchor_combo.append(Pos.END, _('Bottom'))
    } else {
      // Setting for a mix of horizontal and vertical panels on different monitors.
      anchor_combo.append(Pos.START, _('Start'))
      anchor_combo.append(Pos.MIDDLE, _('Middle'))
      anchor_combo.append(Pos.END, _('End'))
    }

    // Set combo box after re-populating its options. But only if it's for a single-panel
    // configuration, or a multi-panel configuration where they all have the same anchor
    // setting. So don't set the combo box if there is a multi-panel configuration with
    // different anchor settings.
    const someAnchor = PanelSettings.getPanelAnchor(
      this._settings,
      currentMonitorIndex,
    )
    if (
      monitorsToSetFor.every(
        (i) => PanelSettings.getPanelAnchor(this._settings, i) === someAnchor,
      )
    ) {
      const panel_anchor = PanelSettings.getPanelAnchor(
        this._settings,
        currentMonitorIndex,
      )
      this._builder.get_object('panel_anchor_combo').set_active_id(panel_anchor)
    }
  }

  /**
   * When a monitor is selected, update the widgets for panel position, size, anchoring,
   * and contents so they accurately show the settings for the panel on that monitor.
   */
  _updateWidgetSettingsForMonitor(monitorIndex) {
    // Update display of panel screen position setting
    this._maybeDisableTopPosition()
    const panelPosition = this._getPanelPosition(monitorIndex)
    this._setPositionRadios(panelPosition)

    // Update display of thickness, length, and anchor settings
    const panel_size_scale = this._builder.get_object('panel_size_scale')
    const size = PanelSettings.getPanelSize(this._settings, monitorIndex)
    panel_size_scale.set_value(size)

    const panel_length_scale = this._builder.get_object('panel_length_scale')
    const length = PanelSettings.getPanelLength(this._settings, monitorIndex)
    panel_length_scale.set_value(length)
    this._setAnchorWidgetSensitivity(length)

    this._setAnchorLabels(monitorIndex)

    // Update display of panel content settings
    this._displayPanelPositionsForMonitor(monitorIndex)
  }

  /**
   * Anchor is only relevant if panel length is less than 100%. Enable or disable
   * anchor widget sensitivity accordingly.
   */
  _setAnchorWidgetSensitivity(panelLength) {
    const isPartialLength = panelLength < 100
    this._builder
      .get_object('panel_anchor_label')
      .set_sensitive(isPartialLength)
    this._builder
      .get_object('panel_anchor_combo')
      .set_sensitive(isPartialLength)
  }

  _displayPanelPositionsForMonitor(monitorIndex) {
    let taskbarListBox = this._builder.get_object('taskbar_display_listbox')

    while (taskbarListBox.get_first_child()) {
      taskbarListBox.remove(taskbarListBox.get_first_child())
    }

    let labels = {}
    let panelPosition = this._getPanelPosition(monitorIndex)
    let isVertical = panelPosition == Pos.LEFT || panelPosition == Pos.RIGHT
    let panelElementPositionsSettings = PanelSettings.getSettingsJson(
      this._settings,
      'panel-element-positions',
    )
    let panelElementPositions =
      panelElementPositionsSettings[monitorIndex] || Pos.defaults
    let updateElementsSettings = () => {
      let newPanelElementPositions = []
      let monitorSync = this._settings.get_boolean(
        'panel-element-positions-monitors-sync',
      )
      let monitors = monitorSync ? this.monitors : [monitorIndex]

      let child = taskbarListBox.get_first_child()
      while (child != null) {
        newPanelElementPositions.push({
          element: child.id,
          visible: child.visibleToggleBtn.get_active(),
          position: child.positionCombo.get_active_id(),
        })
        child = child.get_next_sibling()
      }

      monitors.forEach(
        (m) => (panelElementPositionsSettings[m] = newPanelElementPositions),
      )
      this._settings.set_string(
        'panel-element-positions',
        JSON.stringify(panelElementPositionsSettings),
      )
    }

    labels[Pos.SHOW_APPS_BTN] = _('Show Applications button')
    labels[Pos.ACTIVITIES_BTN] = _('Activities button')
    labels[Pos.TASKBAR] = _('Taskbar')
    labels[Pos.DATE_MENU] = _('Date menu')
    labels[Pos.SYSTEM_MENU] = _('System menu')
    labels[Pos.LEFT_BOX] = _('Left box')
    labels[Pos.CENTER_BOX] = _('Center box')
    labels[Pos.RIGHT_BOX] = _('Right box')
    labels[Pos.DESKTOP_BTN] = _('Desktop button')

    panelElementPositions.forEach((el) => {
      let row = new Gtk.ListBoxRow()
      let grid = new Gtk.Grid({
        margin_start: 12,
        margin_end: 12,
        column_spacing: 8,
      })
      let upDownGrid = new Gtk.Grid({ column_spacing: 2 })
      let upBtn = new Gtk.Button({ tooltip_text: _('Move up') })
      let upImg = new Gtk.Image({ icon_name: 'go-up-symbolic', pixel_size: 12 })
      let downBtn = new Gtk.Button({ tooltip_text: _('Move down') })
      let downImg = new Gtk.Image({
        icon_name: 'go-down-symbolic',
        pixel_size: 12,
      })
      let visibleToggleBtn = new Gtk.ToggleButton({
        label: _('Visible'),
        active: el.visible,
      })
      let positionCombo = new Gtk.ComboBoxText({
        tooltip_text: _('Select element position'),
      })
      let upDownClickHandler = (limit) => {
        let index = row.get_index()

        if (index != limit) {
          taskbarListBox.remove(row)
          taskbarListBox.insert(row, index + (!limit ? -1 : 1))
          updateElementsSettings()
        }
      }

      positionCombo.append(
        Pos.STACKED_TL,
        isVertical ? _('Stacked to top') : _('Stacked to left'),
      )
      positionCombo.append(
        Pos.STACKED_BR,
        isVertical ? _('Stacked to bottom') : _('Stacked to right'),
      )
      positionCombo.append(Pos.CENTERED, _('Centered'))
      positionCombo.append(Pos.CENTERED_MONITOR, _('Monitor Center'))
      positionCombo.set_active_id(el.position)

      upBtn.connect('clicked', () => upDownClickHandler(0))
      downBtn.connect('clicked', () =>
        upDownClickHandler(panelElementPositions.length - 1),
      )
      visibleToggleBtn.connect('toggled', () => updateElementsSettings())
      positionCombo.connect('changed', () => updateElementsSettings())

      upBtn.set_child(upImg)
      downBtn.set_child(downImg)

      upDownGrid.attach(upBtn, 0, 0, 1, 1)
      upDownGrid.attach(downBtn, 1, 0, 1, 1)

      grid.attach(upDownGrid, 0, 0, 1, 1)
      grid.attach(
        new Gtk.Label({ label: labels[el.element], xalign: 0, hexpand: true }),
        1,
        0,
        1,
        1,
      )

      if (Pos.optionDialogFunctions[el.element]) {
        let cogImg = new Gtk.Image({ icon_name: 'emblem-system-symbolic' })
        let optionsBtn = new Gtk.Button({ tooltip_text: _('More options') })

        optionsBtn.get_style_context().add_class('circular')
        optionsBtn.set_child(cogImg)
        grid.attach(optionsBtn, 2, 0, 1, 1)

        optionsBtn.connect('clicked', () =>
          this[Pos.optionDialogFunctions[el.element]](),
        )
      }

      grid.attach(visibleToggleBtn, 3, 0, 1, 1)
      grid.attach(positionCombo, 4, 0, 1, 1)

      row.id = el.element
      row.visibleToggleBtn = visibleToggleBtn
      row.positionCombo = positionCombo

      row.set_child(grid)
      taskbarListBox.insert(row, -1)
    })
  }

  _createPreferencesDialog(title, content, reset_function = null) {
    let dialog

    dialog = new Gtk.Dialog({
      title: title,
      transient_for: this.notebook.get_root(),
      use_header_bar: true,
      modal: true,
    })

    // GTK+ leaves positive values for application-defined response ids.
    // Use +1 for the reset action
    if (reset_function != null) dialog.add_button(_('Reset to defaults'), 1)

    dialog.get_content_area().append(content)

    dialog.connect('response', (dialog, id) => {
      if (id == 1) {
        // restore default settings
        if (reset_function) reset_function()
      } else {
        // remove the settings content so it doesn't get destroyed;
        dialog.get_content_area().remove(content)
        dialog.destroy()
      }
      return
    })

    return dialog
  }

  _showShowAppsButtonOptions() {
    let box = this._builder.get_object('show_applications_options')

    let dialog = this._createPreferencesDialog(
      _('Show Applications options'),
      box,
      () => {
        // restore default settings
        this._settings.set_value(
          'show-apps-icon-side-padding',
          this._settings.get_default_value('show-apps-icon-side-padding'),
        )
        this._builder
          .get_object('show_applications_side_padding_spinbutton')
          .set_value(this._settings.get_int('show-apps-icon-side-padding'))
        this._settings.set_value(
          'show-apps-override-escape',
          this._settings.get_default_value('show-apps-override-escape'),
        )
        handleIconChange.call(this, null)
      },
    )

    let fileChooserButton = this._builder.get_object(
      'show_applications_icon_file_filebutton',
    )
    let fileChooser = new Gtk.FileChooserNative({
      title: _('Open icon'),
      transient_for: dialog,
    })
    let fileImage = this._builder.get_object(
      'show_applications_current_icon_image',
    )
    let fileFilter = new Gtk.FileFilter()
    fileFilter.add_pixbuf_formats()
    fileChooser.filter = fileFilter

    let handleIconChange = function (newIconPath) {
      if (newIconPath && GLib.file_test(newIconPath, GLib.FileTest.EXISTS)) {
        let file = Gio.File.new_for_path(newIconPath)
        let pixbuf = GdkPixbuf.Pixbuf.new_from_stream_at_scale(
          file.read(null),
          32,
          32,
          true,
          null,
        )

        fileImage.set_from_pixbuf(pixbuf)
        fileChooser.set_file(file)
        fileChooserButton.set_label(newIconPath)
      } else {
        newIconPath = ''
        fileImage.set_from_icon_name('view-app-grid-symbolic')
        let picturesFolder = Gio.File.new_for_path(
          GLib.get_user_special_dir(GLib.UserDirectory.DIRECTORY_PICTURES),
        )
        fileChooser.set_file(picturesFolder)
        fileChooserButton.set_label('(None)')
      }

      this._settings.set_string('show-apps-icon-file', newIconPath || '')
    }

    fileChooserButton.connect('clicked', () => {
      fileChooser.show()
    })

    fileChooser.connect('response', (widget) =>
      handleIconChange.call(this, widget.get_file().get_path()),
    )
    handleIconChange.call(
      this,
      this._settings.get_string('show-apps-icon-file'),
    )

    // we have to destroy the fileChooser as well
    dialog.connect('response', (dialog, id) => {
      if (id != 1) {
        fileChooser.destroy()
      }
      return
    })

    dialog.show()
    dialog.set_default_size(1, 1)
  }

  _showDesktopButtonOptions() {
    let box = this._builder.get_object('box_show_showdesktop_options')

    let dialog = this._createPreferencesDialog(
      _('Show Desktop options'),
      box,
      () => {
        // restore default settings
        this._settings.set_value(
          'showdesktop-button-width',
          this._settings.get_default_value('showdesktop-button-width'),
        )
        this._builder
          .get_object('show_showdesktop_width_spinbutton')
          .set_value(this._settings.get_int('showdesktop-button-width'))

        this._settings.set_value(
          'desktop-line-use-custom-color',
          this._settings.get_default_value('desktop-line-use-custom-color'),
        )

        this._settings.set_value(
          'show-showdesktop-hover',
          this._settings.get_default_value('show-showdesktop-hover'),
        )

        this._settings.set_value(
          'show-showdesktop-delay',
          this._settings.get_default_value('show-showdesktop-delay'),
        )
        this._builder
          .get_object('show_showdesktop_delay_spinbutton')
          .set_value(this._settings.get_int('show-showdesktop-delay'))

        this._settings.set_value(
          'show-showdesktop-time',
          this._settings.get_default_value('show-showdesktop-time'),
        )
        this._builder
          .get_object('show_showdesktop_time_spinbutton')
          .set_value(this._settings.get_int('show-showdesktop-time'))
      },
    )

    this._builder
      .get_object('show_showdesktop_width_spinbutton')
      .set_value(this._settings.get_int('showdesktop-button-width'))
    this._builder
      .get_object('show_showdesktop_width_spinbutton')
      .connect('value-changed', (widget) => {
        this._settings.set_int('showdesktop-button-width', widget.get_value())
      })

    this._builder
      .get_object('show_showdesktop_delay_spinbutton')
      .set_value(this._settings.get_int('show-showdesktop-delay'))
    this._builder
      .get_object('show_showdesktop_delay_spinbutton')
      .connect('value-changed', (widget) => {
        this._settings.set_int('show-showdesktop-delay', widget.get_value())
      })

    this._builder
      .get_object('show_showdesktop_time_spinbutton')
      .set_value(this._settings.get_int('show-showdesktop-time'))
    this._builder
      .get_object('show_showdesktop_time_spinbutton')
      .connect('value-changed', (widget) => {
        this._settings.set_int('show-showdesktop-time', widget.get_value())
      })

    dialog.show()
    dialog.set_default_size(1, 1)
  }

  _addFormatValueCallbacks() {
    // position
    this._builder
      .get_object('panel_size_scale')
      .set_format_value_func((scale, value) => {
        return value + ' px'
      })

    // style
    this._builder
      .get_object('appicon_margin_scale')
      .set_format_value_func((scale, value) => {
        return value + ' px'
      })
    this._builder
      .get_object('appicon_margin_todesktop_scale')
      .set_format_value_func((scale, value) => {
        return value + ' px'
      })
    this._builder
      .get_object('appicon_margin_toscreenborder_scale')
      .set_format_value_func((scale, value) => {
        return value + ' px'
      })

    this._builder
      .get_object('appicon_padding_scale')
      .set_format_value_func((scale, value) => {
        return value + ' px'
      })

    // fine-tune box1
    this._builder
      .get_object('tray_size_scale')
      .set_format_value_func((scale, value) => {
        return value + ' px'
      })

    this._builder
      .get_object('leftbox_size_scale')
      .set_format_value_func((scale, value) => {
        return value + ' px'
      })

    // fine-tune box2
    this._builder
      .get_object('tray_padding_scale')
      .set_format_value_func((scale, value) => {
        return value + ' px'
      })

    this._builder
      .get_object('statusicon_padding_scale')
      .set_format_value_func((scale, value) => {
        return value + ' px'
      })

    this._builder
      .get_object('leftbox_padding_scale')
      .set_format_value_func((scale, value) => {
        return value + ' px'
      })

    // animate hovering app icons dialog
    this._builder
      .get_object('animate_appicon_hover_options_duration_scale')
      .set_format_value_func((scale, value) => {
        return _('%d ms').format(value)
      })

    this._builder
      .get_object('animate_appicon_hover_options_rotation_scale')
      .set_format_value_func((scale, value) => {
        return _('%d °').format(value)
      })

    this._builder
      .get_object('animate_appicon_hover_options_travel_scale')
      .set_format_value_func((scale, value) => {
        return _('%d %%').format(value)
      })

    this._builder
      .get_object('animate_appicon_hover_options_zoom_scale')
      .set_format_value_func((scale, value) => {
        return _('%d %%').format(value)
      })

    this._builder
      .get_object('animate_appicon_hover_options_convexity_scale')
      .set_format_value_func((scale, value) => {
        return _('%.1f').format(value)
      })

    this._builder
      .get_object('animate_appicon_hover_options_extent_scale')
      .set_format_value_func((scale, value) => {
        return ngettext('%d icon', '%d icons', value).format(value)
      })

    // highlight appicon on hover dialog
    this._builder
      .get_object('highlight_appicon_borderradius')
      .set_format_value_func((scale, value) => {
        return value + ' px'
      })
  }

  _bindSettings() {
    // size options
    let panel_size_scale = this._builder.get_object('panel_size_scale')
    panel_size_scale.set_range(
      DEFAULT_PANEL_SIZES[DEFAULT_PANEL_SIZES.length - 1],
      DEFAULT_PANEL_SIZES[0],
    )
    DEFAULT_PANEL_SIZES.slice(1, -1).forEach(function (val) {
      panel_size_scale.add_mark(val, Gtk.PositionType.TOP, val.toString())
    })

    // Correct for rtl languages
    if (this._rtl) {
      // Flip value position: this is not done automatically
      panel_size_scale.set_value_pos(Gtk.PositionType.LEFT)
      // I suppose due to a bug, having a more than one mark and one above a value of 100
      // makes the rendering of the marks wrong in rtl. This doesn't happen setting the scale as not flippable
      // and then manually inverting it
      panel_size_scale.set_flippable(false)
      panel_size_scale.set_inverted(true)
    }

    // App icon style option
    this._builder
      .get_object('appicon_style_combo')
      .set_active_id(this._settings.get_string('appicon-style'))
    this._builder
      .get_object('appicon_style_combo')
      .connect('changed', (widget) => {
        this._settings.set_string('appicon-style', widget.get_active_id())
      })

    // Dots Position option
    let dotPosition = this._settings.get_string('dot-position')

    switch (dotPosition) {
      case 'BOTTOM':
        this._builder.get_object('dots_bottom_button').set_active(true)
        break
      case 'TOP':
        this._builder.get_object('dots_top_button').set_active(true)
        break
      case 'LEFT':
        this._builder.get_object('dots_left_button').set_active(true)
        break
      case 'RIGHT':
        this._builder.get_object('dots_right_button').set_active(true)
        break
    }

    this._builder
      .get_object('dot_style_focused_combo')
      .set_active_id(this._settings.get_string('dot-style-focused'))
    this._builder
      .get_object('dot_style_focused_combo')
      .connect('changed', (widget) => {
        this._settings.set_string('dot-style-focused', widget.get_active_id())
      })

    this._builder
      .get_object('dot_style_unfocused_combo')
      .set_active_id(this._settings.get_string('dot-style-unfocused'))
    this._builder
      .get_object('dot_style_unfocused_combo')
      .connect('changed', (widget) => {
        this._settings.set_string('dot-style-unfocused', widget.get_active_id())
      })

    for (let i = 1; i <= MAX_WINDOW_INDICATOR; i++) {
      let idx = i
      this._builder
        .get_object('dot_color_' + idx + '_colorbutton')
        .connect('color-set', (button) => {
          let rgba = button.get_rgba()
          let css = rgba.to_string()
          let hexString = cssHexString(css)
          this._settings.set_string('dot-color-' + idx, hexString)
        })

      this._builder
        .get_object('dot_color_unfocused_' + idx + '_colorbutton')
        .connect('color-set', (button) => {
          let rgba = button.get_rgba()
          let css = rgba.to_string()
          let hexString = cssHexString(css)
          this._settings.set_string('dot-color-unfocused-' + idx, hexString)
        })
    }

    this._builder
      .get_object('dot_color_apply_all_button')
      .connect('clicked', () => {
        for (let i = 2; i <= MAX_WINDOW_INDICATOR; i++) {
          this._settings.set_value(
            'dot-color-' + i,
            this._settings.get_value('dot-color-1'),
          )
          let rgba = new Gdk.RGBA()
          rgba.parse(this._settings.get_string('dot-color-' + i))
          this._builder
            .get_object('dot_color_' + i + '_colorbutton')
            .set_rgba(rgba)
        }
      })

    this._builder
      .get_object('dot_color_unfocused_apply_all_button')
      .connect('clicked', () => {
        for (let i = 2; i <= MAX_WINDOW_INDICATOR; i++) {
          this._settings.set_value(
            'dot-color-unfocused-' + i,
            this._settings.get_value('dot-color-unfocused-1'),
          )
          let rgba = new Gdk.RGBA()
          rgba.parse(this._settings.get_string('dot-color-unfocused-' + i))
          this._builder
            .get_object('dot_color_unfocused_' + i + '_colorbutton')
            .set_rgba(rgba)
        }
      })

    this._builder
      .get_object('focus_highlight_color_colorbutton')
      .connect('color-set', (button) => {
        let rgba = button.get_rgba()
        let css = rgba.to_string()
        let hexString = cssHexString(css)
        this._settings.set_string('focus-highlight-color', hexString)
      })

    this._builder
      .get_object('dot_style_options_button')
      .connect('clicked', () => {
        let box = this._builder.get_object('box_dots_options')

        let dialog = this._createPreferencesDialog(
          _('Running Indicator Options'),
          box,
          () => {
            // restore default settings
            this._settings.set_value(
              'dot-color-dominant',
              this._settings.get_default_value('dot-color-dominant'),
            )
            this._settings.set_value(
              'dot-color-override',
              this._settings.get_default_value('dot-color-override'),
            )
            this._settings.set_value(
              'dot-color-unfocused-different',
              this._settings.get_default_value('dot-color-unfocused-different'),
            )

            this._settings.set_value(
              'focus-highlight-color',
              this._settings.get_default_value('focus-highlight-color'),
            )
            let rgba = new Gdk.RGBA()
            rgba.parse(this._settings.get_string('focus-highlight-color'))
            this._builder
              .get_object('focus_highlight_color_colorbutton')
              .set_rgba(rgba)

            this._settings.set_value(
              'focus-highlight-opacity',
              this._settings.get_default_value('focus-highlight-opacity'),
            )
            this._builder
              .get_object('focus_highlight_opacity_spinbutton')
              .set_value(this._settings.get_int('focus-highlight-opacity'))

            for (let i = 1; i <= MAX_WINDOW_INDICATOR; i++) {
              this._settings.set_value(
                'dot-color-' + i,
                this._settings.get_default_value('dot-color-' + i),
              )
              rgba = new Gdk.RGBA()
              rgba.parse(this._settings.get_string('dot-color-' + i))
              this._builder
                .get_object('dot_color_' + i + '_colorbutton')
                .set_rgba(rgba)

              this._settings.set_value(
                'dot-color-unfocused-' + i,
                this._settings.get_default_value('dot-color-unfocused-' + i),
              )
              rgba = new Gdk.RGBA()
              rgba.parse(this._settings.get_string('dot-color-unfocused-' + i))
              this._builder
                .get_object('dot_color_unfocused_' + i + '_colorbutton')
                .set_rgba(rgba)
            }

            this._settings.set_value(
              'dot-size',
              this._settings.get_default_value('dot-size'),
            )
            this._builder
              .get_object('dot_size_spinbutton')
              .set_value(this._settings.get_int('dot-size'))

            this._settings.set_value(
              'focus-highlight',
              this._settings.get_default_value('focus-highlight'),
            )
            this._settings.set_value(
              'focus-highlight-dominant',
              this._settings.get_default_value('focus-highlight-dominant'),
            )
          },
        )

        this._settings.bind(
          'dot-color-dominant',
          this._builder.get_object('dot_color_dominant_switch'),
          'active',
          Gio.SettingsBindFlags.DEFAULT,
        )

        this._settings.bind(
          'dot-color-override',
          this._builder.get_object('dot_color_override_switch'),
          'active',
          Gio.SettingsBindFlags.DEFAULT,
        )

        // when either becomes active, turn the other off
        this._builder
          .get_object('dot_color_dominant_switch')
          .connect('state-set', (widget) => {
            if (widget.get_active())
              this._settings.set_boolean('dot-color-override', false)
          })
        this._builder
          .get_object('dot_color_override_switch')
          .connect('state-set', (widget) => {
            if (widget.get_active())
              this._settings.set_boolean('dot-color-dominant', false)
            else
              this._settings.set_boolean('dot-color-unfocused-different', false)
          })

        this._settings.bind(
          'dot-color-unfocused-different',
          this._builder.get_object('dot_color_unfocused_different_switch'),
          'active',
          Gio.SettingsBindFlags.DEFAULT,
        )

        this._settings.bind(
          'dot-color-override',
          this._builder.get_object('grid_dot_color'),
          'sensitive',
          Gio.SettingsBindFlags.DEFAULT,
        )

        this._settings.bind(
          'dot-color-override',
          this._builder.get_object('dot_color_unfocused_box'),
          'sensitive',
          Gio.SettingsBindFlags.DEFAULT,
        )

        this._settings.bind(
          'dot-color-unfocused-different',
          this._builder.get_object('grid_dot_color_unfocused'),
          'sensitive',
          Gio.SettingsBindFlags.DEFAULT,
        )

        for (let i = 1; i <= MAX_WINDOW_INDICATOR; i++) {
          let rgba = new Gdk.RGBA()
          rgba.parse(this._settings.get_string('dot-color-' + i))
          this._builder
            .get_object('dot_color_' + i + '_colorbutton')
            .set_rgba(rgba)

          rgba = new Gdk.RGBA()
          rgba.parse(this._settings.get_string('dot-color-unfocused-' + i))
          this._builder
            .get_object('dot_color_unfocused_' + i + '_colorbutton')
            .set_rgba(rgba)
        }

        this._settings.bind(
          'focus-highlight',
          this._builder.get_object('focus_highlight_switch'),
          'active',
          Gio.SettingsBindFlags.DEFAULT,
        )

        this._settings.bind(
          'focus-highlight',
          this._builder.get_object('grid_focus_highlight_options'),
          'sensitive',
          Gio.SettingsBindFlags.DEFAULT,
        )

        this._settings.bind(
          'focus-highlight-dominant',
          this._builder.get_object('focus_highlight_dominant_switch'),
          'active',
          Gio.SettingsBindFlags.DEFAULT,
        )

        this._settings.bind(
          'focus-highlight-dominant',
          this._builder.get_object('focus_highlight_color_label'),
          'sensitive',
          Gio.SettingsBindFlags.INVERT_BOOLEAN,
        )

        this._settings.bind(
          'focus-highlight-dominant',
          this._builder.get_object('focus_highlight_color_colorbutton'),
          'sensitive',
          Gio.SettingsBindFlags.INVERT_BOOLEAN,
        )
        ;(function () {
          let rgba = new Gdk.RGBA()
          rgba.parse(this._settings.get_string('focus-highlight-color'))
          this._builder
            .get_object('focus_highlight_color_colorbutton')
            .set_rgba(rgba)
        }).apply(this)

        this._builder
          .get_object('focus_highlight_opacity_spinbutton')
          .set_value(this._settings.get_int('focus-highlight-opacity'))
        this._builder
          .get_object('focus_highlight_opacity_spinbutton')
          .connect('value-changed', (widget) => {
            this._settings.set_int(
              'focus-highlight-opacity',
              widget.get_value(),
            )
          })

        this._builder
          .get_object('dot_size_spinbutton')
          .set_value(this._settings.get_int('dot-size'))
        this._builder
          .get_object('dot_size_spinbutton')
          .connect('value-changed', (widget) => {
            this._settings.set_int('dot-size', widget.get_value())
          })

        dialog.show()
        dialog.set_default_size(1, 1)
      })

    //multi-monitor
    this.monitors = this._settings.get_value('available-monitors').deep_unpack()

    let dtpPrimaryMonitorIndex = this.monitors.indexOf(
      this._settings.get_int('primary-monitor'),
    )

    if (dtpPrimaryMonitorIndex < 0) {
      dtpPrimaryMonitorIndex = 0
    }

    this._currentMonitorIndex = this.monitors[dtpPrimaryMonitorIndex]

    this._settings.connect('changed::panel-positions', () =>
      this._updateVerticalRelatedOptions(),
    )
    this._updateVerticalRelatedOptions()

    for (let i = 0; i < this.monitors.length; ++i) {
      //the gnome-shell primary index is the first one in the "available-monitors" setting
      let label = !i ? _('Primary monitor') : _('Monitor ') + (i + 1)

      this._builder.get_object('multimon_primary_combo').append_text(label)
      this._builder
        .get_object('taskbar_position_monitor_combo')
        .append_text(label)
    }

    this._builder
      .get_object('multimon_primary_combo')
      .set_active(dtpPrimaryMonitorIndex)
    this._builder
      .get_object('taskbar_position_monitor_combo')
      .set_active(dtpPrimaryMonitorIndex)

    this._settings.bind(
      'panel-element-positions-monitors-sync',
      this._builder.get_object('taskbar_position_sync_button'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'panel-element-positions-monitors-sync',
      this._builder.get_object('taskbar_position_monitor_combo'),
      'sensitive',
      Gio.SettingsBindFlags.INVERT_BOOLEAN,
    )

    this._settings.connect(
      'changed::panel-element-positions-monitors-sync',
      () => {
        this._maybeDisableTopPosition()
        // The anchor combo box may has different labels for single- or all-monitor configuration.
        this._setAnchorLabels(this._currentMonitorIndex)
      },
    )

    this._builder
      .get_object('multimon_primary_combo')
      .connect('changed', (widget) => {
        this._settings.set_int(
          'primary-monitor',
          this.monitors[widget.get_active()],
        )
      })

    this._builder
      .get_object('taskbar_position_monitor_combo')
      .connect('changed', (widget) => {
        this._currentMonitorIndex = this.monitors[widget.get_active()]
        this._updateWidgetSettingsForMonitor(this._currentMonitorIndex)
      })

    this._settings.bind(
      'multi-monitors',
      this._builder.get_object('multimon_multi_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    if (this.monitors.length === 1) {
      this._builder.get_object('multimon_multi_switch').set_sensitive(false)
    }

    const panel_length_scale = this._builder.get_object('panel_length_scale')
    panel_length_scale.connect('value-changed', (widget) => {
      const value = widget.get_value()
      const monitorSync = this._settings.get_boolean(
        'panel-element-positions-monitors-sync',
      )
      const monitorsToSetFor = monitorSync
        ? this.monitors
        : [this._currentMonitorIndex]
      monitorsToSetFor.forEach((monitorIndex) => {
        PanelSettings.setPanelLength(this._settings, monitorIndex, value)
      })

      this._setAnchorWidgetSensitivity(value)
    })

    this._builder
      .get_object('panel_anchor_combo')
      .connect('changed', (widget) => {
        const value = widget.get_active_id()
        // Value can be null while anchor labels are being swapped out
        if (value !== null) {
          const monitorSync = this._settings.get_boolean(
            'panel-element-positions-monitors-sync',
          )
          const monitorsToSetFor = monitorSync
            ? this.monitors
            : [this._currentMonitorIndex]
          monitorsToSetFor.forEach((monitorIndex) => {
            PanelSettings.setPanelAnchor(this._settings, monitorIndex, value)
          })
        }
      })

    this._updateWidgetSettingsForMonitor(this._currentMonitorIndex)

    //dynamic opacity
    this._settings.bind(
      'trans-use-custom-bg',
      this._builder.get_object('trans_bg_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'trans-use-custom-bg',
      this._builder.get_object('trans_bg_color_colorbutton'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    let rgba = new Gdk.RGBA()
    rgba.parse(this._settings.get_string('trans-bg-color'))
    this._builder.get_object('trans_bg_color_colorbutton').set_rgba(rgba)

    this._builder
      .get_object('trans_bg_color_colorbutton')
      .connect('color-set', (button) => {
        let rgba = button.get_rgba()
        let css = rgba.to_string()
        let hexString = cssHexString(css)
        this._settings.set_string('trans-bg-color', hexString)
      })

    this._settings.bind(
      'trans-use-custom-opacity',
      this._builder.get_object('trans_opacity_override_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'trans-use-custom-opacity',
      this._builder.get_object('trans_opacity_box'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'trans-use-custom-opacity',
      this._builder.get_object('trans_opacity_box2'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._builder
      .get_object('trans_opacity_override_switch')
      .connect('notify::active', (widget) => {
        if (!widget.get_active())
          this._builder.get_object('trans_dyn_switch').set_active(false)
      })

    this._builder
      .get_object('trans_opacity_spinbutton')
      .set_value(this._settings.get_double('trans-panel-opacity') * 100)
    this._builder
      .get_object('trans_opacity_spinbutton')
      .connect('value-changed', (widget) => {
        this._settings.set_double(
          'trans-panel-opacity',
          widget.get_value() * 0.01,
        )
      })

    this._settings.bind(
      'trans-use-dynamic-opacity',
      this._builder.get_object('trans_dyn_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'trans-use-dynamic-opacity',
      this._builder.get_object('trans_dyn_options_button'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'trans-dynamic-behavior',
      this._builder.get_object('trans_options_window_type_combo'),
      'active-id',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'trans-use-custom-gradient',
      this._builder.get_object('trans_gradient_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'trans-use-custom-gradient',
      this._builder.get_object('trans_gradient_box'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'trans-use-custom-gradient',
      this._builder.get_object('trans_gradient_box2'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    rgba.parse(this._settings.get_string('trans-gradient-top-color'))
    this._builder.get_object('trans_gradient_color1_colorbutton').set_rgba(rgba)

    this._builder
      .get_object('trans_gradient_color1_colorbutton')
      .connect('color-set', (button) => {
        let rgba = button.get_rgba()
        let css = rgba.to_string()
        let hexString = cssHexString(css)
        this._settings.set_string('trans-gradient-top-color', hexString)
      })

    this._builder
      .get_object('trans_gradient_color1_spinbutton')
      .set_value(this._settings.get_double('trans-gradient-top-opacity') * 100)
    this._builder
      .get_object('trans_gradient_color1_spinbutton')
      .connect('value-changed', (widget) => {
        this._settings.set_double(
          'trans-gradient-top-opacity',
          widget.get_value() * 0.01,
        )
      })

    rgba.parse(this._settings.get_string('trans-gradient-bottom-color'))
    this._builder.get_object('trans_gradient_color2_colorbutton').set_rgba(rgba)

    this._builder
      .get_object('trans_gradient_color2_colorbutton')
      .connect('color-set', (button) => {
        let rgba = button.get_rgba()
        let css = rgba.to_string()
        let hexString = cssHexString(css)
        this._settings.set_string('trans-gradient-bottom-color', hexString)
      })

    this._builder
      .get_object('trans_gradient_color2_spinbutton')
      .set_value(
        this._settings.get_double('trans-gradient-bottom-opacity') * 100,
      )
    this._builder
      .get_object('trans_gradient_color2_spinbutton')
      .connect('value-changed', (widget) => {
        this._settings.set_double(
          'trans-gradient-bottom-opacity',
          widget.get_value() * 0.01,
        )
      })

    this._builder
      .get_object('trans_options_distance_spinbutton')
      .set_value(this._settings.get_int('trans-dynamic-distance'))
    this._builder
      .get_object('trans_options_distance_spinbutton')
      .connect('value-changed', (widget) => {
        this._settings.set_int('trans-dynamic-distance', widget.get_value())
      })

    this._builder
      .get_object('trans_options_min_opacity_spinbutton')
      .set_value(this._settings.get_double('trans-dynamic-anim-target') * 100)
    this._builder
      .get_object('trans_options_min_opacity_spinbutton')
      .connect('value-changed', (widget) => {
        this._settings.set_double(
          'trans-dynamic-anim-target',
          widget.get_value() * 0.01,
        )
      })

    this._builder
      .get_object('trans_options_anim_time_spinbutton')
      .set_value(this._settings.get_int('trans-dynamic-anim-time'))
    this._builder
      .get_object('trans_options_anim_time_spinbutton')
      .connect('value-changed', (widget) => {
        this._settings.set_int('trans-dynamic-anim-time', widget.get_value())
      })

    this._builder
      .get_object('trans_dyn_options_button')
      .connect('clicked', () => {
        let box = this._builder.get_object('box_dynamic_opacity_options')

        let dialog = this._createPreferencesDialog(
          _('Dynamic opacity options'),
          box,
          () => {
            // restore default settings
            this._settings.set_value(
              'trans-dynamic-behavior',
              this._settings.get_default_value('trans-dynamic-behavior'),
            )

            this._settings.set_value(
              'trans-dynamic-distance',
              this._settings.get_default_value('trans-dynamic-distance'),
            )
            this._builder
              .get_object('trans_options_distance_spinbutton')
              .set_value(this._settings.get_int('trans-dynamic-distance'))

            this._settings.set_value(
              'trans-dynamic-anim-target',
              this._settings.get_default_value('trans-dynamic-anim-target'),
            )
            this._builder
              .get_object('trans_options_min_opacity_spinbutton')
              .set_value(
                this._settings.get_double('trans-dynamic-anim-target') * 100,
              )

            this._settings.set_value(
              'trans-dynamic-anim-time',
              this._settings.get_default_value('trans-dynamic-anim-time'),
            )
            this._builder
              .get_object('trans_options_anim_time_spinbutton')
              .set_value(this._settings.get_int('trans-dynamic-anim-time'))
          },
        )

        dialog.show()
        dialog.set_default_size(1, 1)
      })

    this._settings.bind(
      'desktop-line-use-custom-color',
      this._builder.get_object('override_show_desktop_line_color_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'desktop-line-use-custom-color',
      this._builder.get_object('override_show_desktop_line_color_colorbutton'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    rgba.parse(this._settings.get_string('desktop-line-custom-color'))
    this._builder
      .get_object('override_show_desktop_line_color_colorbutton')
      .set_rgba(rgba)
    this._builder
      .get_object('override_show_desktop_line_color_colorbutton')
      .connect('color-set', (button) => {
        let rgba = button.get_rgba()
        let css = rgba.to_string()
        this._settings.set_string('desktop-line-custom-color', css)
      })

    this._settings.bind(
      'intellihide',
      this._builder.get_object('intellihide_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'intellihide',
      this._builder.get_object('intellihide_options_button'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'intellihide-hide-from-windows',
      this._builder.get_object('intellihide_window_hide_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'intellihide-hide-from-windows',
      this._builder.get_object('intellihide_behaviour_options'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'intellihide-behaviour',
      this._builder.get_object('intellihide_behaviour_combo'),
      'active-id',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'intellihide-use-pressure',
      this._builder.get_object('intellihide_use_pressure_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'intellihide-use-pressure',
      this._builder.get_object('intellihide_use_pressure_options'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'intellihide-use-pressure',
      this._builder.get_object('intellihide_use_pressure_options2'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'intellihide-show-in-fullscreen',
      this._builder.get_object('intellihide_show_in_fullscreen_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'intellihide-only-secondary',
      this._builder.get_object('intellihide_only_secondary_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'multi-monitors',
      this._builder.get_object('grid_intellihide_only_secondary'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._builder
      .get_object('multimon_multi_switch')
      .connect('notify::active', (widget) => {
        if (!widget.get_active())
          this._builder
            .get_object('intellihide_only_secondary_switch')
            .set_active(false)
      })

    this._builder
      .get_object('intellihide_pressure_threshold_spinbutton')
      .set_value(this._settings.get_int('intellihide-pressure-threshold'))
    this._builder
      .get_object('intellihide_pressure_threshold_spinbutton')
      .connect('value-changed', (widget) => {
        this._settings.set_int(
          'intellihide-pressure-threshold',
          widget.get_value(),
        )
      })

    this._builder
      .get_object('intellihide_pressure_time_spinbutton')
      .set_value(this._settings.get_int('intellihide-pressure-time'))
    this._builder
      .get_object('intellihide_pressure_time_spinbutton')
      .connect('value-changed', (widget) => {
        this._settings.set_int('intellihide-pressure-time', widget.get_value())
      })

    this._settings.bind(
      'intellihide-key-toggle-text',
      this._builder.get_object('intellihide_toggle_entry'),
      'text',
      Gio.SettingsBindFlags.DEFAULT,
    )
    this._settings.connect('changed::intellihide-key-toggle-text', () =>
      setShortcut(this._settings, 'intellihide-key-toggle'),
    )

    this._builder
      .get_object('intellihide_animation_time_spinbutton')
      .set_value(this._settings.get_int('intellihide-animation-time'))
    this._builder
      .get_object('intellihide_animation_time_spinbutton')
      .connect('value-changed', (widget) => {
        this._settings.set_int('intellihide-animation-time', widget.get_value())
      })

    this._builder
      .get_object('intellihide_close_delay_spinbutton')
      .set_value(this._settings.get_int('intellihide-close-delay'))
    this._builder
      .get_object('intellihide_close_delay_spinbutton')
      .connect('value-changed', (widget) => {
        this._settings.set_int('intellihide-close-delay', widget.get_value())
      })

    this._builder
      .get_object('intellihide_enable_start_delay_spinbutton')
      .set_value(this._settings.get_int('intellihide-enable-start-delay'))
    this._builder
      .get_object('intellihide_enable_start_delay_spinbutton')
      .connect('value-changed', (widget) => {
        this._settings.set_int(
          'intellihide-enable-start-delay',
          widget.get_value(),
        )
      })

    this._builder
      .get_object('intellihide_options_button')
      .connect('clicked', () => {
        let box = this._builder.get_object('box_intellihide_options')

        let dialog = this._createPreferencesDialog(
          _('Intellihide options'),
          box,
          () => {
            // restore default settings
            this._settings.set_value(
              'intellihide-hide-from-windows',
              this._settings.get_default_value('intellihide-hide-from-windows'),
            )
            this._settings.set_value(
              'intellihide-behaviour',
              this._settings.get_default_value('intellihide-behaviour'),
            )
            this._settings.set_value(
              'intellihide-use-pressure',
              this._settings.get_default_value('intellihide-use-pressure'),
            )
            this._settings.set_value(
              'intellihide-show-in-fullscreen',
              this._settings.get_default_value(
                'intellihide-show-in-fullscreen',
              ),
            )
            this._settings.set_value(
              'intellihide-only-secondary',
              this._settings.get_default_value('intellihide-only-secondary'),
            )

            this._settings.set_value(
              'intellihide-pressure-threshold',
              this._settings.get_default_value(
                'intellihide-pressure-threshold',
              ),
            )
            this._builder
              .get_object('intellihide_pressure_threshold_spinbutton')
              .set_value(
                this._settings.get_int('intellihide-pressure-threshold'),
              )

            this._settings.set_value(
              'intellihide-pressure-time',
              this._settings.get_default_value('intellihide-pressure-time'),
            )
            this._builder
              .get_object('intellihide_pressure_time_spinbutton')
              .set_value(this._settings.get_int('intellihide-pressure-time'))

            this._settings.set_value(
              'intellihide-key-toggle-text',
              this._settings.get_default_value('intellihide-key-toggle-text'),
            )

            this._settings.set_value(
              'intellihide-animation-time',
              this._settings.get_default_value('intellihide-animation-time'),
            )
            this._builder
              .get_object('intellihide_animation_time_spinbutton')
              .set_value(this._settings.get_int('intellihide-animation-time'))

            this._settings.set_value(
              'intellihide-close-delay',
              this._settings.get_default_value('intellihide-close-delay'),
            )
            this._builder
              .get_object('intellihide_close_delay_spinbutton')
              .set_value(this._settings.get_int('intellihide-close-delay'))

            this._settings.set_value(
              'intellihide-enable-start-delay',
              this._settings.get_default_value(
                'intellihide-enable-start-delay',
              ),
            )
            this._builder
              .get_object('intellihide_enable_start_delay_spinbutton')
              .set_value(
                this._settings.get_int('intellihide-enable-start-delay'),
              )
          },
        )

        dialog.show()
        dialog.set_default_size(1, 1)
      })

    // Behavior panel

    this._builder
      .get_object('show_applications_side_padding_spinbutton')
      .set_value(this._settings.get_int('show-apps-icon-side-padding'))
    this._builder
      .get_object('show_applications_side_padding_spinbutton')
      .connect('value-changed', (widget) => {
        this._settings.set_int(
          'show-apps-icon-side-padding',
          widget.get_value(),
        )
      })

    this._settings.bind(
      'show-apps-override-escape',
      this._builder.get_object('show_applications_esc_key_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'show-showdesktop-hover',
      this._builder.get_object('show_showdesktop_hide_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'show-showdesktop-hover',
      this._builder.get_object('grid_show_showdesktop_hide_options'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'show-showdesktop-hover',
      this._builder.get_object('grid_show_showdesktop_hide_options2'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'show-window-previews',
      this._builder.get_object('show_window_previews_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'show-window-previews',
      this._builder.get_object('show_window_previews_button'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'show-tooltip',
      this._builder.get_object('show_tooltip_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'show-favorites',
      this._builder.get_object('show_favorite_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'show-favorites-all-monitors',
      this._builder.get_object('multimon_multi_show_favorites_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'show-favorites',
      this._builder.get_object('multimon_multi_show_favorites_switch'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'show-running-apps',
      this._builder.get_object('show_runnning_apps_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._setPreviewTitlePosition()

    this._builder
      .get_object('grid_preview_title_font_color_colorbutton')
      .connect('color-set', (button) => {
        let rgba = button.get_rgba()
        let css = rgba.to_string()
        let hexString = cssHexString(css)
        this._settings.set_string('window-preview-title-font-color', hexString)
      })

    this._builder
      .get_object('show_window_previews_button')
      .connect('clicked', () => {
        let scrolledWindow = this._builder.get_object(
          'box_window_preview_options',
        )

        let dialog = this._createPreferencesDialog(
          _('Window preview options'),
          scrolledWindow,
          () => {
            // restore default settings
            this._settings.set_value(
              'show-window-previews-timeout',
              this._settings.get_default_value('show-window-previews-timeout'),
            )
            this._builder
              .get_object('preview_timeout_spinbutton')
              .set_value(this._settings.get_int('show-window-previews-timeout'))

            this._settings.set_value(
              'leave-timeout',
              this._settings.get_default_value('leave-timeout'),
            )
            this._builder
              .get_object('leave_timeout_spinbutton')
              .set_value(this._settings.get_int('leave-timeout'))

            this._settings.set_value(
              'window-preview-hide-immediate-click',
              this._settings.get_default_value(
                'window-preview-hide-immediate-click',
              ),
            )

            this._settings.set_value(
              'window-preview-animation-time',
              this._settings.get_default_value('window-preview-animation-time'),
            )
            this._builder
              .get_object('animation_time_spinbutton')
              .set_value(
                this._settings.get_int('window-preview-animation-time'),
              )

            this._settings.set_value(
              'preview-use-custom-opacity',
              this._settings.get_default_value('preview-use-custom-opacity'),
            )

            this._settings.set_value(
              'window-preview-use-custom-icon-size',
              this._settings.get_default_value(
                'window-preview-use-custom-icon-size',
              ),
            )

            this._settings.set_value(
              'preview-custom-opacity',
              this._settings.get_default_value('preview-custom-opacity'),
            )
            this._builder
              .get_object('preview_custom_opacity_spinbutton')
              .set_value(this._settings.get_int('preview-custom-opacity'))

            this._settings.set_value(
              'window-preview-title-position',
              this._settings.get_default_value('window-preview-title-position'),
            )
            this._setPreviewTitlePosition()

            this._settings.set_value(
              'peek-mode',
              this._settings.get_default_value('peek-mode'),
            )
            this._settings.set_value(
              'window-preview-show-title',
              this._settings.get_default_value('window-preview-show-title'),
            )
            this._settings.set_value(
              'enter-peek-mode-timeout',
              this._settings.get_default_value('enter-peek-mode-timeout'),
            )
            this._builder
              .get_object('enter_peek_mode_timeout_spinbutton')
              .set_value(this._settings.get_int('enter-peek-mode-timeout'))
            this._settings.set_value(
              'peek-mode-opacity',
              this._settings.get_default_value('peek-mode-opacity'),
            )
            this._builder
              .get_object('peek_mode_opacity_spinbutton')
              .set_value(this._settings.get_int('peek-mode-opacity'))

            this._settings.set_value(
              'window-preview-size',
              this._settings.get_default_value('window-preview-size'),
            )
            this._builder
              .get_object('preview_size_spinbutton')
              .set_value(this._settings.get_int('window-preview-size'))

            this._settings.set_value(
              'window-preview-fixed-x',
              this._settings.get_default_value('window-preview-fixed-x'),
            )
            this._settings.set_value(
              'window-preview-fixed-y',
              this._settings.get_default_value('window-preview-fixed-y'),
            )

            this._settings.set_value(
              'window-preview-aspect-ratio-x',
              this._settings.get_default_value('window-preview-aspect-ratio-x'),
            )
            this._builder
              .get_object('preview_aspect_ratio_x_combo')
              .set_active_id(
                this._settings
                  .get_int('window-preview-aspect-ratio-x')
                  .toString(),
              )

            this._settings.set_value(
              'window-preview-aspect-ratio-y',
              this._settings.get_default_value('window-preview-aspect-ratio-y'),
            )
            this._builder
              .get_object('preview_aspect_ratio_y_combo')
              .set_active_id(
                this._settings
                  .get_int('window-preview-aspect-ratio-y')
                  .toString(),
              )

            this._settings.set_value(
              'window-preview-padding',
              this._settings.get_default_value('window-preview-padding'),
            )
            this._builder
              .get_object('preview_padding_spinbutton')
              .set_value(this._settings.get_int('window-preview-padding'))

            this._settings.set_value(
              'preview-middle-click-close',
              this._settings.get_default_value('preview-middle-click-close'),
            )

            this._settings.set_value(
              'window-preview-title-font-size',
              this._settings.get_default_value(
                'window-preview-title-font-size',
              ),
            )
            this._builder
              .get_object('preview_title_size_spinbutton')
              .set_value(
                this._settings.get_int('window-preview-title-font-size'),
              )

            this._settings.set_value(
              'window-preview-custom-icon-size',
              this._settings.get_default_value(
                'window-preview-custom-icon-size',
              ),
            )
            this._builder
              .get_object('preview_custom_icon_size_spinbutton')
              .set_value(
                this._settings.get_int('window-preview-custom-icon-size'),
              )

            this._settings.set_value(
              'window-preview-title-font-weight',
              this._settings.get_default_value(
                'window-preview-title-font-weight',
              ),
            )
            this._builder
              .get_object('grid_preview_title_weight_combo')
              .set_active_id(
                this._settings.get_string('window-preview-title-font-weight'),
              )

            this._settings.set_value(
              'window-preview-title-font-color',
              this._settings.get_default_value(
                'window-preview-title-font-color',
              ),
            )
            let rgba = new Gdk.RGBA()
            rgba.parse(
              this._settings.get_string('window-preview-title-font-color'),
            )
            this._builder
              .get_object('grid_preview_title_font_color_colorbutton')
              .set_rgba(rgba)
          },
        )

        this._builder
          .get_object('preview_timeout_spinbutton')
          .set_value(this._settings.get_int('show-window-previews-timeout'))
        this._builder
          .get_object('preview_timeout_spinbutton')
          .connect('value-changed', (widget) => {
            this._settings.set_int(
              'show-window-previews-timeout',
              widget.get_value(),
            )
          })

        this._settings.bind(
          'preview-middle-click-close',
          this._builder.get_object('preview_middle_click_close_switch'),
          'active',
          Gio.SettingsBindFlags.DEFAULT,
        )

        this._settings.bind(
          'window-preview-fixed-x',
          this._builder.get_object('preview_aspect_ratio_x_fixed_togglebutton'),
          'active',
          Gio.SettingsBindFlags.DEFAULT,
        )

        this._settings.bind(
          'window-preview-fixed-y',
          this._builder.get_object('preview_aspect_ratio_y_fixed_togglebutton'),
          'active',
          Gio.SettingsBindFlags.DEFAULT,
        )

        this._settings.bind(
          'preview-use-custom-opacity',
          this._builder.get_object('preview_custom_opacity_switch'),
          'active',
          Gio.SettingsBindFlags.DEFAULT,
        )
        this._settings.bind(
          'preview-use-custom-opacity',
          this._builder.get_object('preview_custom_opacity_spinbutton'),
          'sensitive',
          Gio.SettingsBindFlags.DEFAULT,
        )
        this._settings.bind(
          'window-preview-use-custom-icon-size',
          this._builder.get_object('preview_custom_icon_size_switch'),
          'active',
          Gio.SettingsBindFlags.DEFAULT,
        )
        this._settings.bind(
          'window-preview-use-custom-icon-size',
          this._builder.get_object('preview_custom_icon_size_spinbutton'),
          'sensitive',
          Gio.SettingsBindFlags.DEFAULT,
        )

        this._builder
          .get_object('preview_custom_opacity_spinbutton')
          .set_value(this._settings.get_int('preview-custom-opacity'))
        this._builder
          .get_object('preview_custom_opacity_spinbutton')
          .connect('value-changed', (widget) => {
            this._settings.set_int('preview-custom-opacity', widget.get_value())
          })

        this._settings.bind(
          'peek-mode',
          this._builder.get_object('peek_mode_switch'),
          'active',
          Gio.SettingsBindFlags.DEFAULT,
        )
        this._settings.bind(
          'peek-mode',
          this._builder.get_object('grid_enter_peek_mode_timeout'),
          'sensitive',
          Gio.SettingsBindFlags.DEFAULT,
        )
        this._settings.bind(
          'peek-mode',
          this._builder.get_object('grid_peek_mode_opacity'),
          'sensitive',
          Gio.SettingsBindFlags.DEFAULT,
        )

        this._settings.bind(
          'window-preview-show-title',
          this._builder.get_object('preview_show_title_switch'),
          'active',
          Gio.SettingsBindFlags.DEFAULT,
        )
        this._settings.bind(
          'window-preview-show-title',
          this._builder.get_object('grid_preview_custom_icon_size'),
          'sensitive',
          Gio.SettingsBindFlags.DEFAULT,
        )
        this._settings.bind(
          'window-preview-show-title',
          this._builder.get_object('grid_preview_title_size'),
          'sensitive',
          Gio.SettingsBindFlags.DEFAULT,
        )
        this._settings.bind(
          'window-preview-show-title',
          this._builder.get_object('grid_preview_title_weight'),
          'sensitive',
          Gio.SettingsBindFlags.DEFAULT,
        )
        this._settings.bind(
          'window-preview-show-title',
          this._builder.get_object('grid_preview_title_font_color'),
          'sensitive',
          Gio.SettingsBindFlags.DEFAULT,
        )

        this._builder
          .get_object('enter_peek_mode_timeout_spinbutton')
          .set_value(this._settings.get_int('enter-peek-mode-timeout'))
        this._builder
          .get_object('enter_peek_mode_timeout_spinbutton')
          .connect('value-changed', (widget) => {
            this._settings.set_int(
              'enter-peek-mode-timeout',
              widget.get_value(),
            )
          })

        this._builder
          .get_object('leave_timeout_spinbutton')
          .set_value(this._settings.get_int('leave-timeout'))
        this._builder
          .get_object('leave_timeout_spinbutton')
          .connect('value-changed', (widget) => {
            this._settings.set_int('leave-timeout', widget.get_value())
          })

        this._settings.bind(
          'window-preview-hide-immediate-click',
          this._builder.get_object('preview_immediate_click_button'),
          'active',
          Gio.SettingsBindFlags.DEFAULT,
        )

        this._builder
          .get_object('animation_time_spinbutton')
          .set_value(this._settings.get_int('window-preview-animation-time'))
        this._builder
          .get_object('animation_time_spinbutton')
          .connect('value-changed', (widget) => {
            this._settings.set_int(
              'window-preview-animation-time',
              widget.get_value(),
            )
          })

        this._builder
          .get_object('peek_mode_opacity_spinbutton')
          .set_value(this._settings.get_int('peek-mode-opacity'))
        this._builder
          .get_object('peek_mode_opacity_spinbutton')
          .connect('value-changed', (widget) => {
            this._settings.set_int('peek-mode-opacity', widget.get_value())
          })

        this._builder
          .get_object('preview_size_spinbutton')
          .set_value(this._settings.get_int('window-preview-size'))
        this._builder
          .get_object('preview_size_spinbutton')
          .connect('value-changed', (widget) => {
            this._settings.set_int('window-preview-size', widget.get_value())
          })

        this._builder
          .get_object('preview_aspect_ratio_x_combo')
          .set_active_id(
            this._settings.get_int('window-preview-aspect-ratio-x').toString(),
          )
        this._builder
          .get_object('preview_aspect_ratio_x_combo')
          .connect('changed', (widget) => {
            this._settings.set_int(
              'window-preview-aspect-ratio-x',
              parseInt(widget.get_active_id(), 10),
            )
          })

        this._builder
          .get_object('preview_aspect_ratio_y_combo')
          .set_active_id(
            this._settings.get_int('window-preview-aspect-ratio-y').toString(),
          )
        this._builder
          .get_object('preview_aspect_ratio_y_combo')
          .connect('changed', (widget) => {
            this._settings.set_int(
              'window-preview-aspect-ratio-y',
              parseInt(widget.get_active_id(), 10),
            )
          })

        this._builder
          .get_object('preview_padding_spinbutton')
          .set_value(this._settings.get_int('window-preview-padding'))
        this._builder
          .get_object('preview_padding_spinbutton')
          .connect('value-changed', (widget) => {
            this._settings.set_int('window-preview-padding', widget.get_value())
          })

        this._builder
          .get_object('preview_title_size_spinbutton')
          .set_value(this._settings.get_int('window-preview-title-font-size'))
        this._builder
          .get_object('preview_title_size_spinbutton')
          .connect('value-changed', (widget) => {
            this._settings.set_int(
              'window-preview-title-font-size',
              widget.get_value(),
            )
          })

        this._builder
          .get_object('preview_custom_icon_size_spinbutton')
          .set_value(this._settings.get_int('window-preview-custom-icon-size'))
        this._builder
          .get_object('preview_custom_icon_size_spinbutton')
          .connect('value-changed', (widget) => {
            this._settings.set_int(
              'window-preview-custom-icon-size',
              widget.get_value(),
            )
          })

        this._builder
          .get_object('grid_preview_title_weight_combo')
          .set_active_id(
            this._settings.get_string('window-preview-title-font-weight'),
          )
        this._builder
          .get_object('grid_preview_title_weight_combo')
          .connect('changed', (widget) => {
            this._settings.set_string(
              'window-preview-title-font-weight',
              widget.get_active_id(),
            )
          })
        ;(function () {
          let rgba = new Gdk.RGBA()
          rgba.parse(
            this._settings.get_string('window-preview-title-font-color'),
          )
          this._builder
            .get_object('grid_preview_title_font_color_colorbutton')
            .set_rgba(rgba)
        }).apply(this)

        dialog.show()
      })

    this._settings.bind(
      'isolate-workspaces',
      this._builder.get_object('isolate_workspaces_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'isolate-monitors',
      this._builder.get_object('multimon_multi_isolate_monitor_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'overview-click-to-exit',
      this._builder.get_object('clicktoexit_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'hide-overview-on-startup',
      this._builder.get_object('hide_overview_on_startup_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'group-apps',
      this._builder.get_object('group_apps_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT | Gio.SettingsBindFlags.INVERT_BOOLEAN,
    )

    this._settings.bind(
      'group-apps',
      this._builder.get_object('show_group_apps_options_button'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT | Gio.SettingsBindFlags.INVERT_BOOLEAN,
    )

    this._settings.bind(
      'progress-show-count',
      this._builder.get_object('show_notification_badge_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._builder
      .get_object('group_apps_label_font_color_colorbutton')
      .connect('color-set', (button) => {
        let rgba = button.get_rgba()
        let css = rgba.to_string()
        let hexString = cssHexString(css)
        this._settings.set_string('group-apps-label-font-color', hexString)
      })

    this._builder
      .get_object('group_apps_label_font_color_minimized_colorbutton')
      .connect('color-set', (button) => {
        let rgba = button.get_rgba()
        let css = rgba.to_string()
        let hexString = cssHexString(css)
        this._settings.set_string(
          'group-apps-label-font-color-minimized',
          hexString,
        )
      })

    this._settings.bind(
      'group-apps-use-fixed-width',
      this._builder.get_object('group_apps_use_fixed_width_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'group-apps-underline-unfocused',
      this._builder.get_object('group_apps_underline_unfocused_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'group-apps-use-launchers',
      this._builder.get_object('group_apps_use_launchers_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._builder
      .get_object('show_group_apps_options_button')
      .connect('clicked', () => {
        let box = this._builder.get_object('box_group_apps_options')

        let dialog = this._createPreferencesDialog(
          _('Ungrouped application options'),
          box,
          () => {
            // restore default settings
            this._settings.set_value(
              'group-apps-label-font-size',
              this._settings.get_default_value('group-apps-label-font-size'),
            )
            this._builder
              .get_object('group_apps_label_font_size_spinbutton')
              .set_value(this._settings.get_int('group-apps-label-font-size'))

            this._settings.set_value(
              'group-apps-label-font-weight',
              this._settings.get_default_value('group-apps-label-font-weight'),
            )
            this._builder
              .get_object('group_apps_label_font_weight_combo')
              .set_active_id(
                this._settings.get_string('group-apps-label-font-weight'),
              )

            this._settings.set_value(
              'group-apps-label-font-color',
              this._settings.get_default_value('group-apps-label-font-color'),
            )
            let rgba = new Gdk.RGBA()
            rgba.parse(this._settings.get_string('group-apps-label-font-color'))
            this._builder
              .get_object('group_apps_label_font_color_colorbutton')
              .set_rgba(rgba)

            this._settings.set_value(
              'group-apps-label-font-color-minimized',
              this._settings.get_default_value(
                'group-apps-label-font-color-minimized',
              ),
            )
            let minimizedFontColor = new Gdk.RGBA()
            minimizedFontColor.parse(
              this._settings.get_string(
                'group-apps-label-font-color-minimized',
              ),
            )
            this._builder
              .get_object('group_apps_label_font_color_minimized_colorbutton')
              .set_rgba(minimizedFontColor)

            this._settings.set_value(
              'group-apps-label-max-width',
              this._settings.get_default_value('group-apps-label-max-width'),
            )
            this._builder
              .get_object('group_apps_label_max_width_spinbutton')
              .set_value(this._settings.get_int('group-apps-label-max-width'))

            this._settings.set_value(
              'group-apps-use-fixed-width',
              this._settings.get_default_value('group-apps-use-fixed-width'),
            )
            this._settings.set_value(
              'group-apps-underline-unfocused',
              this._settings.get_default_value(
                'group-apps-underline-unfocused',
              ),
            )
            this._settings.set_value(
              'group-apps-use-launchers',
              this._settings.get_default_value('group-apps-use-launchers'),
            )
          },
        )

        this._builder
          .get_object('group_apps_label_font_size_spinbutton')
          .set_value(this._settings.get_int('group-apps-label-font-size'))
        this._builder
          .get_object('group_apps_label_font_size_spinbutton')
          .connect('value-changed', (widget) => {
            this._settings.set_int(
              'group-apps-label-font-size',
              widget.get_value(),
            )
          })

        this._builder
          .get_object('group_apps_label_font_weight_combo')
          .set_active_id(
            this._settings.get_string('group-apps-label-font-weight'),
          )
        this._builder
          .get_object('group_apps_label_font_weight_combo')
          .connect('changed', (widget) => {
            this._settings.set_string(
              'group-apps-label-font-weight',
              widget.get_active_id(),
            )
          })
        ;(function () {
          let rgba = new Gdk.RGBA()
          rgba.parse(this._settings.get_string('group-apps-label-font-color'))
          this._builder
            .get_object('group_apps_label_font_color_colorbutton')
            .set_rgba(rgba)
        }).apply(this)
        ;(function () {
          let rgba = new Gdk.RGBA()
          rgba.parse(
            this._settings.get_string('group-apps-label-font-color-minimized'),
          )
          this._builder
            .get_object('group_apps_label_font_color_minimized_colorbutton')
            .set_rgba(rgba)
        }).apply(this)

        this._builder
          .get_object('group_apps_label_max_width_spinbutton')
          .set_value(this._settings.get_int('group-apps-label-max-width'))
        this._builder
          .get_object('group_apps_label_max_width_spinbutton')
          .connect('value-changed', (widget) => {
            this._settings.set_int(
              'group-apps-label-max-width',
              widget.get_value(),
            )
          })

        dialog.show()
        dialog.set_default_size(600, 1)
      })

    this._builder
      .get_object('click_action_combo')
      .set_active_id(this._settings.get_string('click-action'))
    this._builder
      .get_object('click_action_combo')
      .connect('changed', (widget) => {
        this._settings.set_string('click-action', widget.get_active_id())
      })

    this._builder
      .get_object('shift_click_action_combo')
      .connect('changed', (widget) => {
        this._settings.set_string('shift-click-action', widget.get_active_id())
      })

    this._builder
      .get_object('middle_click_action_combo')
      .connect('changed', (widget) => {
        this._settings.set_string('middle-click-action', widget.get_active_id())
      })
    this._builder
      .get_object('shift_middle_click_action_combo')
      .connect('changed', (widget) => {
        this._settings.set_string(
          'shift-middle-click-action',
          widget.get_active_id(),
        )
      })

    // Create dialog for middle-click options
    this._builder
      .get_object('middle_click_options_button')
      .connect('clicked', () => {
        let box = this._builder.get_object('box_middle_click_options')

        let dialog = this._createPreferencesDialog(
          _('Customize middle-click behavior'),
          box,
          () => {
            // restore default settings for the relevant keys
            let keys = [
              'shift-click-action',
              'middle-click-action',
              'shift-middle-click-action',
            ]
            keys.forEach(function (val) {
              this._settings.set_value(
                val,
                this._settings.get_default_value(val),
              )
            }, this)
            this._builder
              .get_object('shift_click_action_combo')
              .set_active_id(this._settings.get_string('shift-click-action'))
            this._builder
              .get_object('middle_click_action_combo')
              .set_active_id(this._settings.get_string('middle-click-action'))
            this._builder
              .get_object('shift_middle_click_action_combo')
              .set_active_id(
                this._settings.get_string('shift-middle-click-action'),
              )
          },
        )

        this._builder
          .get_object('shift_click_action_combo')
          .set_active_id(this._settings.get_string('shift-click-action'))

        this._builder
          .get_object('middle_click_action_combo')
          .set_active_id(this._settings.get_string('middle-click-action'))

        this._builder
          .get_object('shift_middle_click_action_combo')
          .set_active_id(this._settings.get_string('shift-middle-click-action'))

        this._settings.bind(
          'shift-click-action',
          this._builder.get_object('shift_click_action_combo'),
          'active-id',
          Gio.SettingsBindFlags.DEFAULT,
        )
        this._settings.bind(
          'middle-click-action',
          this._builder.get_object('middle_click_action_combo'),
          'active-id',
          Gio.SettingsBindFlags.DEFAULT,
        )
        this._settings.bind(
          'shift-middle-click-action',
          this._builder.get_object('shift_middle_click_action_combo'),
          'active-id',
          Gio.SettingsBindFlags.DEFAULT,
        )

        dialog.show()
        dialog.set_default_size(700, 1)
      })

    this._builder
      .get_object('scroll_panel_combo')
      .set_active_id(this._settings.get_string('scroll-panel-action'))
    this._builder
      .get_object('scroll_panel_combo')
      .connect('changed', (widget) => {
        this._settings.set_string('scroll-panel-action', widget.get_active_id())
      })

    this._builder
      .get_object('scroll_icon_combo')
      .set_active_id(this._settings.get_string('scroll-icon-action'))
    this._builder
      .get_object('scroll_icon_combo')
      .connect('changed', (widget) => {
        this._settings.set_string('scroll-icon-action', widget.get_active_id())
      })

    // Create dialog for panel scroll options
    this._builder
      .get_object('scroll_panel_options_button')
      .connect('clicked', () => {
        let box = this._builder.get_object('scroll_panel_options_box')

        let dialog = this._createPreferencesDialog(
          _('Customize panel scroll behavior'),
          box,
          () => {
            // restore default settings
            this._settings.set_value(
              'scroll-panel-delay',
              this._settings.get_default_value('scroll-panel-delay'),
            )
            this._builder
              .get_object('scroll_panel_options_delay_spinbutton')
              .set_value(this._settings.get_int('scroll-panel-delay'))

            this._settings.set_value(
              'scroll-panel-show-ws-popup',
              this._settings.get_default_value('scroll-panel-show-ws-popup'),
            )
          },
        )

        this._builder
          .get_object('scroll_panel_options_delay_spinbutton')
          .set_value(this._settings.get_int('scroll-panel-delay'))
        this._builder
          .get_object('scroll_panel_options_delay_spinbutton')
          .connect('value-changed', (widget) => {
            this._settings.set_int('scroll-panel-delay', widget.get_value())
          })

        this._settings.bind(
          'scroll-panel-show-ws-popup',
          this._builder.get_object('scroll_panel_options_show_ws_popup_switch'),
          'active',
          Gio.SettingsBindFlags.DEFAULT,
        )

        dialog.show()
        dialog.set_default_size(640, 1)
      })

    // Create dialog for icon scroll options
    this._builder
      .get_object('scroll_icon_options_button')
      .connect('clicked', () => {
        let box = this._builder.get_object('scroll_icon_options_box')

        let dialog = this._createPreferencesDialog(
          _('Customize icon scroll behavior'),
          box,
          () => {
            // restore default settings
            this._settings.set_value(
              'scroll-icon-delay',
              this._settings.get_default_value('scroll-icon-delay'),
            )
            this._builder
              .get_object('scroll_icon_options_delay_spinbutton')
              .set_value(this._settings.get_int('scroll-icon-delay'))
          },
        )

        this._builder
          .get_object('scroll_icon_options_delay_spinbutton')
          .set_value(this._settings.get_int('scroll-icon-delay'))
        this._builder
          .get_object('scroll_icon_options_delay_spinbutton')
          .connect('value-changed', (widget) => {
            this._settings.set_int('scroll-icon-delay', widget.get_value())
          })

        dialog.show()
        dialog.set_default_size(640, 1)
      })

    this._settings.bind(
      'hot-keys',
      this._builder.get_object('hot_keys_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )
    this._settings.bind(
      'hot-keys',
      this._builder.get_object('overlay_button'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._builder.get_object('overlay_combo').connect('changed', (widget) => {
      this._settings.set_string('hotkeys-overlay-combo', widget.get_active_id())
    })

    this._settings.bind(
      'shortcut-previews',
      this._builder.get_object('shortcut_preview_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._builder
      .get_object('shortcut_num_keys_combo')
      .set_active_id(this._settings.get_string('shortcut-num-keys'))
    this._builder
      .get_object('shortcut_num_keys_combo')
      .connect('changed', (widget) => {
        this._settings.set_string('shortcut-num-keys', widget.get_active_id())
      })

    this._settings.connect('changed::hotkey-prefix-text', () => {
      checkHotkeyPrefix(this._settings)
    })

    this._builder
      .get_object('hotkey_prefix_combo')
      .set_active_id(this._settings.get_string('hotkey-prefix-text'))

    this._settings.bind(
      'hotkey-prefix-text',
      this._builder.get_object('hotkey_prefix_combo'),
      'active-id',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._builder
      .get_object('overlay_combo')
      .set_active_id(this._settings.get_string('hotkeys-overlay-combo'))

    this._settings.bind(
      'hotkeys-overlay-combo',
      this._builder.get_object('overlay_combo'),
      'active-id',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'overlay-timeout',
      this._builder.get_object('timeout_spinbutton'),
      'value',
      Gio.SettingsBindFlags.DEFAULT,
    )
    if (this._settings.get_string('hotkeys-overlay-combo') !== 'TEMPORARILY') {
      this._builder.get_object('timeout_spinbutton').set_sensitive(false)
    }

    this._settings.connect('changed::hotkeys-overlay-combo', () => {
      if (this._settings.get_string('hotkeys-overlay-combo') !== 'TEMPORARILY')
        this._builder.get_object('timeout_spinbutton').set_sensitive(false)
      else this._builder.get_object('timeout_spinbutton').set_sensitive(true)
    })

    this._settings.bind(
      'shortcut-text',
      this._builder.get_object('shortcut_entry'),
      'text',
      Gio.SettingsBindFlags.DEFAULT,
    )
    this._settings.connect('changed::shortcut-text', () => {
      setShortcut(this._settings, 'shortcut')
    })

    // Create dialog for number overlay options
    this._builder.get_object('overlay_button').connect('clicked', () => {
      let box = this._builder.get_object('box_overlay_shortcut')

      let dialog = this._createPreferencesDialog(
        _('Advanced hotkeys options'),
        box,
        () => {
          // restore default settings for the relevant keys
          let keys = [
            'hotkey-prefix-text',
            'shortcut-text',
            'hotkeys-overlay-combo',
            'overlay-timeout',
            'shortcut-previews',
          ]
          keys.forEach(function (val) {
            this._settings.set_value(val, this._settings.get_default_value(val))
          }, this)
        },
      )

      dialog.show()
      dialog.set_default_size(600, 1)
    })

    // setup dialog for secondary menu options
    this._builder
      .get_object('secondarymenu_options_button')
      .connect('clicked', () => {
        let box = this._builder.get_object('box_secondarymenu_options')

        let dialog = this._createPreferencesDialog(
          _('Secondary Menu Options'),
          box,
          () => {
            // restore default settings
            this._settings.set_value(
              'secondarymenu-contains-appmenu',
              this._settings.get_default_value(
                'secondarymenu-contains-appmenu',
              ),
            )
            this._settings.set_value(
              'secondarymenu-contains-showdetails',
              this._settings.get_default_value(
                'secondarymenu-contains-showdetails',
              ),
            )
          },
        )

        // TODO setting secondarymenu-contains-appmenu is not being used anywhere
        this._settings.bind(
          'secondarymenu-contains-appmenu',
          this._builder.get_object('secondarymenu_appmenu_switch'),
          'active',
          Gio.SettingsBindFlags.DEFAULT,
        )

        this._settings.bind(
          'secondarymenu-contains-showdetails',
          this._builder.get_object('secondarymenu_showdetails_switch'),
          'active',
          Gio.SettingsBindFlags.DEFAULT,
        )

        dialog.show()
        dialog.set_default_size(480, 1)
      })

    // setup dialog for advanced options
    this._builder
      .get_object('button_advanced_options')
      .connect('clicked', () => {
        let box = this._builder.get_object('box_advanced_options')

        let dialog = this._createPreferencesDialog(_('Advanced Options'), box)

        dialog.show()
        dialog.set_default_size(480, 1)
      })

    // Fine-tune panel

    let sizeScales = [
      {
        objectName: 'tray_size_scale',
        valueName: 'tray-size',
        range: DEFAULT_FONT_SIZES,
      },
      {
        objectName: 'leftbox_size_scale',
        valueName: 'leftbox-size',
        range: DEFAULT_FONT_SIZES,
      },
      {
        objectName: 'appicon_margin_scale',
        valueName: 'appicon-margin',
        range: DEFAULT_MARGIN_SIZES,
      },
      {
        objectName: 'appicon_margin_todesktop_scale',
        valueName: 'appicon-margin-todesktop',
        range: DEFAULT_MARGIN_SIZES,
      },
      {
        objectName: 'appicon_margin_toscreenborder_scale',
        valueName: 'appicon-margin-toscreenborder',
        range: DEFAULT_MARGIN_SIZES,
      },
      {
        objectName: 'appicon_padding_scale',
        valueName: 'appicon-padding',
        range: DEFAULT_MARGIN_SIZES,
      },
      {
        objectName: 'tray_padding_scale',
        valueName: 'tray-padding',
        range: DEFAULT_PADDING_SIZES,
      },
      {
        objectName: 'leftbox_padding_scale',
        valueName: 'leftbox-padding',
        range: DEFAULT_PADDING_SIZES,
      },
      {
        objectName: 'statusicon_padding_scale',
        valueName: 'status-icon-padding',
        range: DEFAULT_PADDING_SIZES,
      },
      { objectName: 'panel_length_scale', valueName: '', range: LENGTH_MARKS },
      {
        objectName: 'highlight_appicon_borderradius',
        valueName: 'highlight-appicon-hover-border-radius',
        range: [16, 12, 8, 4, 2, 0],
      },
    ]

    for (const idx in sizeScales) {
      let size_scale = this._builder.get_object(sizeScales[idx].objectName)
      let range = sizeScales[idx].range
      size_scale.set_range(range[range.length - 1], range[0])
      let value
      if (sizeScales[idx].objectName === 'panel_length_scale') {
        value = PanelSettings.getPanelLength(
          this._settings,
          this._currentMonitorIndex,
        )
      } else {
        value = this._settings.get_int(sizeScales[idx].valueName)
      }
      size_scale.set_value(value)
      // Add marks from range arrays, omitting the first and last values.
      range.slice(1, -1).forEach(function (val) {
        size_scale.add_mark(val, Gtk.PositionType.TOP, val.toString())
      })

      // Corrent for rtl languages
      if (this._rtl) {
        // Flip value position: this is not done automatically
        size_scale.set_value_pos(Gtk.PositionType.LEFT)
        // I suppose due to a bug, having a more than one mark and one above a value of 100
        // makes the rendering of the marks wrong in rtl. This doesn't happen setting the scale as not flippable
        // and then manually inverting it
        size_scale.set_flippable(false)
        size_scale.set_inverted(true)
      }
    }

    this._settings.bind(
      'animate-app-switch',
      this._builder.get_object('animate_app_switch_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'animate-window-launch',
      this._builder.get_object('animate_window_launch_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'animate-appicon-hover',
      this._builder.get_object('animate_appicon_hover_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'animate-appicon-hover',
      this._builder.get_object('animate_appicon_hover_button'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    {
      this._settings.bind(
        'animate-appicon-hover-animation-type',
        this._builder.get_object('animate_appicon_hover_options_type_combo'),
        'active-id',
        Gio.SettingsBindFlags.DEFAULT,
      )

      let scales = [
        [
          'animate_appicon_hover_options_duration_scale',
          'animate-appicon-hover-animation-duration',
          1,
        ],
        [
          'animate_appicon_hover_options_rotation_scale',
          'animate-appicon-hover-animation-rotation',
          1,
        ],
        [
          'animate_appicon_hover_options_travel_scale',
          'animate-appicon-hover-animation-travel',
          100,
        ],
        [
          'animate_appicon_hover_options_zoom_scale',
          'animate-appicon-hover-animation-zoom',
          100,
        ],
        [
          'animate_appicon_hover_options_convexity_scale',
          'animate-appicon-hover-animation-convexity',
          1,
        ],
        [
          'animate_appicon_hover_options_extent_scale',
          'animate-appicon-hover-animation-extent',
          1,
        ],
      ]

      let updateScale = (scale) => {
        let [id, key, factor] = scale
        let type = this._settings.get_string(
          'animate-appicon-hover-animation-type',
        )
        let value = this._settings.get_value(key).deep_unpack()[type]
        let defaultValue = this._settings.get_default_value(key).deep_unpack()[
          type
        ]
        this._builder.get_object(id).sensitive = defaultValue !== undefined
        this._builder.get_object(id).set_value(value * factor || 0)
        this._builder.get_object(id).clear_marks()
        this._builder
          .get_object(id)
          .add_mark(
            defaultValue * factor,
            Gtk.PositionType.TOP,
            defaultValue !== undefined
              ? (defaultValue * factor).toString()
              : ' ',
          )
      }

      scales.forEach((scale) => {
        let [id, key, factor] = scale
        this._settings.connect('changed::' + key, () => updateScale(scale))
        this._builder.get_object(id).connect('value-changed', (widget) => {
          let type = this._settings.get_string(
            'animate-appicon-hover-animation-type',
          )
          let variant = this._settings.get_value(key)
          let unpacked = variant.deep_unpack()
          if (unpacked[type] != widget.get_value() / factor) {
            unpacked[type] = widget.get_value() / factor
            this._settings.set_value(
              key,
              new GLib.Variant(variant.get_type_string(), unpacked),
            )
          }
        })
      })

      this._settings.connect(
        'changed::animate-appicon-hover-animation-type',
        () => scales.forEach(updateScale),
      )
      scales.forEach(updateScale)
    }

    this._builder
      .get_object('animate_appicon_hover_button')
      .connect('clicked', () => {
        let box = this._builder.get_object('animate_appicon_hover_options')

        let dialog = this._createPreferencesDialog(
          _('App icon animation options'),
          box,
          () => {
            // restore default settings
            this._settings.set_value(
              'animate-appicon-hover-animation-type',
              this._settings.get_default_value(
                'animate-appicon-hover-animation-type',
              ),
            )
            this._settings.set_value(
              'animate-appicon-hover-animation-duration',
              this._settings.get_default_value(
                'animate-appicon-hover-animation-duration',
              ),
            )
            this._settings.set_value(
              'animate-appicon-hover-animation-rotation',
              this._settings.get_default_value(
                'animate-appicon-hover-animation-rotation',
              ),
            )
            this._settings.set_value(
              'animate-appicon-hover-animation-travel',
              this._settings.get_default_value(
                'animate-appicon-hover-animation-travel',
              ),
            )
            this._settings.set_value(
              'animate-appicon-hover-animation-zoom',
              this._settings.get_default_value(
                'animate-appicon-hover-animation-zoom',
              ),
            )
            this._settings.set_value(
              'animate-appicon-hover-animation-convexity',
              this._settings.get_default_value(
                'animate-appicon-hover-animation-convexity',
              ),
            )
            this._settings.set_value(
              'animate-appicon-hover-animation-extent',
              this._settings.get_default_value(
                'animate-appicon-hover-animation-extent',
              ),
            )
          },
        )

        dialog.show()
      })

    this._settings.bind(
      'highlight-appicon-hover',
      this._builder.get_object('highlight_appicon_hover_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'highlight-appicon-hover',
      this._builder.get_object('highlight_appicon_hover_button'),
      'sensitive',
      Gio.SettingsBindFlags.DEFAULT,
    )

    {
      rgba.parse(
        this._settings.get_string('highlight-appicon-hover-background-color'),
      )
      this._builder.get_object('highlight_appicon_color').set_rgba(rgba)
      this._builder
        .get_object('highlight_appicon_color')
        .connect('color-set', (button) => {
          let rgba = button.get_rgba()
          let css = rgba.to_string()
          this._settings.set_string(
            'highlight-appicon-hover-background-color',
            css,
          )
        })

      rgba.parse(
        this._settings.get_string('highlight-appicon-pressed-background-color'),
      )
      this._builder.get_object('pressed_appicon_color').set_rgba(rgba)
      this._builder
        .get_object('pressed_appicon_color')
        .connect('color-set', (button) => {
          let rgba = button.get_rgba()
          let css = rgba.to_string()
          this._settings.set_string(
            'highlight-appicon-pressed-background-color',
            css,
          )
        })

      let scales = [
        [
          'highlight_appicon_borderradius',
          'highlight-appicon-hover-border-radius',
        ],
      ]

      const updateScale = (scale) => {
        let [id, key] = scale
        this._builder.get_object(id).set_value(this._settings.get_int(key))
      }
      scales.forEach((scale) => {
        updateScale(scale)
        let [id, key] = scale
        this._builder.get_object(id).connect('value-changed', (widget) => {
          this._settings.set_int(key, widget.get_value())
        })
      })
    }

    this._builder
      .get_object('highlight_appicon_hover_button')
      .connect('clicked', () => {
        let box = this._builder.get_object('highlight_appicon_hover_options')

        let dialog = this._createPreferencesDialog(
          _('App icon highlight options'),
          box,
          () => {
            // restore default settings
            this._settings.set_value(
              'highlight-appicon-hover-background-color',
              this._settings.get_default_value(
                'highlight-appicon-hover-background-color',
              ),
            )
            rgba.parse(
              this._settings.get_string(
                'highlight-appicon-hover-background-color',
              ),
            )
            this._builder.get_object('highlight_appicon_color').set_rgba(rgba)
            this._settings.set_value(
              'highlight-appicon-pressed-background-color',
              this._settings.get_default_value(
                'highlight-appicon-pressed-background-color',
              ),
            )
            rgba.parse(
              this._settings.get_string(
                'highlight-appicon-pressed-background-color',
              ),
            )
            this._builder.get_object('pressed_appicon_color').set_rgba(rgba)
            this._settings.set_value(
              'highlight-appicon-hover-border-radius',
              this._settings.get_default_value(
                'highlight-appicon-hover-border-radius',
              ),
            )
            this._builder
              .get_object('highlight_appicon_borderradius')
              .set_value(
                this._settings.get_int('highlight-appicon-hover-border-radius'),
              )
          },
        )

        dialog.show()
      })

    this._settings.bind(
      'stockgs-keep-dash',
      this._builder.get_object('stockgs_dash_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'stockgs-keep-top-panel',
      this._builder.get_object('stockgs_top_panel_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.connect('changed::stockgs-keep-top-panel', () =>
      this._maybeDisableTopPosition(),
    )

    this._maybeDisableTopPosition()

    this._settings.bind(
      'stockgs-panelbtn-click-only',
      this._builder.get_object('stockgs_panelbtn_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    this._settings.bind(
      'stockgs-force-hotcorner',
      this._builder.get_object('stockgs_hotcorner_switch'),
      'active',
      Gio.SettingsBindFlags.DEFAULT,
    )

    // About Panel

    this._builder
      .get_object('extension_version')
      .set_label(
        this._metadata.version.toString() +
          (this._metadata.commit ? ' (' + this._metadata.commit + ')' : ''),
      )

    this._builder
      .get_object('importexport_export_button')
      .connect('clicked', (widget) => {
        this._showFileChooser(
          _('Export settings'),
          { action: Gtk.FileChooserAction.SAVE },
          'Save',
          (filename) => {
            let file = Gio.file_new_for_path(filename)
            let raw = file.replace(null, false, Gio.FileCreateFlags.NONE, null)
            let out = Gio.BufferedOutputStream.new_sized(raw, 4096)

            out.write_all(
              GLib.spawn_command_line_sync('dconf dump ' + SCHEMA_PATH)[1],
              null,
            )
            out.close(null)
          },
        )
      })

    this._builder
      .get_object('importexport_import_button')
      .connect('clicked', (widget) => {
        this._showFileChooser(
          _('Import settings'),
          { action: Gtk.FileChooserAction.OPEN },
          'Open',
          (filename) => {
            if (filename && GLib.file_test(filename, GLib.FileTest.EXISTS)) {
              let settingsFile = Gio.File.new_for_path(filename)
              let [, pid, stdin, stdout, stderr] = GLib.spawn_async_with_pipes(
                null,
                ['dconf', 'load', SCHEMA_PATH],
                null,
                GLib.SpawnFlags.SEARCH_PATH | GLib.SpawnFlags.DO_NOT_REAP_CHILD,
                null,
              )

              stdin = new Gio.UnixOutputStream({ fd: stdin, close_fd: true })
              GLib.close(stdout)
              GLib.close(stderr)

              stdin.splice(
                settingsFile.read(null),
                Gio.OutputStreamSpliceFlags.CLOSE_SOURCE |
                  Gio.OutputStreamSpliceFlags.CLOSE_TARGET,
                null,
              )
            }
          },
        )
      })

    // Donation panel

    let revealDonateTimeout = 0
    let donationIconSwitch = this._builder.get_object('donation_icon_switch')
    let donationRevealer = this._builder.get_object('donation_revealer')
    let hiddenDonateIcon = !!this._settings.get_string(
      'hide-donate-icon-unixtime',
    )

    this._builder
      .get_object('donation_logo')
      .set_from_file(`${this._path}/img/dash-to-panel-logo-light.svg`)
    this._builder
      .get_object('paypal_logo')
      .set_from_file(`${this._path}/img/paypal.png`)
    this._builder
      .get_object('stripe_logo')
      .set_from_file(`${this._path}/img/stripe.png`)
    this._builder
      .get_object('kofi_logo')
      .set_from_file(`${this._path}/img/kofi.png`)

    donationIconSwitch.set_active(hiddenDonateIcon)
    donationRevealer.set_reveal_child(hiddenDonateIcon)

    donationIconSwitch.connect('notify::active', (widget) =>
      this._settings.set_string(
        'hide-donate-icon-unixtime',
        widget.get_active() ? Date.now().toString() : '',
      ),
    )

    this.notebook.connect('notify::visible-page', () => {
      clearTimeout(revealDonateTimeout)

      if (
        this.notebook.visible_page_name == 'donation' &&
        !donationRevealer.get_reveal_child()
      )
        revealDonateTimeout = setTimeout(
          () => donationRevealer.set_reveal_child(true),
          10000,
        )
    })
  }

  _setPreviewTitlePosition() {
    switch (this._settings.get_string('window-preview-title-position')) {
      case 'BOTTOM':
        this._builder
          .get_object('preview_title_position_bottom_button')
          .set_active(true)
        break
      case 'TOP':
        this._builder
          .get_object('preview_title_position_top_button')
          .set_active(true)
        break
    }
  }

  _showFileChooser(title, params, acceptBtn, acceptHandler) {
    let dialog = new Gtk.FileChooserDialog(
      mergeObjects(
        { title: title, transient_for: this.notebook.get_root() },
        params,
      ),
    )

    dialog.add_button('Cancel', Gtk.ResponseType.CANCEL)
    dialog.add_button(acceptBtn, Gtk.ResponseType.ACCEPT)

    dialog.show()

    dialog.connect('response', (dialog, id) => {
      if (id == Gtk.ResponseType.ACCEPT)
        acceptHandler.call(this, dialog.get_file().get_path())

      dialog.destroy()
    })
  }
}

const BuilderScope = GObject.registerClass(
  {
    Implements: [Gtk.BuilderScope],
  },
  class BuilderScope extends GObject.Object {
    _init(preferences) {
      this._preferences = preferences
      super._init()
    }

    vfunc_create_closure(builder, handlerName, flags, connectObject) {
      if (flags & Gtk.BuilderClosureFlags.SWAPPED)
        throw new Error('Unsupported template signal flag "swapped"')

      if (typeof this[handlerName] === 'undefined')
        throw new Error(`${handlerName} is undefined`)

      return this[handlerName].bind(connectObject || this)
    }

    on_btn_click(connectObject) {
      connectObject.set_label('Clicked')
    }

    position_bottom_button_clicked_cb(button) {
      if (!this._preferences._ignorePositionRadios && button.get_active())
        this._preferences._setPanelPosition(Pos.BOTTOM)
    }

    position_top_button_clicked_cb(button) {
      if (!this._preferences._ignorePositionRadios && button.get_active())
        this._preferences._setPanelPosition(Pos.TOP)
    }

    position_left_button_clicked_cb(button) {
      if (!this._preferences._ignorePositionRadios && button.get_active())
        this._preferences._setPanelPosition(Pos.LEFT)
    }

    position_right_button_clicked_cb(button) {
      if (!this._preferences._ignorePositionRadios && button.get_active())
        this._preferences._setPanelPosition(Pos.RIGHT)
    }

    dots_bottom_button_toggled_cb(button) {
      if (button.get_active())
        this._preferences._settings.set_string('dot-position', 'BOTTOM')
    }

    dots_top_button_toggled_cb(button) {
      if (button.get_active())
        this._preferences._settings.set_string('dot-position', 'TOP')
    }

    dots_left_button_toggled_cb(button) {
      if (button.get_active())
        this._preferences._settings.set_string('dot-position', 'LEFT')
    }

    dots_right_button_toggled_cb(button) {
      if (button.get_active())
        this._preferences._settings.set_string('dot-position', 'RIGHT')
    }

    preview_title_position_bottom_button_toggled_cb(button) {
      if (button.get_active())
        this._preferences._settings.set_string(
          'window-preview-title-position',
          'BOTTOM',
        )
    }

    preview_title_position_top_button_toggled_cb(button) {
      if (button.get_active())
        this._preferences._settings.set_string(
          'window-preview-title-position',
          'TOP',
        )
    }

    panel_size_scale_value_changed_cb(scale) {
      // Avoid settings the size continuously
      if (this._preferences._panel_size_timeout > 0)
        GLib.Source.remove(this._preferences._panel_size_timeout)

      this._preferences._panel_size_timeout = GLib.timeout_add(
        GLib.PRIORITY_DEFAULT,
        SCALE_UPDATE_TIMEOUT,
        () => {
          const value = scale.get_value()
          const monitorSync = this._preferences._settings.get_boolean(
            'panel-element-positions-monitors-sync',
          )
          const monitorsToSetFor = monitorSync
            ? this._preferences.monitors
            : [this._preferences._currentMonitorIndex]
          monitorsToSetFor.forEach((monitorIndex) => {
            PanelSettings.setPanelSize(
              this._preferences._settings,
              monitorIndex,
              value,
            )
          })

          this._preferences._panel_size_timeout = 0
          return GLib.SOURCE_REMOVE
        },
      )
    }

    tray_size_scale_value_changed_cb(scale) {
      // Avoid settings the size consinuosly
      if (this._preferences._tray_size_timeout > 0)
        GLib.Source.remove(this._preferences._tray_size_timeout)

      this._preferences._tray_size_timeout = GLib.timeout_add(
        GLib.PRIORITY_DEFAULT,
        SCALE_UPDATE_TIMEOUT,
        () => {
          this._preferences._settings.set_int('tray-size', scale.get_value())
          this._preferences._tray_size_timeout = 0
          return GLib.SOURCE_REMOVE
        },
      )
    }

    leftbox_size_scale_value_changed_cb(scale) {
      // Avoid settings the size consinuosly
      if (this._preferences._leftbox_size_timeout > 0)
        GLib.Source.remove(this._preferences._leftbox_size_timeout)

      this._preferences._leftbox_size_timeout = GLib.timeout_add(
        GLib.PRIORITY_DEFAULT,
        SCALE_UPDATE_TIMEOUT,
        () => {
          this._preferences._settings.set_int('leftbox-size', scale.get_value())
          this._preferences._leftbox_size_timeout = 0
          return GLib.SOURCE_REMOVE
        },
      )
    }

    appicon_margin_scale_value_changed_cb(scale) {
      // Avoid settings the size consinuosly
      if (this._preferences._appicon_margin_timeout > 0)
        GLib.Source.remove(this._preferences._appicon_margin_timeout)

      this._preferences._appicon_margin_timeout = GLib.timeout_add(
        GLib.PRIORITY_DEFAULT,
        SCALE_UPDATE_TIMEOUT,
        () => {
          this._preferences._settings.set_int(
            'appicon-margin',
            scale.get_value(),
          )
          this._preferences._appicon_margin_timeout = 0
          return GLib.SOURCE_REMOVE
        },
      )
    }

    appicon_margin_todesktop_scale_value_changed_cb(scale) {
      // Avoid settings the size consinuosly
      if (this._preferences._appicon_margin_todesktop_timeout > 0)
        GLib.Source.remove(this._preferences._appicon_margin_todesktop_timeout)

      this._preferences._appicon_margin_todesktop_timeout = GLib.timeout_add(
        GLib.PRIORITY_DEFAULT,
        SCALE_UPDATE_TIMEOUT,
        () => {
          this._preferences._settings.set_int(
            'appicon-margin-todesktop',
            scale.get_value(),
          )
          this._preferences._appicon_margin_todesktop_timeout = 0
          return GLib.SOURCE_REMOVE
        },
      )
    }

    appicon_margin_toscreenborder_scale_value_changed_cb(scale) {
      // Avoid settings the size consinuosly
      if (this._preferences._appicon_margin_toscreenborder_timeout > 0)
        GLib.Source.remove(
          this._preferences._appicon_margin_toscreenborder_timeout,
        )

      this._preferences._appicon_margin_toscreenborder_timeout =
        GLib.timeout_add(GLib.PRIORITY_DEFAULT, SCALE_UPDATE_TIMEOUT, () => {
          this._preferences._settings.set_int(
            'appicon-margin-toscreenborder',
            scale.get_value(),
          )
          this._preferences._appicon_margin_toscreenborder_timeout = 0
          return GLib.SOURCE_REMOVE
        })
    }

    appicon_padding_scale_value_changed_cb(scale) {
      // Avoid settings the size consinuosly
      if (this._preferences._appicon_padding_timeout > 0)
        GLib.Source.remove(this._preferences._appicon_padding_timeout)

      this._preferences._appicon_padding_timeout = GLib.timeout_add(
        GLib.PRIORITY_DEFAULT,
        SCALE_UPDATE_TIMEOUT,
        () => {
          this._preferences._settings.set_int(
            'appicon-padding',
            scale.get_value(),
          )
          this._preferences._appicon_padding_timeout = 0
          return GLib.SOURCE_REMOVE
        },
      )
    }

    tray_padding_scale_value_changed_cb(scale) {
      // Avoid settings the size consinuosly
      if (this._preferences._tray_padding_timeout > 0)
        GLib.Source.remove(this._preferences._tray_padding_timeout)

      this._preferences._tray_padding_timeout = GLib.timeout_add(
        GLib.PRIORITY_DEFAULT,
        SCALE_UPDATE_TIMEOUT,
        () => {
          this._preferences._settings.set_int('tray-padding', scale.get_value())
          this._preferences._tray_padding_timeout = 0
          return GLib.SOURCE_REMOVE
        },
      )
    }

    statusicon_padding_scale_value_changed_cb(scale) {
      // Avoid settings the size consinuosly
      if (this._preferences._statusicon_padding_timeout > 0)
        GLib.Source.remove(this._preferences._statusicon_padding_timeout)

      this._preferences._statusicon_padding_timeout = GLib.timeout_add(
        GLib.PRIORITY_DEFAULT,
        SCALE_UPDATE_TIMEOUT,
        () => {
          this._preferences._settings.set_int(
            'status-icon-padding',
            scale.get_value(),
          )
          this._preferences._statusicon_padding_timeout = 0
          return GLib.SOURCE_REMOVE
        },
      )
    }

    leftbox_padding_scale_value_changed_cb(scale) {
      // Avoid settings the size consinuosly
      if (this._preferences._leftbox_padding_timeout > 0)
        GLib.Source.remove(this._preferences._leftbox_padding_timeout)

      this._preferences._leftbox_padding_timeout = GLib.timeout_add(
        GLib.PRIORITY_DEFAULT,
        SCALE_UPDATE_TIMEOUT,
        () => {
          this._preferences._settings.set_int(
            'leftbox-padding',
            scale.get_value(),
          )
          this._preferences._leftbox_padding_timeout = 0
          return GLib.SOURCE_REMOVE
        },
      )
    }
  },
)

export default class DashToPanelPreferences extends ExtensionPreferences {
  fillPreferencesWindow(window) {
    window._settings = this.getSettings(
      'org.gnome.shell.extensions.dash-to-panel',
    )

    // use default width or window
    window.set_default_size(0, 740)

    let preferences = new Preferences(window, window._settings, this.path)
  }
}