DevTools: Show asynchronous call stacks on frontend.

Source/devtools/front_end/Placard.js

Index: Source/devtools/front_end/Placard.js
diff --git a/Source/devtools/front_end/Placard.js b/Source/devtools/front_end/Placard.js
index 4e91a66907c1a5580f935cd4ad73113884493557..eebdf609b0892fea43624d69bd569830e0915219 100644
--- a/Source/devtools/front_end/Placard.js
+++ b/Source/devtools/front_end/Placard.js
@@ -1,5 +1,6 @@
 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
+ * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
@@ -30,18 +31,11 @@
  */
 WebInspector.Placard = function(title, subtitle)
 {
-    this.element = document.createElement("div");
-    this.element.className = "placard";
+    this.element = document.createElementWithClass("div", "placard");
     this.element.placard = this;
 
-    this.titleElement = document.createElement("div");
-    this.titleElement.className = "title";
-
-    this.subtitleElement = document.createElement("div");
-    this.subtitleElement.className = "subtitle";
-
-    this.element.appendChild(this.subtitleElement);
-    this.element.appendChild(this.titleElement);
+    this.subtitleElement = this.element.createChild("div", "subtitle");
+    this.titleElement = this.element.createChild("div", "title");
 
     this.title = title;
     this.subtitle = subtitle;
@@ -91,10 +85,23 @@ WebInspector.Placard.prototype = {
             this.deselect();
     },
 
+    /** @return {!WebInspector.PlacardGroup|undefined} */
+    get group()

[yurys, 2013/12/06 12:36:54]

style nit: we've decided to avoid getters/setters in the new code in favor of
methods, so please use methods when possible.

[aandrey, 2013/12/06 16:09:24]

Done.

+    {
+        return this._group;
+    },
+
+    set group(x)
+    {
+        this._group = x;
+    },
+
     select: function()
     {
         if (this._selected)
             return;
+        if (this._group)
+            this._group.expanded = true;
         this._selected = true;
         this.element.addStyleClass("selected");
     },
@@ -116,3 +123,80 @@ WebInspector.Placard.prototype = {
     {
     }
 }
+
+/**
+ * @constructor
+ * @param {string} title
+ * @param {!Array.<!WebInspector.Placard>} placards
+ */
+WebInspector.PlacardGroup = function(title, placards)
+{
+    this.element = document.createElementWithClass("div", "placard placard-group");
+    this.element.addEventListener("click", this._clicked.bind(this), false);
+    this.placards = placards;
+    this._expanded = false;
+    this.title = title;
+
+    for (var i = 0; i < placards.length; ++i)
+        placards[i].group = this;
+}
+
+WebInspector.PlacardGroup.prototype = {
+    /** @return {string} */
+    get title()

[yurys, 2013/12/06 12:36:54]

ditto.

[aandrey, 2013/12/06 16:09:24]

Done.

+    {
+        return this._title;
+    },
+
+    set title(x)
+    {
+        this._title = x;
+        this.element.textContent = x;
+    },
+
+    /** @return {boolean} */
+    get expanded()
+    {
+        return this._expanded;
+    },
+
+    set expanded(x)
+    {
+        if (this._expanded === x)
+            return;
+        if (x) {
+            var parent = this.element.parentElement;
+            if (!parent)
+                return;
+            var sibling = this.element.nextSibling;
+            for (var i = 0, placard; placard = this.placards[i]; ++i) {

[yurys, 2013/12/06 12:36:54]

style: i < this.placards.length, we don't use this tyle of iteration in the
front-end code.

[aandrey, 2013/12/06 16:09:24]

Done.

+                placard.element.addStyleClass("grouped");
+                parent.insertBefore(placard.element, sibling);
+            }
+        } else {
+            if (this.selected)
+                return;
+            for (var i = 0, placard; placard = this.placards[i]; ++i) {

[yurys, 2013/12/06 12:36:54]

ditto.

[aandrey, 2013/12/06 16:09:24]

Done.

+                placard.element.removeStyleClass("grouped");
+                placard.element.remove();
+            }
+        }
+        this._expanded = x;
+    },
+
+    /** @return {boolean} */
+    get selected()
+    {
+        for (var i = 0, placard; placard = this.placards[i]; ++i) {

[yurys, 2013/12/06 12:36:54]

ditto

[aandrey, 2013/12/06 16:09:24]

Done.

+            if (placard.selected)
+                return true;
+        }
+        return false;
+    },
+
+    _clicked: function()
+    {
+        this.expanded = !this._expanded;
+        this.element.enableStyleClass("expanded", this._expanded);
+    }
+}