Timeline: add layer details view

Source/devtools/front_end/timeline/LayerDetailsView.js

Index: Source/devtools/front_end/timeline/LayerDetailsView.js
diff --git a/Source/devtools/front_end/layers/LayerDetailsView.js b/Source/devtools/front_end/timeline/LayerDetailsView.js
similarity index 95%
rename from Source/devtools/front_end/layers/LayerDetailsView.js
rename to Source/devtools/front_end/timeline/LayerDetailsView.js
index b32ca347d725f27aa7b0b1ecc0a7c3a4ccf81b90..d32c5996c0d721da03e75f9e763fc07aa671443b 100644
--- a/Source/devtools/front_end/layers/LayerDetailsView.js
+++ b/Source/devtools/front_end/timeline/LayerDetailsView.js
@@ -88,7 +88,7 @@ WebInspector.LayerDetailsView.CompositingReasonDetail = {
 
 WebInspector.LayerDetailsView.prototype = {
     /**
-     * @param {!WebInspector.Layers3DView.ActiveObject} activeObject
+     * @param {?WebInspector.Layers3DView.ActiveObject} activeObject
      */
     setObject: function(activeObject)
     {
@@ -181,17 +181,15 @@ WebInspector.LayerDetailsView.prototype = {
             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