---
# System prepended metadata

title: HUD Display
tags: [Chromium-Graphics, elkurin-daily-note]

---

# HUD Display

HUD display is a tool to monitor ChromeOS UI.  
Public users can use it by
1. Enable #ash-debug-shurtcuts flag from chrome://flags and restart
2. Press CTRL+SHIFT+ALT+g
3. Observe black window on the screen

## Overview
HUD window is semi-transparent.  
There are currently four tabs: CPU, RAM, FPS and settings.  
CPU/RAM/FPS tabs are at the top of the tab list, and the setting window works slightly differently. On clicking settings icon, the current tab is overridden by the settings tab.

Each tab contains different contents. CPU/RAM/FPS tab shows a graph representing CPU/RAM usage and FPS rate for each.  
The settings tab has several options. By enabling thoes options, the system shows the rect area of a certain property. Also, you can change the animation speed from 0~10. For example, the maximizing window animation will be 10 times slower if you set it as 10 which is very helpful to follow the detailed behavior of the animation.

## Toggle
Now let's see its implementation.  

On pressing CTRL+SHIFT+ALT+g, the accelerator action is parsed as [kDebugToggleHudDisplay](https://source.chromium.org/chromium/chromium/src/+/main:ash/accelerators/accelerator_table.cc;l=104-105;drc=ac47efa0420bbc5291fc0e1827daa7ecffc3c0a2) and trigger [HUDDisplayView::Toggle](https://source.chromium.org/chromium/chromium/src/+/main:ash/hud_display/hud_display.cc;l=131;drc=f3ee53147a677fb8d5fac5a83e68a41041c66758).

The toggle state is 0/1.  
If `g_hud_widget` already exists, the widget is [Destroy](https://source.chromium.org/chromium/chromium/src/+/main:ash/hud_display/hud_display.cc;l=125;drc=f3ee53147a677fb8d5fac5a83e68a41041c66758)ed by the toggle action.  
If `g_hud_widget` is nullptr, it creates widget named "HUDDisplayView".

## HUDDisplayView
[`g_hud_widget`](https://source.chromium.org/chromium/chromium/src/+/main:ash/hud_display/hud_display.cc;l=68;drc=f3ee53147a677fb8d5fac5a83e68a41041c66758) represents a widget.  

HUD window has a unique view class.

[HUDDisplayView](https://source.chromium.org/chromium/chromium/src/+/main:ash/hud_display/hud_display.h;l=22;drc=834e018f2979f4a1ab73c70c226ff72039f4fbc9) class which inherits views::View is used to display the HUD monitoring overview.  

The layout is like this:
```cpp=
// Layout:
// ----------------------
// |      Header        | // Buttons, tabs, controls
// ----------------------
// |                    | // Data views full-size, z-stacked.
// |      Data          |
// |                    |
// ----------------------
```

It holds `header_view_` who is [HUDHeaderView](https://source.chromium.org/chromium/chromium/src/+/main:ash/hud_display/hud_header_view.h;l=18;drc=834e018f2979f4a1ab73c70c226ff72039f4fbc9) as a children and it stores `tab_strip_` who is [HUDTabStrip](https://source.chromium.org/chromium/chromium/src/+/main:ash/hud_display/tab_strip.h;l=64;drc=f3ee53147a677fb8d5fac5a83e68a41041c66758).  

Tabs are added by [AddTabButton](https://source.chromium.org/chromium/chromium/src/+/main:ash/hud_display/tab_strip.cc;l=175;drc=4de6dab8daa43278023a25ee25695479bc8afdbe) on HUDDisplayView construction.  
Each tab links to HUDDisplayMode. There are 3 types: CPU, MEMORY and FPS.

HUDDisplayView creates two views on construction: `graphs_container_` and `settings_view_`.  
`graphs_container_` is for showing graph contents such as CPU/RAM/FPS. This lays at the bottom. On top of it, there is a `settings_view_` UI overlay.  
Initially it sets HUDDisplayMode::CPU as a display mode by [SetDisplayMode](https://source.chromium.org/chromium/chromium/src/+/main:ash/hud_display/hud_display.cc;l=275;drc=f3ee53147a677fb8d5fac5a83e68a41041c66758). This setter is used as a tab switcher.  
On toggling settings by [OnSettingsToggle](https://source.chromium.org/chromium/chromium/src/+/main:ash/hud_display/hud_display.cc;l=220;drc=f3ee53147a677fb8d5fac5a83e68a41041c66758), the bounds is updated accordingly to `settings_view_` preferred size height.  
And `settings_view_` becomes visible so that it overlays `graphs_container_`.

### Graphic tab view
[GraphPageViewBase](https://source.chromium.org/chromium/chromium/src/+/main:ash/hud_display/graph_page_view_base.h;l=25;drc=f3ee53147a677fb8d5fac5a83e68a41041c66758) is a base class deribed from views::View.  
This is a single graph page for CPU/RAM/FPS.  
This is overriden by CpuGraphPageView, MemoryGraphPageView and FPSGraphPageView. Each class implements the detailed contents to display.

### Settings view
Settings tab works differently from other tabs.  
[HUDSettingsView](https://source.chromium.org/chromium/chromium/src/+/main:ash/hud_display/hud_settings_view.h;l=36;drc=834e018f2979f4a1ab73c70c226ff72039f4fbc9) is a view for settings.

There are several checkboxes here to toggle such as aggregated damage, paint rect or hud overlay.  
These features are handled as view items.  
For example, `ui_dev_tools_control_button_` is HUDActionButton whose parent is `ui_devtools_controls`. When you would like to add another option, you can add it here.