gecko-dev/devtools/client/shared/suggestion-picker.js
Julian Descottes 4206c41dfc Bug 1168246 - part1: CSS autocomplete picks most popular prop;r=pbrosset
Based on the original patch from danemacmillan.

* suggestion-picker.js
Add a new shared util to find the most popular css property in an array.
The list of popular css properties is extracted from chrome devtools code.
* autocomplete-popup.js
Can specify selected item index when opening the popup or setting items.
* inplace-editor.js
Use the suggestion-picker to select a default property.


MozReview-Commit-ID: JuWZzbBSBqX

--HG--
extra : rebase_source : 3317766ae63aea83f845d3cf3d134ecf60135f67
2016-03-29 16:08:17 +02:00

177 lines
4.1 KiB
JavaScript

/* 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;