DevTools: Console: Provide autocompletions for Maps

third_party/WebKit/Source/devtools/front_end/components/JavaScriptAutocomplete.js

Index: third_party/WebKit/Source/devtools/front_end/components/JavaScriptAutocomplete.js
diff --git a/third_party/WebKit/Source/devtools/front_end/components/JavaScriptAutocomplete.js b/third_party/WebKit/Source/devtools/front_end/components/JavaScriptAutocomplete.js
index 0314ec0c910ac847befed697f4ecd56ae0dbef8f..ad6223c1f066dfe334b94c882ebb2d18d7cfcd51 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/JavaScriptAutocomplete.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/JavaScriptAutocomplete.js
@@ -14,10 +14,21 @@ Components.JavaScriptAutocomplete.CompletionGroup;
  * @return {!Promise<!UI.SuggestBox.Suggestions>}
  */
 Components.JavaScriptAutocomplete.completionsForTextInCurrentContext = function(text, query, force) {
+  var clippedExpression = Components.JavaScriptAutocomplete._clipExpression(text, true);
+  var mapCompletionsPromise = Components.JavaScriptAutocomplete._mapCompletions(text, query);
+  return Components.JavaScriptAutocomplete.completionsForExpression(clippedExpression, query, force)

[dgozman, 2017/01/18 17:02:39]

Should this be Promise.all instead?

[einbinder, 2017/01/19 01:20:40]

The promise has already been triggered. Promise.all seems equally clumsy.

+      .then(completions => mapCompletionsPromise.then(mapCompletions => mapCompletions.concat(completions)));
+};
+
+/**
+ * @param {string} text
+ * @param {boolean=} allowEndingBracket
+ * @return {string}
+ */
+Components.JavaScriptAutocomplete._clipExpression = function(text, allowEndingBracket) {
   var index;
   var stopChars = new Set(' =:({;,!+-*/&|^<>`'.split(''));
   for (index = text.length - 1; index >= 0; index--) {
-    // Pass less stop characters to rangeOfWord so the range will be a more complete expression.
     if (stopChars.has(text.charAt(index)))
       break;
   }
@@ -30,16 +41,80 @@ Components.JavaScriptAutocomplete.completionsForTextInCurrentContext = function(
     if (character === ']')
       bracketCount++;
     // Allow an open bracket at the end for property completion.
-    if (character === '[' && index < clippedExpression.length - 1) {
+    if (character === '[' && (index < clippedExpression.length - 1 || !allowEndingBracket)) {
       bracketCount--;
       if (bracketCount < 0)
         break;
     }
     index--;
   }
-  clippedExpression = clippedExpression.substring(index + 1);
+  return clippedExpression.substring(index + 1);
+};
+
+/**
+ * @param {string} text
+ * @param {string} query
+ * @return {!Promise<!UI.SuggestBox.Suggestions>}
+ */
+Components.JavaScriptAutocomplete._mapCompletions = function(text, query) {
+  var mapMatch = text.match(/\.\s*[gs]et\s*\(\s*$/);
+  var executionContext = UI.context.flavor(SDK.ExecutionContext);
+  if (!executionContext || !mapMatch)
+    return Promise.resolve([]);
+
+  var clippedExpression = Components.JavaScriptAutocomplete._clipExpression(text.substring(0, mapMatch.index), true);
+  var fufill;
+  var promise = new Promise(x => fufill = x);
+  executionContext.evaluate(clippedExpression, 'completion', true, true, false, true, false, evaluated);
+  return promise;
 
-  return Components.JavaScriptAutocomplete.completionsForExpression(clippedExpression, query, force);
+  /**
+     * @param {?SDK.RemoteObject} result

[dgozman, 2017/01/18 17:02:39]

indentation is off

[einbinder, 2017/01/19 01:20:40]

Fixed.

+     * @param {!Protocol.Runtime.ExceptionDetails=} exceptionDetails
+     */
+  function evaluated(result, exceptionDetails) {
+    if (!result || !!exceptionDetails || !result.preview || result.preview.subtype !== 'map') {

[dgozman, 2017/01/18 17:02:39]

Don't use preview:
- subtype is available in RemoteObject;
- it's not reliable (changes often);
- it's limited to ~100 items, so you may just miss completions.
Instead, get the internal properties which contain all entries.

[einbinder, 2017/01/19 01:20:40]

Done.

+      fufill([]);
+      return;
+    }
+
+    var caseSensitivePrefix = [];
+    var caseInsensitivePrefix = [];
+    var caseSensitiveAnywhere = [];
+    var caseInsensitiveAnywhere = [];
+    var qouteChar = '"';
+    if (query.startsWith('\''))
+      qouteChar = '\'';
+    var endChar = ')';
+    if (mapMatch[0].indexOf('s') !== -1)
+      endChar = ', ';
+    var keys = result.preview.entries.filter(entry => entry.key.type === 'string')
+                   .map(entry => entry.key.description)
+                   .sort(String.naturalOrderComparator)
+                   .map(key => qouteChar + key + qouteChar + endChar);
+
+    for (var key of keys) {
+      if (key.length < query.length)
+        continue;
+      if (query.length && key.toLowerCase().indexOf(query.toLowerCase()) === -1)
+        continue;
+      // Substitute actual newlines with newline characters. @see crbug.com/498421
+      var title = key.split('\n').join('\\n');
+
+      if (key.startsWith(query))
+        caseSensitivePrefix.push({title: title, priority: 4});
+      else if (key.toLowerCase().startsWith(query.toLowerCase()))
+        caseInsensitivePrefix.push({title: title, priority: 3});
+      else if (key.indexOf(query) !== -1)
+        caseSensitiveAnywhere.push({title: title, priority: 2});
+      else
+        caseInsensitiveAnywhere.push({title: title, priority: 1});
+    }
+    var suggestions = caseSensitivePrefix.concat(caseInsensitivePrefix, caseSensitiveAnywhere, caseInsensitiveAnywhere);
+    if (suggestions.length)
+      suggestions[0].subtitle = 'Keys';
+    fufill(suggestions);
+  }
 };
 
 /**