DevTools: Update styling for rendering drawer panel

third_party/WebKit/Source/devtools/front_end/main/RenderingOptions.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 23 matching lines @@
  * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.RenderingOptionsView = function()
 {
     WebInspector.VBox.call(this, true);
     this.registerRequiredCSS("main/renderingOptions.css");
 
     /** @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"));
     this._mediaSelect.addEventListener("change", this._mediaToggled.bind(this), false);
     this._mediaSelect.disabled = true;
 
     WebInspector.targetManager.observeTargets(this, WebInspector.Target.Type.Page);
 }
 
 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);
     },
 
     /**
      * @param {string} setterName
      */
     _settingToggled: function(setterName)
     {
         var enabled = this._settings.get(setterName).checked;
         var targets = WebInspector.targetManager.targets(WebInspector.Target.Type.Page);
@@ skipping 69 matching lines @@
      * @param {!WebInspector.Context} context
      * @param {string} actionId
      * @return {boolean}
      */
     handleAction: function(context, actionId)
     {
         WebInspector.inspectorView.showViewInDrawer("rendering");
         return true;
     }
 }