Timeline: add layer details view

Source/devtools/front_end/timeline/LayerDetailsView.js

 /*
  * 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:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 70 matching lines @@
     "layerForScrollbar": WebInspector.UIString("Layer for scrollbar."),
     "layerForScrollingContainer": WebInspector.UIString("Layer for scrolling container."),
     "layerForForeground": WebInspector.UIString("Layer for foreground."),
     "layerForBackground": WebInspector.UIString("Layer for background."),
     "layerForMask": WebInspector.UIString("Layer for mask."),
     "layerForVideoOverlay": WebInspector.UIString("Layer for video overlay.")
 };
 
 WebInspector.LayerDetailsView.prototype = {
     /**
-     * @param {!WebInspector.Layers3DView.ActiveObject} activeObject
+     * @param {?WebInspector.Layers3DView.ActiveObject} activeObject
      */
     setObject: function(activeObject)
     {
         this._layer = activeObject ? activeObject.layer : null;
         this._scrollRectIndex = activeObject ? activeObject.scrollRectIndex : null;
         if (this.isShowing())
             this.update();
     },
 
     wasShown: function()
@@ skipping 72 matching lines @@
 
     /**
      * @param {!Array.<string>} compositingReasons
      */
     _updateCompositingReasons: function(compositingReasons)
     {
         if (!compositingReasons || !compositingReasons.length) {
             this._compositingReasonsCell.textContent = "n/a";
             return;
         }
-        var fragment = createDocumentFragment();
+        this._compositingReasonsCell.removeChildren();
+        var list = this._compositingReasonsCell.createChild("ul");
         for (var i = 0; i < compositingReasons.length; ++i) {
-            if (i)
-                fragment.createTextChild(",");
-            var span = createElement("span");
-            span.title = WebInspector.LayerDetailsView.CompositingReasonDetail[compositingReasons[i]] || "";
-            span.textContent = compositingReasons[i];
-            fragment.appendChild(span);
+            var text = WebInspector.LayerDetailsView.CompositingReasonDetail[compositingReasons[i]] || compositingReasons[i];
+            // If the text is more than one word but does not terminate with period, add the period.
+            if (/\s.*[^.]$/.test(text))
+                text += ".";
+            list.createChild("li").textContent = text;
         }
-        this._compositingReasonsCell.removeChildren();
-        this._compositingReasonsCell.appendChild(fragment);
     },
 
     __proto__: WebInspector.VBox.prototype
 }