feat(panel/scopes): allow changing model values

panel/components/inspected-app/inspected-app.js

@@ -17,8 +17,16 @@ function inspectedAppService($rootScope) {
     return invokeAngularHintMethod('unwatch', scopeId, path);
   };
 
-  function invokeAngularHintMethod(method, scopeId, path) {
-    var args = [parseInt(scopeId, 10), path || ''].map(JSON.stringify).join(',');
+  this.assign = function (scopeId, path, value) {
+    return invokeAngularHintMethod('assign', scopeId, path, value);
+  };
+
+  function invokeAngularHintMethod(method, scopeId, path, value) {
+    var args = [parseInt(scopeId, 10), path || ''].
+                  map(JSON.stringify).
+                  concat(value ? [value] : []).
+                  join(',');
+
     chrome.devtools.inspectedWindow.eval('angular.hint.' + method + '(' + args + ')');
   }
 

panel/components/json-tree/json-tree.js

@@ -12,6 +12,7 @@ function batJsonTreeDirective() {
     terminal: true,
     scope: {
       batInspect: '&',
+      batAssign: '&',
       batModel: '='
     },
     link: jsonTreeLinkFn
@@ -89,9 +90,17 @@ function batJsonTreeDirective() {
             val = '"' + val + '"';
           }
           childElt = angular.element(
-            '<span class="console-formatted-' + (typeof val) + '">' +
+            '<span contentEditable="true" class="console-formatted-' + (typeof val) + '">' +
               val +
             '</span>');
+
+          // TODO: test this
+          childElt.on('blur', function () {
+            scope.batAssign({
+              path: fullPath,
+              value: childElt.text()
+            });
+          })
         }
 
         parentElt.append(childElt);

panel/scopes/scopes.html

@@ -16,7 +16,8 @@
           <div class="section expanded">
             <bat-json-tree
                 bat-model="scopes[inspectedScope].models"
-                bat-inspect="inspect(path)"></bat-json-tree>
+                bat-inspect="inspect(path)"
+                bat-assign="assign(path, value)"></bat-json-tree>
           </div>
         </div>
       </div>

panel/scopes/scopes.js

@@ -10,6 +10,9 @@ function ScopesController($scope, inspectedApp) {
   $scope.inspect = function (path) {
     inspectedApp.watch($scope.inspectedScope, path);
   };
+  $scope.assign = function (path, value) {
+    inspectedApp.assign($scope.inspectedScope, path, value);
+  };
 
   $scope.inspectedScope = null;