Fix #1084: quick-api-reference sample (#1099)

* Add README.md

* Fix issue related to website update

Updated CSS selector and tweaked the TIP button

* Update content.js

Keeping newline

* Update CSS styles

Change padding, height and font sizes to make the button style more consistent with the navigation bar

* Update functional-samples/tutorial.quick-api-reference/content.js

* Update functional-samples/tutorial.quick-api-reference/README.md

* Update functional-samples/tutorial.quick-api-reference/README.md

---------

Co-authored-by: Oliver Dunk <[email protected]>

Author: Pask00

functional-samples/tutorial.quick-api-reference/README.md

@@ -0,0 +1,18 @@
+# Tutorial: Handling events
+
+This sample demonstrates how to handle events with service workers.
+
+## Overview
+
+The extension built allows users to quickly navigate to Chrome API reference pages using the omnibox.
+
+The events from the following APIs have been handled: `chrome.runtime`, `chrome.omnibox` and `chrome.alarms`.
+
+The complete tutorial is available [here](https://developer.chrome.com/docs/extensions/get-started/tutorial/service-worker-events).
+
+## Running this extension
+
+1. Clone this repository.
+2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
+3. Type "api" in the omnibox followed by tab or space and select a suggestion.
+4. Click on "Tip" button in the navigation bar.

functional-samples/tutorial.quick-api-reference/content.js

@@ -1,23 +1,18 @@
 // Popover API https://chromestatus.com/feature/5463833265045504
 
 (async () => {
-  const nav = document.querySelector('.navigation-rail__links');
+  const nav = document.querySelector('.upper-tabs > nav');
 
   const { tip } = await chrome.runtime.sendMessage({ greeting: 'tip' });
 
   const tipWidget = createDomElement(`
-    <button class="navigation-rail__link" popovertarget="tip-popover" popovertargetaction="show" style="padding: 0; border: none; background: none;>
-      <div class="navigation-rail__icon">
-        <svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none"> 
-        <path d='M15 16H9M14.5 9C14.5 7.61929 13.3807 6.5 12 6.5M6 9C6 11.2208 7.2066 13.1599 9 14.1973V18.5C9 19.8807 10.1193 21 11.5 21H12.5C13.8807 21 15 19.8807 15 18.5V14.1973C16.7934 13.1599 18 11.2208 18 9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9Z'"></path>
-        </svg>
-      </div>
-      <span>Tip</span> 
+    <button type="button" popovertarget="tip-popover" popovertargetaction="show" style="padding: 0 12px; height: 36px;">
+      <span style="display: block; font: var(--devsite-link-font,500 14px/20px var(--devsite-primary-font-family));">Tip</span>
     </button>
   `);
 
   const popover = createDomElement(
-    `<div id='tip-popover' popover>${tip}</div>`
+    `<div id='tip-popover' popover style="margin: auto;">${tip}</div>`
   );
 
   document.body.append(popover);