DevTools: Show asynchronous call stacks on frontend.

Source/devtools/front_end/Placard.js

 /*
  * 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
  * 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
  *    notice, this list of conditions and the following disclaimer in the
  *    documentation and/or other materials provided with the distribution.
  *
@@ skipping 10 matching lines @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @constructor
  * @param {string} title
  * @param {string} subtitle
  */
 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;
     this.selected = false;
 }
 
 WebInspector.Placard.prototype = {
     /** @return {string} */
     get title()
     {
@@ skipping 29 matching lines @@
     },
 
     set selected(x)
     {
         if (x)
             this.select();
         else
             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");
     },
 
     deselect: function()
     {
         if (!this._selected)
             return;
         this._selected = false;
         this.element.removeStyleClass("selected");
     },
 
     toggleSelected: function()
     {
         this.selected = !this.selected;
     },
 
     discard: function()
     {
     }
 }
+
+/**
+ * @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);
+    }
+}