1 files changed, 176 insertions, 0 deletions
diff --git a/devtools/client/shared/suggestion-picker.js b/devtools/client/shared/suggestion-picker.js
new file mode 100644
index 000000000..6155eb3bf
--- /dev/null
+++ b/devtools/client/shared/suggestion-picker.js
@@ -0,0 +1,176 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/**
+ * Allows to find the lowest ranking index in an index
+ * of suggestions, by comparing it to another array of "most relevant" items
+ * which has been sorted by relevance.
+ *
+ * Example usage:
+ *  let sortedBrowsers = ["firefox", "safari", "edge", "chrome"];
+ *  let myBrowsers = ["brave", "chrome", "firefox"];
+ *  let bestBrowserIndex = findMostRelevantIndex(myBrowsers, sortedBrowsers);
+ *  // returns "2", the index of firefox in myBrowsers array
+ *
+ * @param {Array} items
+ *        Array of items to compare against sortedItems.
+ * @param {Array} sortedItems
+ *        Array of sorted items that suggestions are evaluated against. Array
+ *        should be sorted by relevance, most relevant item first.
+ * @return {Number}
+ */
+function findMostRelevantIndex(items, sortedItems) {
+  if (!Array.isArray(items) || !Array.isArray(sortedItems)) {
+    throw new Error("Please provide valid items and sortedItems arrays.");
+  }
+
+  // If the items array is empty, no valid index can be found.
+  if (!items.length) {
+    return -1;
+  }
+
+  // Return 0 if no match was found in the suggestion list.
+  let bestIndex = 0;
+  let lowestIndex = Infinity;
+  items.forEach((item, i) => {
+    let index = sortedItems.indexOf(item);
+    if (index !== -1 && index <= lowestIndex) {
+      lowestIndex = index;
+      bestIndex = i;
+    }
+  });
+
+  return bestIndex;
+}
+
+/**
+ * Top 100 CSS property names sorted by relevance, most relevant first.
+ *
+ * List based on the one used by Chrome devtools :
+ * https://code.google.com/p/chromium/codesearch#chromium/src/third_party/
+ * WebKit/Source/devtools/front_end/sdk/CSSMetadata.js&q=CSSMetadata&
+ * sq=package:chromium&type=cs&l=676
+ *
+ * The data is a mix of https://www.chromestatus.com/metrics/css and usage
+ * metrics from popular sites collected via https://gist.github.com/NV/3751436
+ *
+ * @type {Array}
+ */
+const SORTED_CSS_PROPERTIES = [
+  "width",
+  "margin",
+  "height",
+  "padding",
+  "font-size",
+  "border",
+  "display",
+  "position",
+  "text-align",
+  "background",
+  "background-color",
+  "top",
+  "font-weight",
+  "color",
+  "overflow",
+  "font-family",
+  "margin-top",
+  "float",
+  "opacity",
+  "cursor",
+  "left",
+  "text-decoration",
+  "background-image",
+  "right",
+  "line-height",
+  "margin-left",
+  "visibility",
+  "margin-bottom",
+  "padding-top",
+  "z-index",
+  "margin-right",
+  "background-position",
+  "vertical-align",
+  "padding-left",
+  "background-repeat",
+  "border-bottom",
+  "padding-right",
+  "border-top",
+  "padding-bottom",
+  "clear",
+  "white-space",
+  "bottom",
+  "border-color",
+  "max-width",
+  "border-radius",
+  "border-right",
+  "outline",
+  "border-left",
+  "font-style",
+  "content",
+  "min-width",
+  "min-height",
+  "box-sizing",
+  "list-style",
+  "border-width",
+  "box-shadow",
+  "font",
+  "border-collapse",
+  "text-shadow",
+  "text-indent",
+  "border-style",
+  "max-height",
+  "text-overflow",
+  "background-size",
+  "text-transform",
+  "zoom",
+  "list-style-type",
+  "border-spacing",
+  "word-wrap",
+  "overflow-y",
+  "transition",
+  "border-top-color",
+  "border-bottom-color",
+  "border-top-right-radius",
+  "letter-spacing",
+  "border-top-left-radius",
+  "border-bottom-left-radius",
+  "border-bottom-right-radius",
+  "overflow-x",
+  "pointer-events",
+  "border-right-color",
+  "transform",
+  "border-top-width",
+  "border-bottom-width",
+  "border-right-width",
+  "direction",
+  "animation",
+  "border-left-color",
+  "clip",
+  "border-left-width",
+  "table-layout",
+  "src",
+  "resize",
+  "word-break",
+  "background-clip",
+  "transform-origin",
+  "font-variant",
+  "filter",
+  "quotes",
+  "word-spacing"
+];
+
+/**
+ * Helper to find the most relevant CSS property name in a provided array.
+ *
+ * @param items {Array}
+ *              Array of CSS property names.
+ */
+function findMostRelevantCssPropertyIndex(items) {
+  return findMostRelevantIndex(items, SORTED_CSS_PROPERTIES);
+}
+
+exports.findMostRelevantIndex = findMostRelevantIndex;
+exports.findMostRelevantCssPropertyIndex = findMostRelevantCssPropertyIndex;