From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 02:47:55 +0200 Subject: Adding upstream version 124.0.1. Signed-off-by: Daniel Baumann --- devtools/client/shared/suggestion-picker.js | 176 ++++++++++++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 devtools/client/shared/suggestion-picker.js (limited to 'devtools/client/shared/suggestion-picker.js') diff --git a/devtools/client/shared/suggestion-picker.js b/devtools/client/shared/suggestion-picker.js new file mode 100644 index 0000000000..6ad2901030 --- /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) => { + const 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; -- cgit v1.2.3