Developer Tools/ObjectUI - added "Add property path to watch".

Added "Add property path to watch" for quickly adding an
inspected object property expression to watch.

This is not smart enough to infer the original expression
that triggered the property list, but it works without a user
intervention for the scope variables section.

Also -
- Removed a redundant . that is prepended to every
property path.
- Escaped the property name when it is a string.

R=pfeldman@chromium.org

Bug: none
Change-Id: I984bad781786668bb708084dbb1a8537dabf02a3
Reviewed-on: https://chromium-review.googlesource.com/1001232Reviewed-by: Pavel Feldman <pfeldman@chromium.org>
Commit-Queue: PhistucK <phistuck@gmail.com>
Cr-Commit-Position: refs/heads/master@{#556325}

third_party/blink/renderer/devtools/front_end/object_ui/ObjectPropertiesSection.js

@@ -801,11 +801,11 @@ ObjectUI.ObjectPropertyTreeElement = class extends UI.TreeElement {
     const name = this.property.name;
     const parentPath = this.parent.nameElement ? this.parent.nameElement.title : '';
     if (useDotNotation.test(name))
-      this.nameElement.title = parentPath + '.' + name;
+      this.nameElement.title = parentPath ? `${parentPath}.${name}` : name;
     else if (isInteger.test(name))
       this.nameElement.title = parentPath + '[' + name + ']';
     else
-      this.nameElement.title = parentPath + '["' + name + '"]';
+      this.nameElement.title = parentPath + '["' + JSON.stringify(name) + '"]';
   }
 
   /**
@@ -813,6 +813,7 @@ ObjectUI.ObjectPropertyTreeElement = class extends UI.TreeElement {
    */
   _contextMenuFired(event) {
     const contextMenu = new UI.ContextMenu(event);
+    contextMenu.appendApplicableItems(this);
     if (this.property.symbol)
       contextMenu.appendApplicableItems(this.property.symbol);
     if (this.property.value)
@@ -962,6 +963,13 @@ ObjectUI.ObjectPropertyTreeElement = class extends UI.TreeElement {
       this.setExpandable(false);
     }
   }
+
+  /**
+   * @return {string}
+   */
+  path() {
+    return this.nameElement.title;
+  }
 };
 
 

third_party/blink/renderer/devtools/front_end/sources/WatchExpressionsSidebarPane.js

@@ -179,6 +179,23 @@ Sources.WatchExpressionsSidebarPane = class extends UI.ThrottledWidget {
     this.update();
   }
 
+  /**
+   * @param {string} expression
+   */
+  _focusAndAddExpressionToWatch(expression) {
+    UI.viewManager.showView('sources.watch');
+    this.doUpdate();
+    this._addExpressionToWatch(expression);
+  }
+
+  /**
+   * @param {string} expression
+   */
+  _addExpressionToWatch(expression) {
+    this._createWatchExpression(expression);
+    this._saveExpressions();
+  }
+
   /**
    * @override
    * @param {!UI.Context} context
@@ -190,13 +207,17 @@ Sources.WatchExpressionsSidebarPane = class extends UI.ThrottledWidget {
     if (!frame)
       return false;
     const text = frame.textEditor.text(frame.textEditor.selection());
-    UI.viewManager.showView('sources.watch');
-    this.doUpdate();
-    this._createWatchExpression(text);
-    this._saveExpressions();
+    this._focusAndAddExpressionToWatch(text);
     return true;
   }
 
+  /**
+   * @param {!ObjectUI.ObjectPropertyTreeElement} target
+   */
+  _addPropertyPathToWatch(target) {
+    this._addExpressionToWatch(target.path());
+  }
+
   /**
    * @override
    * @param {!Event} event
@@ -204,6 +225,11 @@ Sources.WatchExpressionsSidebarPane = class extends UI.ThrottledWidget {
    * @param {!Object} target
    */
   appendApplicableItems(event, contextMenu, target) {
+    if (target instanceof ObjectUI.ObjectPropertyTreeElement) {
+      contextMenu.debugSection().appendItem(
+          ls`Add property path to watch`, this._addPropertyPathToWatch.bind(this, target));
+    }
+
     const frame = UI.context.flavor(Sources.UISourceCodeFrame);
     if (!frame || frame.textEditor.selection().isEmpty())
       return;

third_party/blink/renderer/devtools/front_end/sources/module.json

@@ -195,6 +195,15 @@
                 }
             ]
         },
+        {
+            "type": "@UI.ContextMenu.Provider",
+            "actionId": "sources.add-to-watch",
+            "className": "Sources.WatchExpressionsSidebarPane",
+            "title": "Add to watch",
+            "contextTypes": [
+                "ObjectUI.ObjectPropertyTreeElement"
+            ]
+        },
         {
             "type": "@UI.ContextMenu.Provider",
             "contextTypes": [