WebUI HelpBubble Implementation (Backend)

Frontend documentation can be found here.

Allows a WebUI page to support Polymer-based, blue material design (“Navi”) HelpBubbles that can be shown in the course of a Feature Promo or Tutorial.

This is done by associating HTML elements in a component with an ElementIdentifier so they can be referenced by a Tutorial step or a FeaturePromoSpecification.

Once elements are linked in this way, their visibility is reported via ElementTracker and can be referenced for any of the usual purposes (e.g. in tests or “hidden” Tutorial steps) and not just for the purpose of anchoring a help bubble.

Usage

  • Implement HelpBubbleHandlerFactory in your WebUIController.

  • Register your controller interface, e.g. in chrome_browser_interface_binders.cc.

  • Implement the CreateHelpBubbleHandler() method to manufacture a HelpBubbleHandler.

    • Assign one or more unique identifiers that will correspond to the element(s) your bubble(s) will attach to. Each will be mapped to an HTML element by your WebUI component.

    • For chrome browser, it is considered good practice to declare your identifiers in browser_element_identifiers.[h|cc]

  • Implement the frontend by following the directions in the relevant documentation.

  • Create your User Education journey referencing one or more of the identifiers you specified above.

    • Note that you will need to specify “in any context” for any IPH or tutorial steps referencing WebUI. Since WebUI can move between windows, they are given unique ElementContext values separate from those of the browser window. This may be changed in future for WebContents tied to primary or secondary UI (i.e. not in a tab or tab-modal dialog that can move between windows).

Limitations

As, as described above, the context of the TrackedElement that is created by the handler will not match that of the browser it is currently embedded in, as WebContents may migrate between primary application (e.g. browser, PWA) windows. We will be looking at ways to mitigate this complication in the future. In the meantime, please use e.g. FeaturePromoSpecification::InAnyContext(true) for IPH that must reference WebUI.

There may be a number of limitations and unsupported options imposed by the front-end as well, please see the relevant documentation for more information before attempting to implement your WebUI User Education journey.