Deutsche Version

Back to overview

Technical Details

Flow

graph TD
    A["Page is requested"] --> B{"AJAX request?"}
    B -->|"Yes"| C["No injection"]
    B -->|"No"| D{"Option enabled off?"}
    D -->|"Yes"| C
    D -->|"No"| E["ob_start with callback"]
    E --> F["Insert CSS, config and JS before end of head"]
    F --> G["Browser: scan containers for priority text"]
    G --> H["Replace text with icon"]
    H --> I["pjax:end or MutationObserver"]
    I -->|"New content"| G

Server side

• Plugin: PriorityIconsPlugin (plugin id osticket:priority-icons, name "Priority Icons"), configuration class PriorityIconsConfig.
• Singleton: enable() automatically creates an instance when needed.
• bootstrap(): Nothing happens on AJAX requests (header X-Requested-With: XMLHttpRequest). Nothing happens either when the option enabled is off in the configuration of the first active instance. Otherwise ob_start() starts with the callback injectAssetsIntoOutput().
• Callback: Inserts before </head> (otherwise before </body>): a <style>, a <script> with window.PriorityIconsConfig and a <script> with the logic, all carrying the attribute data-plugin="priority-icons". If the output already contains this attribute, nothing is inserted twice.
• Configuration for the script: The priority list with the colors from the plugin configuration, encoded with JSON_HEX_TAG | JSON_HEX_APOS.
• Inline instead of files: According to a code comment, the .htaccess in osTicket's include/ folder blocks HTTP access to plugin files, which is why CSS and JavaScript are delivered inline. No core files are changed.
• Why not addExtraHeader() or signal apps.scp: According to a code comment, $ost is still NULL in bootstrap(), and apps.scp only fires on the Apps page.

Client side (JavaScript)

• Scanned areas: table.list.queue.tickets, .ticket_info, .ticket-info, #ticket-status, .pjax-container. If the script finds none of them, it scans the whole body.
• Matches: A text node is replaced when its trimmed text equals a priority name exactly (case-sensitive, 3 to 10 characters). Text nodes inside script, style, textarea and input are left alone.
• Replacement: The text is replaced by a wrapper .priority-wrapper. It contains an icon .priority-icon (circle, with title and aria-label="Priority: <name>") and the original text as .sr-only. The color is set on the icon via --priority-color.
• Table cell: If the icon sits in a td, the cell gets the attribute data-priority-cell and a light background color.
• Dynamic content: The script listens for pjax:end via jQuery (if jQuery is present) and watches the body with a MutationObserver. Rescans are debounced (50 to 100 ms). Already replaced elements are recognized by data-priority-icon.

CSS

• Tooltip: Pure CSS from the title attribute (::after), arrow via ::before.
• Animation: The Emergency icon pulses; with prefers-reduced-motion: reduce the animation is off.
• Dark mode: With prefers-color-scheme: dark, tooltip background and text color are swapped.
• Print: Colors are preserved (print-color-adjust: exact), tooltips and animation are dropped.
• Unused: The stylesheet contains rules for priority-icon--badge and priority-icon--dot. The script never sets these classes, so the rules have no effect.

Security

• The configuration is encoded with JSON_HEX_TAG, so a </script> in a value cannot end the block.
• Color values from the configuration are checked against ^#[0-9a-fA-F]{3,6}$.
• Icons are created via the DOM API, not via innerHTML.
• assets/.htaccess forbids PHP execution in the assets/ folder.

File structure

The repository contains these files. Only plugin.php, class.PriorityIconsPlugin.php, config.php and assets/ are needed to run the plugin.

priority-icons/
+-- plugin.php                      # Plugin metadata
+-- class.PriorityIconsPlugin.php   # Plugin class
+-- config.php                      # Configuration form
+-- assets/
|   +-- .htaccess
|   +-- priority-icons.css          # Stylesheet
|   +-- priority-icons.js           # Replacement and PJAX handling
+-- README.md
+-- CHANGELOG.md
+-- CONTRIBUTING.md
+-- LICENSE
+-- docs/                           # ARCHITECTURE.md, CODE_REVIEW.md
+-- tests/                          # PHPUnit tests
+-- .github/workflows/ci.yml
+-- composer.json
+-- phpunit.xml
+-- .releaseinclude
+-- .gitignore