*{box-sizing:border-box}

WHAT IT DOES

This userscript adds a floating Box Model Inspector panel to any webpage that detects and displays CSS box model properties for elements on the page. It lists visible elements with their tag names, IDs, classes, and computed dimensions. A search filter lets you find elements by tag, ID, class, or text content. Clicking any element in the list highlights it on the page with a blue outline and scrolls it into view. The panel shows detailed box model information including content dimensions, padding, margin, border widths and styles, and the total box size. An inspector mode allows you to click any element directly on the page to instantly view its box model properties in the panel. You can copy the full box model CSS for any element to the clipboard. All panel interactions use the BGPanel component, which automatically persists per-site position and collapse state.

WHERE IT RUNS

The script runs on all websites (*://*/*) through the BotGentz extension. It does not require any special permissions beyond those already granted by the extension. It works in any modern browser that supports the BotGentz userscript environment. The panel appears automatically on every page load, ready to assist with layout debugging and box model analysis.

HOW TO USE

The panel appears as a floating bubble in the bottom-right corner of your browser window. Click the bubble to expand the panel. The "Elements" section displays a list of visible elements on the page, showing their tag name, ID, class, and dimensions. Use the search input to filter elements by tag, ID, class, or text content. Click any element in the list to highlight it on the page and view its box model details in the "Box Model Details" section. The details include content size, padding (top, right, bottom, left), margin, border width, style, and color, plus the total box size. Click the "Copy CSS" button to copy the element's full box model CSS to your clipboard. Click "Inspect Element" to enter inspector mode—then click any element on the page to view its box model properties instantly. Click "Clear Highlight" to remove the outline from the selected element.

COMPUTED BOX MODEL EXTRACTION WITH TOTAL SIZE CALCULATION

The script uses window.getComputedStyle() to retrieve all box model properties for each element, including width, height, padding, margin, and border values. It parses these values and calculates the total box size by adding padding and border to the content dimensions (for content-box elements) or subtracting them (for border-box elements). The script filters out hidden elements (those with zero width or height) and excludes script, style, and noscript elements to focus on visible page content. The search filter matches against tag names, IDs, class names, and the first 100 characters of text content. The inspector mode adds mouseover highlighting and click detection, allowing rapid inspection of elements directly in the page layout. The copy function generates a complete CSS block with all box model properties formatted for immediate use in stylesheets.

THE PANEL

The panel is built using the BGPanel component, which provides a consistent, accessible interface across all BotGentz tools. It supports drag-to-reposition via the header, collapse on click, and stores the panel's position and state per site using GM_setValue. The panel includes a close button (✕) to dismiss it temporarily—the panel reappears on next page load. The settings section includes a dropdown for selecting panel position (bottom-right, top-right, bottom-left, top-left), which is saved globally. The panel has a fixed width of 380px and a maximum height of 80vh, with scrolling for content that overflows. The element list has a maximum height of 150px with internal scrolling, and the box model details section has a maximum height of 250px.

PLEASE NOTE

Requires the free BotGentz extension to run. The script scans all visible elements on the page—on very large pages, this may take a moment. The script does not collect, store, or transmit any personal data. All box model data is read from the page and displayed locally. The copy function copies CSS properties as they appear in computed styles; some values may be in different units than originally defined. Inspector mode uses mouseover and click events that may interfere with some page interactions—disable inspector mode when not needed. The highlight outline may overlap with existing element styles.