Use simple CSS selectors to identify elements in Layer's panel tree view

Drive-by: fix navigation to Elements panel via context menu.

BUG=

Review URL: https://codereview.chromium.org/206123005

git-svn-id: svn://svn.chromium.org/blink/trunk@169662 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/LayerTree.js

@@ -159,7 +159,7 @@ WebInspector.LayerTree.prototype = {
         var layer = /** @type {!WebInspector.Layer} */ (node.representedObject);
         if (!layer)
             return;
-        var nodeId = layer.nodeId();
+        var nodeId = layer.nodeIdForSelfOrAncestor();
         if (!nodeId)
             return;
         var domNode = WebInspector.domAgent.nodeForId(nodeId);
@@ -201,7 +201,7 @@ WebInspector.LayerTreeElement.prototype = {
         var node = nodeId ? WebInspector.domAgent.nodeForId(nodeId) : null;
         var title = document.createDocumentFragment();
         title.createChild("div", "selection");
-        title.appendChild(document.createTextNode(node ? WebInspector.DOMPresentationUtils.fullQualifiedSelector(node, false) :  "#" + layer.id()));
+        title.appendChild(document.createTextNode(node ? WebInspector.DOMPresentationUtils.simpleSelector(node) : "#" + layer.id()));
         var details = title.createChild("span", "dimmed");
         details.textContent = WebInspector.UIString(" (%d × %d)", layer.width(), layer.height());
         this.title = title;

third_party/WebKit/Source/devtools/front_end/Layers3DView.js

@@ -380,7 +380,7 @@ WebInspector.Layers3DView.prototype = {
     _onContextMenu: function(event)
     {
         var layer = this._layerFromEventPoint(event);
-        var nodeId = layer && layer.nodeId();
+        var nodeId = layer && layer.nodeIdForSelfOrAncestor();
         if (!nodeId)
             return;
         var domNode = WebInspector.domAgent.nodeForId(nodeId);