searchBar.xhtml - mozsearch

Enable keyboard shortcuts

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <meta charset="utf-8" />

    <title>Search bar element test</title>

    <script type="module" src="chrome://messenger/content/search-bar.mjs"></script>

  </head>

  <body>

    <template id="searchBarTemplate">

      <form>

        <input type="search" placeholder="" required="required"/>

        <div aria-hidden="hidden"><slot name="placeholder"></slot></div>

        <button id="search-button"

                class="button button-flat icon-button">

          <slot name="search-button"></slot>

        </button>

      </form>

    </template>

    <search-bar label="Search" placeholder="Placeholder">

      <span slot="placeholder"></span>

      <img slot="clear-button" src="chrome://messenger/skin/icons/new/compact/close.svg" alt="Clear" />

      <img slot="search-button" src="chrome://messenger/skin/icons/new/compact/search.svg" alt="Search" />

    </search-bar>

  </body>

</html>