Add features section to UI Devtools docs
Change-Id: I9f91ff0b3f2d6c15a1a939511d31d07c2418d52a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1724864
Reviewed-by: Wei Li <[email protected]>
Commit-Queue: Kristyn Hamasaki <[email protected]>
Cr-Commit-Position: refs/heads/master@{#687851}
diff --git a/docs/ui/ui_devtools/index.md b/docs/ui/ui_devtools/index.md
index d55a65db..e017cbc0 100644
--- a/docs/ui/ui_devtools/index.md
+++ b/docs/ui/ui_devtools/index.md
@@ -18,6 +18,94 @@
* Direct link is chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9223/0.
-## Features
+## How to Use
-TODO(khamasaki): add features.
+### Elements Tree
+
+View, Window, and Widget elements are displayed in the hierarchal elements tree. To expand the elements
+tree, right click the root element and then select Expand Recursively from the context menu.
+Then, to inspect an element's properties, click on its elements node.
+
+![expand elements]
+
+### Views Property Inspection
+
+When an element in the elements tree is selected, the property panel on the right side displays the
+element's properties. All elements have the basic properties (height, width, x, y, visibility).
+For Window and View elements, if that element has Layer properties, they will be displayed in
+a separate section.
+
+![browser frame properties]
+
+For View elements with Metadata properties, each parent class's properties from the Metadata
+will be displayed in an additional section.
+
+![image view properties]
+
+Elements' basic properties can be modified from the properties panel and changes will be shown.
+
+![edit property]
+
+### Inspect Mode
+
+To enter inspect mode, click the inspect icon at top left corner of UI Devtools.
+
+![inspector button]
+
+Hovering over a UI element highlights that element with a blue rectangular border and reveals
+the element's node in the elements tree.
+
+![hovering over elements]
+
+Clicking on a highlighted element will pin that element. Clicking the corresponding node
+in the elements tree will reveal that element's properties.
+
+![hover and inspect]
+
+When an element is pinned, hovering over other elements will reveal the vertical and horizontal
+distance between the two elements.
+
+![hovering distances]
+
+To exit inspect mode, either click the inspect icon again or press the Esc key.
+
+### Sources Panel
+
+In the properties panel, each section has a source link in the upper right corner. When right-clicked,
+the context menu shows the option to "Open in new tab," which opens the class's header file in Chromium
+code search.
+
+![properties panel right click link]
+
+If the link is simply clicked, it will open the source code in the sources panel of UI DevTools, which
+is read in from local files.
+
+![sources panel]
+
+### View Bounds Highlighting
+
+Red border rectangles around each View element can be drawn using the command Ctrl+R (Meta+R for mac).
+The rectangles can be toggled off and on using the same command.
+
+![debug bounds rectangles]
+
+### Bubble Locking
+
+In order to inspect a bubble, the command Ctrl+Shift+R (Meta+Shift+R for mac) locks bubbles to prevent
+them from dismissing upon losing focus. This allows a bubble's inner elements to be inspected. Bubble
+locking can be toggled off and on using the same command.
+
+![lock and inspect bubble]
+
+[expand elements]: images/expand_elements.gif
+[browser frame properties]: images/browser_frame_properties.png
+[image view properties]: images/image_view_properties.png
+[edit property]: images/edit_property.gif
+[inspector button]: images/inspector_button.png
+[hovering over elements]: images/hovering_over_elements.gif
+[hover and inspect]: images/hover_and_inspect.gif
+[hovering distances]: images/hovering_distances.gif
+[properties panel right click link]: images/properties_panel_right_click_link.png
+[sources panel]: images/sources_panel.png
+[debug bounds rectangles]: images/debug_bounds_rectangles.png
+[lock and inspect bubble]: images/lock_and_inspect_bubble.gif
