Integrate omnibox search into manage page

Author: Folyd

core

@@ -37,7 +37,7 @@ function getPlatformOs() {
     });
 }
 
-async function start() {
+async function start(el) {
     // All dynamic setting items. Those items will been updated
     // in chrome.storage.onchange listener callback.
     let isOfflineMode = await settings.isOfflineMode;
@@ -110,7 +110,7 @@ async function start() {
     let rustcSearcher = new RustcSearch();
 
     const defaultSuggestion = `Search std ${c.match("docs")}, external ${c.match("docs")} (~,@), ${c.match("crates")} (!), ${c.match("attributes")} (#), ${c.match("books")} (%), clippy ${c.match("lints")} (>), and ${c.match("error codes")}, etc in your address bar instantly!`;
-    const omnibox = new Omnibox({ defaultSuggestion, maxSuggestionSize: c.omniboxPageSize() });
+    const omnibox = new Omnibox({ el, defaultSuggestion, maxSuggestionSize: c.omniboxPageSize() });
 
     let formatDoc = (index, doc) => {
         let content = doc.href;
@@ -427,6 +427,40 @@ async function start() {
 
     omnibox.addNoCacheQueries("/", "!", "@", ":");
 
+    // Skip following code if `el` provide, which mean this function run in webpage.
+    if (el) return;
+
+    // DO NOT USE ASYNC CALLBACK HERE, SEE THIS ISSUE:
+    // https://github.com/mozilla/webextension-polyfill/issues/130#issuecomment-918076049
+    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+        switch (message.action) {
+            // Rustc:* action is exclusive to rustc docs event
+            case "rustc:check": {
+                sendResponse({
+                    version: rustcSearcher.version,
+                });
+                break;
+            }
+            case "rustc:add": {
+                if (message.searchIndex) {
+                    rustcSearcher.setSearchIndex(message.searchIndex);
+                    rustcSearcher.setVersion(message.version);
+                    sendResponse(true);
+                } else {
+                    sendResponse(false);
+                }
+                break;
+            }
+            case "open-url": {
+                if (message.url) {
+                    Omnibox.navigateToUrl(message.url);
+                }
+                break;
+            }
+        }
+        return true;
+    });
+
     chrome.storage.onChanged.addListener(changes => {
         for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
             console.log('storage key updated:', key);
@@ -520,6 +554,10 @@ async function start() {
         }
     });
 
+    await checkAutoUpdate();
+}
+
+async function checkAutoUpdate() {
     if (await settings.autoUpdate) {
         let version = await storage.getItem('auto-update-version');
         let now = new Date();
@@ -532,37 +570,6 @@ async function start() {
         Omnibox.navigateToUrl(INDEX_UPDATE_URL);
         await storage.setItem('auto-update-version', `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`);
     }
-
-    // DO NOT USE ASYNC CALLBACK HERE, SEE THIS ISSUE:
-    // https://github.com/mozilla/webextension-polyfill/issues/130#issuecomment-918076049
-    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
-        switch (message.action) {
-            // Rustc:* action is exclusive to rustc docs event
-            case "rustc:check": {
-                sendResponse({
-                    version: rustcSearcher.version,
-                });
-                break;
-            }
-            case "rustc:add": {
-                if (message.searchIndex) {
-                    rustcSearcher.setSearchIndex(message.searchIndex);
-                    rustcSearcher.setVersion(message.version);
-                    sendResponse(true);
-                } else {
-                    sendResponse(false);
-                }
-                break;
-            }
-            case "open-url": {
-                if (message.url) {
-                    Omnibox.navigateToUrl(message.url);
-                }
-                break;
-            }
-        }
-        return true;
-    });
 }
 
 const chromeAction = chrome.action || chrome.browserAction;
@@ -578,4 +585,5 @@ chrome.runtime.onInstalled.addListener(async ({ previousVersion, reason }) => {
     }
 });
 
+
 export { start };

extension/main.js

@@ -1,5 +1,6 @@
 import { STATS_PATTERNS } from "../../statistics.js";
 import Statistics from "../../statistics.js";
+import { start } from "../../main.js";
 
 const TYPE_OTHER = "other";
 const CHART_COLOR = "rgba(249, 188, 45, 0.5)";
@@ -306,4 +307,6 @@ async function renderYearList() {
     const yearAgo = moment().startOf('day').subtract(1, 'year').valueOf();
     await renderCharts(now, yearAgo);
     await renderYearList();
+
+    await start("#omnibox");
 })();

extension/manage/js/index.js

@@ -1,5 +1,6 @@
 import { c } from "../../core/index.js";
 import DocSearch from "./base.js";
+import CrateDocManager from "../../crate-manager.js";
 
 // A DocSearch dedicated to a single crate based on the search-index.
 class SingleCrateDocSearch extends DocSearch {

extension/search/docs/crate-doc.js

@@ -5,12 +5,13 @@
 <script type="text/javascript" src="./js/d3.min.js"></script>
 <script type="text/javascript" src="./js/moment.min.js"></script>
 <script type="text/javascript" src="./js/charts.js"></script>
-
+<link rel="stylesheet" href="../core/omnibox.css">
 <link rel="stylesheet" href="./css/calendar-heatmap.css">
 <link rel="stylesheet" href="./css/charts.css">
 {% endblock head %}
 
 {% block content %}
+<div id="omnibox"></div>
 <div style="flex-direction: column;" class="flex-layout">
   <div class="chart-heatmap"></div>
 </div>