Deutsche Version

Back to overview

Tab Swap: Technical Details

Flow

graph TD
    A["osTicket starts, plugin bootstrap()"] --> B["checkVersion(): store installed_version"]
    B --> C{"Enable Tab Swap on?"}
    C -->|"No"| D["No signal, no script"]
    C -->|"Yes"| E["object.view signal connected"]
    E --> F{"Object is a ticket?"}
    F -->|"No"| G["Nothing happens"]
    F -->|"Yes"| H["Inline script is output"]
    H --> I["Browser: swap tabs"]

Plugin metadata

Server side

• bootstrap() calls checkVersion(). If installed_version is empty or lower than the version from plugin.php, performUpdate() writes the new version to the configuration. A message goes to the error log only if the DEBUG constant is set and truthy.
• If the Enable Tab Swap option is on, the plugin connects onObjectView() to the object.view signal.
• onObjectView() only acts if the passed object is a Ticket (for example not a task). In that case the script is output.
• The plugin does not check permissions. It outputs the script for every ticket view in which the signal fires. Whether the swap takes effect is decided by the elements in the browser (see below).
• There are no database tables, no routes, no file copies and no changes to osTicket files.

Output script

The plugin outputs an element of the form <script data-plugin="tab-swap" data-version="..." nonce="...">:

• data-version holds installed_version, but only if the value matches the pattern number.number or number.number.number. Otherwise 1.0.0 is used. The value is also HTML-escaped.
• nonce is only set if the CSP_NONCE constant is defined. The value is HTML-escaped.
• The script is hard-coded in the plugin and contains no user input.

Browser side

The script only acts once all prerequisites are met:

1. The elements #post-reply-tab, #post-note-tab, #reply and #note exist.
2. Both tabs are visible (offsetParent is not null).

Then the following happens:

1. The li element of the note tab is moved before the li of the reply tab inside #response-tabs.
2. The class active is removed from the reply tab and aria-selected="false" is set. On the note tab, active is added and aria-selected="true" is set.
3. #reply gets display: none, #note gets display: block.

The swap runs once per page build. So that it also applies to pages built later, the script uses:

• a MutationObserver that waits for #post-reply-tab and stops after a successful swap,
• a direct call and DOMContentLoaded,
• pjax:success and, if jQuery is present, the redraw.staff event. In both cases the state is reset and the swap runs again.

jQuery is not strictly required. Without it, only the reaction to redraw.staff is omitted.

File structure

tab-swap/
├── plugin.php               # plugin metadata
├── class.TabSwapPlugin.php  # plugin class, signal handler, inline script
└── config.php               # TabSwapConfig with the two fields

The repository additionally contains composer.json, PHPUnit tests, a CI workflow and documentation. CI checks syntax and runs the tests with PHP 7.4 to 8.3.