devtools/client/shared/suggestion-picker.js

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 "use strict";
   6
   7 /**
   8  * Allows to find the lowest ranking index in an index
   9  * of suggestions, by comparing it to another array of "most relevant" items
  10  * which has been sorted by relevance.
  11  *
  12  * Example usage:
  13  *  let sortedBrowsers = ["firefox", "safari", "edge", "chrome"];
  14  *  let myBrowsers = ["brave", "chrome", "firefox"];
  15  *  let bestBrowserIndex = findMostRelevantIndex(myBrowsers, sortedBrowsers);
  16  *  // returns "2", the index of firefox in myBrowsers array
  17  *
  18  * @param {Array} items
  19  *        Array of items to compare against sortedItems.
  20  * @param {Array} sortedItems
  21  *        Array of sorted items that suggestions are evaluated against. Array
  22  *        should be sorted by relevance, most relevant item first.
  23  * @return {Number}
  24  */
  25 function findMostRelevantIndex(items, sortedItems) {
  26   if (!Array.isArray(items) || !Array.isArray(sortedItems)) {
  27     throw new Error("Please provide valid items and sortedItems arrays.");
  28   }
  29
  30   // If the items array is empty, no valid index can be found.
  31   if (!items.length) {
  32     return -1;
  33   }
  34
  35   // Return 0 if no match was found in the suggestion list.
  36   let bestIndex = 0;
  37   let lowestIndex = Infinity;
  38   items.forEach((item, i) => {
  39     const index = sortedItems.indexOf(item);
  40     if (index !== -1 && index <= lowestIndex) {
  41       lowestIndex = index;
  42       bestIndex = i;
  43     }
  44   });
  45
  46   return bestIndex;
  47 }
  48
  49 /**
  50  * Top 100 CSS property names sorted by relevance, most relevant first.
  51  *
  52  * List based on the one used by Chrome devtools :
  53  * https://code.google.com/p/chromium/codesearch#chromium/src/third_party/
  54  * WebKit/Source/devtools/front_end/sdk/CSSMetadata.js&q=CSSMetadata&
  55  * sq=package:chromium&type=cs&l=676
  56  *
  57  * The data is a mix of https://www.chromestatus.com/metrics/css and usage
  58  * metrics from popular sites collected via https://gist.github.com/NV/3751436
  59  *
  60  * @type {Array}
  61  */
  62 const SORTED_CSS_PROPERTIES = [
  63   "width",
  64   "margin",
  65   "height",
  66   "padding",
  67   "font-size",
  68   "border",
  69   "display",
  70   "position",
  71   "text-align",
  72   "background",
  73   "background-color",
  74   "top",
  75   "font-weight",
  76   "color",
  77   "overflow",
  78   "font-family",
  79   "margin-top",
  80   "float",
  81   "opacity",
  82   "cursor",
  83   "left",
  84   "text-decoration",
  85   "background-image",
  86   "right",
  87   "line-height",
  88   "margin-left",
  89   "visibility",
  90   "margin-bottom",
  91   "padding-top",
  92   "z-index",
  93   "margin-right",
  94   "background-position",
  95   "vertical-align",
  96   "padding-left",
  97   "background-repeat",
  98   "border-bottom",
  99   "padding-right",
 100   "border-top",
 101   "padding-bottom",
 102   "clear",
 103   "white-space",
 104   "bottom",
 105   "border-color",
 106   "max-width",
 107   "border-radius",
 108   "border-right",
 109   "outline",
 110   "border-left",
 111   "font-style",
 112   "content",
 113   "min-width",
 114   "min-height",
 115   "box-sizing",
 116   "list-style",
 117   "border-width",
 118   "box-shadow",
 119   "font",
 120   "border-collapse",
 121   "text-shadow",
 122   "text-indent",
 123   "border-style",
 124   "max-height",
 125   "text-overflow",
 126   "background-size",
 127   "text-transform",
 128   "zoom",
 129   "list-style-type",
 130   "border-spacing",
 131   "word-wrap",
 132   "overflow-y",
 133   "transition",
 134   "border-top-color",
 135   "border-bottom-color",
 136   "border-top-right-radius",
 137   "letter-spacing",
 138   "border-top-left-radius",
 139   "border-bottom-left-radius",
 140   "border-bottom-right-radius",
 141   "overflow-x",
 142   "pointer-events",
 143   "border-right-color",
 144   "transform",
 145   "border-top-width",
 146   "border-bottom-width",
 147   "border-right-width",
 148   "direction",
 149   "animation",
 150   "border-left-color",
 151   "clip",
 152   "border-left-width",
 153   "table-layout",
 154   "src",
 155   "resize",
 156   "word-break",
 157   "background-clip",
 158   "transform-origin",
 159   "font-variant",
 160   "filter",
 161   "quotes",
 162   "word-spacing",
 163 ];
 164
 165 /**
 166  * Helper to find the most relevant CSS property name in a provided array.
 167  *
 168  * @param items {Array}
 169  *              Array of CSS property names.
 170  */
 171 function findMostRelevantCssPropertyIndex(items) {
 172   return findMostRelevantIndex(items, SORTED_CSS_PROPERTIES);
 173 }
 174
 175 exports.findMostRelevantIndex = findMostRelevantIndex;
 176 exports.findMostRelevantCssPropertyIndex = findMostRelevantCssPropertyIndex;