Chrome DevTools Protocol Viewer

To add new domains to the viewer's navigation/interface:

1. Run npm run prep to regenerate the protocol files.
2. Execute the generation script: node generate-sidenav-html.cjs.
3. Manually add the generated content into the <div id="domains"> tag located in pages/_includes/shell.hbs.

To include a new version of the Chrome DevTools Protocol in the viewer, perform the following steps:

1. Modify pages/_data/versions.json to include the new version metadata.
2. Create a new JSON file at pages/_data/VERSION_SLUG.json containing the version data.
3. Create an HTML file at _versions/VERSION_SLUG.html to provide the protocol version description.
4. Update the <div id="versions"> tag in pages/_includes/shell.hbs to include the new version in the UI.
5. Build the project using npm run build to apply changes.

To build the project from source and run it on your local machine, follow these steps in order:

1. Install dependencies: Use npm i to install the necessary packages.
2. Regenerate protocol files: Run npm run prep to prepare the protocol data.
3. Build the project: Run npm run build to compile the assets.
4. Serve locally: Run npm run serve to start a local development server.

# install dependencies
npm i

# regenerate the protocol files
npm run prep

# build it
npm run build

# serve it locally
npm run serve

The KeywordsModel class manages the logic for matching user input against the protocol index.

Matching Logic:

1. Exact Prefix Matches: If the search string matches the start of a key, it is prioritized in exactMatches.
2. Wildcard Matches: If the search string exists anywhere within a key, it is included in wildcardMatches.
3. Caching: To optimize performance, the model caches previous results. If a new search string starts with the previous search string (e.g., searching "dom" after "domain"), it filters the existing cached matches instead of re-scanning the entire index.

Return Value: getMatches(searchString) returns an array of objects retrieved from the index using the matched keys.

The cr-search-control element provides the primary search interface for the protocol viewer. It includes a text input that, when typed into, fetches a protocol search index and displays matching results via a cr-search-results menu.

To use it, include the element in your HTML and provide the required attributes:

• base-url: The base URL of the application.
• protocol-search-index: The path to the JSON search index relative to the base-url.

Keyboard interactions supported:

• ArrowDown / ArrowUp: Navigate through search results.
• Enter: Select the currently focused result.
• Escape: Clear the search input and blur the field.
• A-Z keys: Automatically focuses the search input.

<cr-search-control 
  base-url="/" 
  protocol-search-index="search-index.json">
</cr-search-control>

The cr-search-results element is a specialized component used to display a list of matches found during a search. It renders each match as a clickable link containing the keyword, a type label (e.g., Domain, Event, Method), and a description rendered via cr-markdownish.

Key properties and methods:

• searchString (setter): Updates the component with a new search string, triggering a re-render of matches.
• focusDown(): Moves the visual selection to the next result.
• focusUp(): Moves the visual selection to the previous result.
• select(): Navigates to the currently selected result.
• results (getter): Returns a NodeList of all <a> elements in the results.
• selectedResult (getter): Returns the currently highlighted result element.

The protocol viewer categorizes search results into specific types. When a match is found, it is assigned one of the following types, which are used for labeling in the UI: