kbin-kes icon indicating copy to clipboard operation
kbin-kes copied to clipboard

[FEAT] Bar/power mode

Open aclist opened this issue 10 months ago • 1 comments

Browser

Firefox-based

Script manager

Tampermonkey

KES version

4.3.0-beta.35

Describe the feature

In 5.2.0 I want to prototype a new mode for MES that lets the user switch between "Simple" or "Classic" Mode and "Bar" or "Power" Mode (mix and match some combination of those names). I have a basic POC right now.

Simple Mode

Standard MES UI as before. Wrench icon in the navbar and a modal that opens on click or by keyboard shortcut. It's going to be expanded with https://github.com/aclist/kbin-kes/issues/379 as well.

Power Mode

  • Suppresses the navbar wrench icon
  • Suppresses the sticky icon from #379
  • Replaces these with a sticky, horizontal navbar that is inserted directly below Mbin's own (between the navbar and the page content). This would be about one line of text in height with slight padding, and navbar elements arranged in a horizontal grid.

The navbar contains the following information/widgets:

Inline metadata

  • MES version
  • Number of mods loaded and time it took to load all mods (profiling)

MES button

  • This is the leftmost element in the navbar
  • Button/icon that opens the main MES modal (same modal as Simple Mode)

Global enable/disable toggle

  • Suppresses the behavior of all MES mods without having to disable the actual script in the *monkey extension
  • Could be used for quickly debugging/troubleshooting vanilla vs. modded behavior
  • This toggle short-circuits the rest of MES's mod propagation logic

Mods dropdown

  • A simple combobox containing the names of each mod in a single alphabetical grouping, not classified by page.
  • This dropdown is used in conjunction with the next two elements, which are next to it.

Enable/disable mod

  • Toggles the behavior of the mod currently selected in the dropdown box ON or OFF
  • Can be used if you want to selectively suppress a mod without navigating the more complex MES modal. Simply find it by name in the list and click the button
  • This could be visualized as a toggle or as two buttons that get depressed

Open settings page

  • Opens the full MES modal to the settings page of the mod currently selected in the dropdown box

Notifications tray

  • An icon that opens a scrollable panel below the MES navbar
  • This tray contains a list of notifications emitted by MES or atomic mods via the log() function
  • Functions like a focused/simplified console that contains event information specific to MES
  • To the left of the tray icon will be a short message indicating how many notification events occurred
    • These could be printed by status type, such as 9 notifications, 3 warnings
  • The tray can optionally be expanded for debug/troubleshooting insights
  • This is the rightmost element in the navbar

Power Mode could be useful for both developers looking to test MES mods more rapidly, or for power users who want more granular control.

Setup/teardown

If Power Mode is activated from within Simple Mode:

  • The MES modal closes
  • The navbar and sticky icons are removed
  • The Power Mode navbar is inserted

If Simple Mode is activated from within Power Mode:

  • The MES modal closes
  • The reverse of the above happens

My initial thinking is that there would be a toggle for Power Mode at the top of the MES modal, but it could be put in the Settings dialog as well.

aclist avatar Feb 20 '25 00:02 aclist

I've started restructuring the design of the prototype towards being more of a debug bar, rather than something user-facing.

Notable changes:

  • "Enable/disable" changed to "block/unblock": not just a name change, as functionality was added to not explicitly disable or enable mods at the level of your existing MES settings. Instead, they can be blocked/unblocked ad-hoc without disturbing the original configuration. This lets you keep your actual mod preferences in place while bulk whitelisting/blacklisting different mods for testing purposes.
  • Block all/unblock all: quickly block or unblock all mods. Used in conjunction with the option below
  • Block/unblock mod: changes the block state of the mod currently selected in the dropdown. You can thus block all mods and then selectively unblock a single mod or multiple specific mods, or vice versa.
  • Mod selection dropdown is grouped according to blocked/unblocked mods, and shows the current count. The contents of the dropdown are updated dynamically when a mod is blocked/unblocked.
  • Apply changes button: essentially a glorified "reload page" button, this was added because it did not make sense to reload the page every time block states are changed. This way, you can update a series of block states of mods and then reload when satisfied with the changes.

The option to enable the debug bar is going to be inside of the MES settings menu. Also, since it's now used for debugging purposes, it's not going to remove the standard MES icons or functionality; it just coexists with it.

Currently, the debug bar is suppressed if the viewport is too small (mobile view), since it didn't seem like something that would be useful on a mobile device, but this is open to change.

aclist avatar Mar 01 '25 04:03 aclist

Resolved by #485

aclist avatar Jun 27 '25 06:06 aclist