DevTools: Update styling for rendering drawer panel

third_party/WebKit/Source/devtools/front_end/main/RenderingOptions.js

Index: third_party/WebKit/Source/devtools/front_end/main/RenderingOptions.js
diff --git a/third_party/WebKit/Source/devtools/front_end/main/RenderingOptions.js b/third_party/WebKit/Source/devtools/front_end/main/RenderingOptions.js
index f806dd53665addc6637d487087234d655881752b..b85193b774a7d48973b6f409c959b3c6c57ed432 100644
--- a/third_party/WebKit/Source/devtools/front_end/main/RenderingOptions.js
+++ b/third_party/WebKit/Source/devtools/front_end/main/RenderingOptions.js
@@ -41,18 +41,40 @@ WebInspector.RenderingOptionsView = function()
     /** @type {!Map.<string, !Element>} */
     this._settings = new Map();
 
-    this._appendCheckbox(WebInspector.UIString("Enable paint flashing"), "setShowPaintRects");
-    this._appendCheckbox(WebInspector.UIString("Show layer borders"), "setShowDebugBorders");
-    this._appendCheckbox(WebInspector.UIString("Show FPS meter"), "setShowFPSCounter");
-    var scrollingTitle = WebInspector.UIString("Shows areas of the page that slow down scrolling:\nTouch and mousewheel event listeners can delay scrolling.\nSome areas need to repaint their content when scrolled.");

[lushnikov, 2016/04/20 23:50:32]

why do we drop this? Lets' still show this on hover - it's informative. 

[luoe, 2016/04/22 00:44:50]

Done.

-    this._appendCheckbox(WebInspector.UIString("Show scrolling perf issues"), "setShowScrollBottleneckRects", scrollingTitle);
+    var options = [
+        {
+            label: WebInspector.UIString("Paint Flashing"),
+            subtitle: WebInspector.UIString("Highlights areas of the page that need to be repainted"),
+            setterName: "setShowPaintRects"
+        },
+        {
+            label: WebInspector.UIString("Layer Borders"),
+            subtitle: WebInspector.UIString("Shows layer borders (orange/olive) and tiles (cyan)"),
+            setterName: "setShowDebugBorders"
+        },
+        {
+            label: WebInspector.UIString("FPS Meter"),
+            subtitle: WebInspector.UIString("Plots frames per second, frame rate distribution, and GPU memory"),
+            setterName: "setShowFPSCounter"
+        },
+        {
+            label: WebInspector.UIString("Scrolling Performance Issues"),
+            subtitle: WebInspector.UIString("Shows areas of the page that slow down scrolling"),
+            setterName: "setShowScrollBottleneckRects"
+        }
+    ];
+    for (var i = 0; i < options.length; i++)
+        this._appendCheckbox(options[i].label, options[i].setterName, options[i].subtitle);
 
-    // CSS media.
-    var mediaRow = this.contentElement.createChild("div", "media-row");
-    var checkboxLabel = createCheckboxLabel(WebInspector.UIString("Emulate media"), false);
+    this.contentElement.createChild("div").classList.add("panel-section-separator");
+
+    var cssMediaSubtitle = WebInspector.UIString("Forces media type for testing print and screen styles");
+    var checkboxLabel = createCheckboxLabel(WebInspector.UIString("Emulate CSS Media"), false, cssMediaSubtitle);
     this._mediaCheckbox = checkboxLabel.checkboxElement;
     this._mediaCheckbox.addEventListener("click", this._mediaToggled.bind(this), false);
-    mediaRow.appendChild(checkboxLabel);
+    this.contentElement.appendChild(checkboxLabel);
+
+    var mediaRow = this.contentElement.createChild("div", "media-row");
     this._mediaSelect = mediaRow.createChild("select", "chrome-select");
     this._mediaSelect.appendChild(new Option(WebInspector.UIString("print"), "print"));
     this._mediaSelect.appendChild(new Option(WebInspector.UIString("screen"), "screen"));
@@ -66,15 +88,13 @@ WebInspector.RenderingOptionsView.prototype = {
     /**
      * @param {string} label
      * @param {string} setterName
-     * @param {string=} title
+     * @param {string=} subtitle
      */
-    _appendCheckbox: function(label, setterName, title)
+    _appendCheckbox: function(label, setterName, subtitle)
     {
-        var checkboxLabel = createCheckboxLabel(label, false);
+        var checkboxLabel = createCheckboxLabel(label, false, subtitle);
         this._settings.set(setterName, checkboxLabel.checkboxElement);
         checkboxLabel.checkboxElement.addEventListener("click", this._settingToggled.bind(this, setterName));
-        if (title)
-            checkboxLabel.title = title;
         this.contentElement.appendChild(checkboxLabel);
     },