DevTools: [wip] move Elements panel off WebInspector.domModel and single tree outline.

Source/devtools/front_end/MetricsSidebarPane.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 122 matching lines @@
         var left = this._getPropertyValueAsPx(computedStyle, componentName + "-left" + suffix);
         var top = this._getPropertyValueAsPx(computedStyle, componentName + "-top" + suffix);
         var right = this._getPropertyValueAsPx(computedStyle, componentName + "-right" + suffix);
         var bottom = this._getPropertyValueAsPx(computedStyle, componentName + "-bottom" + suffix);
         return { left: left, top: top, right: right, bottom: bottom };
     },
 
     _highlightDOMNode: function(showHighlight, mode, event)
     {
         event.consume();
-        var nodeId = showHighlight && this.node ? this.node.id : 0;
-        if (nodeId) {
+        if (showHighlight && this.node) {
             if (this._highlightMode === mode)
                 return;
             this._highlightMode = mode;
-            WebInspector.domModel.highlightDOMNode(nodeId, mode);
+            this.node.highlight(mode);
         } else {
             delete this._highlightMode;
             WebInspector.domModel.hideDOMNodeHighlight();
         }
 
         for (var i = 0; this._boxElements && i < this._boxElements.length; ++i) {
             var element = this._boxElements[i];
-            if (!nodeId || mode === "all" || element._name === mode)
+            if (!this.node || mode === "all" || element._name === mode)
                 element.style.backgroundColor = element._backgroundColor;
             else
                 element.style.backgroundColor = "";
         }
     },
 
     /**
      * @param {!WebInspector.CSSStyleDeclaration} style
      */
     _updateMetrics: function(style)
@@ skipping 259 matching lines @@
 
         this.previousPropertyDataCandidate = null;
         var self = this;
         var callback = function(style) {
             if (!style)
                 return;
             self.inlineStyle = style;
             if (!("originalPropertyData" in self))
                 self.originalPropertyData = self.previousPropertyDataCandidate;
 
-            if (typeof self._highlightMode !== "undefined") {
-                WebInspector.domModel.highlightDOMNode(self.node.id, self._highlightMode);
-            }
+            if (typeof self._highlightMode !== "undefined")
+                self.node.highlight(self._highlightMode);
 
             if (commitEditor) {
                 self.dispatchEventToListeners("metrics edited");
                 self.update();
             }
         };
 
         var allProperties = this.inlineStyle.allProperties;
         for (var i = 0; i < allProperties.length; ++i) {
             var property = allProperties[i];
             if (property.name !== context.styleProperty || property.inactive)
                 continue;
 
             this.previousPropertyDataCandidate = property;
             property.setValue(userInput, commitEditor, true, callback);
             return;
         }
 
         this.inlineStyle.appendProperty(context.styleProperty, userInput, callback);
     },
 
     editingCommitted: function(element, userInput, previousContent, context)
     {
         this.editingEnded(element, context);
         this._applyUserInput(element, userInput, previousContent, context, true);
     },
 
     __proto__: WebInspector.SidebarPane.prototype
 }