mattcasters opened a new issue, #8461:
URL: https://github.com/apache/hop/issues/8461
### What needs to happen?
Hop Web currently feels noticeably more spaced out than desktop Hop GUI.
Spacing between toolbar items, vertical and horizontal spacing in trees and
tables, margins between dialog controls, and padding inside widgets are
consistently larger in Hop Web than in the desktop client.
Following a detailed trace of the codebase, Eclipse RAP theming, and layout
configurations, the extra spacing was found to stem from multiple interacting
layers:
---
### Root Cause Analysis
#### 1. Global Multiplier: `nativeZoomFactor` hardcoded to $1.333\times$
($1.0 / 0.75$) on Web
In `PropsUi.java` (`reCalculateNativeZoomFactor()`):
```java
public void reCalculateNativeZoomFactor() {
double globalZoom = getGlobalZoomFactor();
if (EnvironmentUtils.getInstance().isWeb()) {
nativeZoomFactor = globalZoom / 0.75; // 1.0 / 0.75 = 1.333333333
} else {
org.eclipse.swt.graphics.Point extent =
TextSizeUtilFacade.textExtent("The quick brown fox jumped over the
lazy dog!");
nativeZoomFactor = (extent.y / (double) ConstUi.SMALL_ICON_SIZE) *
globalZoom;
}
}
```
* **Origin**: Added in commit `d952d822fde` (*"HOP-4511 : Hop Web canvas
font is too small"*) to enlarge canvas text.
* **Desktop (RCP)**: `nativeZoomFactor` is calculated dynamically from font
metrics divided by 16 (`ConstUi.SMALL_ICON_SIZE`), which evaluates to $\approx
1.0$ on standard displays.
* **Web (RAP)**: Hardcoded to $1.333\times$ (+33.3%).
* **Consequences across the entire UI**:
* `PropsUi.getMargin()`: `Math.round(8 * nativeZoomFactor)` produces
**11px** on Web vs **8px** on Desktop (+37.5%). This controls widget spacing
throughout `GuiCompositeWidgets` (metadata dialogs, boxes, groups, tabs),
transform/action dialogs, form attachments, and button bars.
* `PropsUi.getFormMargin()`: `Math.round(5 * nativeZoomFactor)` produces
**7px** on Web vs **5px** on Desktop (+40%).
* Sidebar buttons: `gd.widthHint = 34 * nativeZoomFactor = 45px` (vs
34px); `sidebarWidth = 40 * nativeZoomFactor = 53px` (vs 40px).
* Toolbar item dimensions: `16 * nativeZoomFactor = 21px` (vs 16px);
separator height `27px` (vs 22px).
#### 2. Tree and Table Row Height: RAP CSS Cell Padding
In `light-mode.css` and `dark-mode.css`:
```css
Tree-Cell, Grid-Cell {
spacing: 3px;
padding: 5px 3px 5px 3px;
}
Table-Cell {
spacing: 3px;
padding: 5px 3px 5px 3px;
}
TreeColumn, GridColumn {
padding: 8px 10px 8px 6px;
}
```
* **Vertical padding**: In Desktop SWT, tree and table rows are sized
natively based on font/icon metrics without extra padding. In RAP, `Tree-Cell`
padding of 5px top + 5px bottom adds **10px extra height to every single
tree/table row**, making trees and tables much looser and taller.
* **Horizontal spacing**: `spacing: 3px;` adds 3px between expand/collapse
handles, icons, and text.
* **Headers**: Column headers have 16px vertical padding (`8px` top + `8px`
bottom).
#### 3. Toolbar Container & Item Layout
* **Container**: In desktop Hop GUI, toolbars use native SWT `ToolBar` where
`ToolItem` elements are packed tightly (typically 0–2px spacing). In Hop Web,
`ToolbarFacadeImpl` creates a `Composite` with `RowLayout(SWT.HORIZONTAL)`
having `rowLayout.spacing = 4` (an explicit 4px gap between every item).
* **Button internals**: In
`GuiToolbarWidgets.addWebToolbarButtonToComposite`, each toolbar button is a
`Composite` with a `GridLayout(2, false)` having `horizontalSpacing = 4`.
* **CSS ToolBar**: `ToolBar[FLAT]` specifies `spacing: 4px;` and `ToolItem`
specifies `padding: 4px;`.
#### 4. Widespread RAP CSS Control Padding
The RAP theme applies generous padding across all controls compared to
desktop SWT:
* `Text`: `padding: 5px 10px 5px 10px;` (desktop is ~1–2px vertical).
* `CLabel`: `padding: 6px; spacing: 5px;` (+12px total height and width).
* `Button`: `padding: 6px 15px;` (push); `padding: 3px 3px 3px 0; spacing:
7px;` (checkbox/radio).
* `Combo-Field`: `padding: 5px 10px;`, `Combo-Button`: `width: 30px;`.
* `CTabItem`: `padding: 8px 15px; spacing: 10px;` (16px vertical padding).
* `Group-Frame`: `margin: 20px 0 0 0; padding: 15px 8px 8px 8px;`.
* `List-Item`: `padding: 5px 10px;`.
* `Shell-Titlebar`: `height: 38px;`.
#### 5. Compounding Effect in Form Layouts
Layout managers (`FormLayout`, `GridLayout`) compute bounds based on each
control's `computeSize()` (which includes the CSS paddings), and then arrange
them using `PropsUi.getMargin()` (11px on web vs 8px on desktop).
The visual distance between adjacent fields reaches:
$$\text{Visual Gap} \approx 5\text{px (bottom padding)} + 11\text{px
(getMargin)} + 5\text{px (top padding)} \approx 21\text{–}23\text{px}$$
compared to $\approx 8\text{–}10\text{px}$ on desktop.
---
### Implementation Plan
To bring Hop Web spacing and margins inline with the desktop Hop GUI:
1. **Decouple Canvas Font Sizing from Global `nativeZoomFactor`**:
- Investigate setting `nativeZoomFactor = 1.0` (or dynamically matching
font extent as on RCP) on Web.
- If canvas font size needs to be adjusted, handle it specifically in
canvas rendering (e.g. `HopSvgGraphics2D`, `canvas.js`, or font configuration)
rather than inflating the global `nativeZoomFactor`.
- This immediately restores `PropsUi.getMargin()` to 8px and
`PropsUi.getFormMargin()` to 5px across all dialogs and `GuiCompositeWidgets`.
2. **Tighten Tree and Table Cell Padding in RAP CSS (`light-mode.css` &
`dark-mode.css`)**:
- Reduce `Tree-Cell` and `Table-Cell` padding from `5px 3px 5px 3px` down
to a tighter value (e.g., `2px 3px 2px 3px` or `1px 3px 1px 3px`).
- Reduce `TreeColumn` padding from `8px 10px 8px 6px` to `4px 6px 4px
6px`.
- Tune `spacing` from `3px` to `2px`.
3. **Tighten Toolbar Spacing**:
- In `ToolbarFacadeImpl.java` (rap): Reduce `RowLayout.spacing` from `4`
to `1` or `2`.
- In `GuiToolbarWidgets.java`: Reduce button
`GridLayout.horizontalSpacing` from `4` to `1` or `2`.
- In `light-mode.css` / `dark-mode.css`: Adjust `ToolBar[FLAT] { spacing:
1px; }` and `ToolItem { padding: 2px; }`.
4. **Align Control Padding in RAP CSS**:
- `Text`: Reduce padding from `5px 10px` to `2px 6px` or `3px 8px`.
- `CLabel`: Reduce padding from `6px` to `1px 3px` (matching desktop
CLabel).
- `Button`: Reduce push button padding from `6px 15px` to `3px 10px`,
checkbox spacing from `7px` to `4px`.
- `Combo`: Reduce padding from `5px 10px` to `2px 6px`, reduce button
width from `30px` to `20px–22px`.
- `CTabItem`: Reduce padding from `8px 15px` to `4px 8px`, spacing from
`10px` to `5px`.
- `Group-Frame`: Reduce top margin from `20px` to `8px–10px`, padding
from `15px 8px 8px 8px` to `8px 6px 6px 6px`.
5. **Testing & Verification**:
- Build with `./tools/with-isolated-display.sh mvn -T10 clean install`.
- Perform side-by-side visual validation between desktop Hop GUI and Hop
Web (`/ui` and `/ui-dark`) across:
- Pipeline and workflow graph canvases and toolbars.
- Transform and Action dialogs (especially `GuiCompositeWidgets`-based
forms).
- File explorer tree and metadata trees.
- Execution logs, metrics, and data preview tables.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
