DevTools: minor UI tweaks in the settings UI.

Source/devtools/front_end/SettingsScreen.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 696 matching lines @@
 {
     WebInspector.SettingsTab.call(this, WebInspector.UIString("Port Forwarding"), "workspace-tab-content");
 }
 
 WebInspector.TetheringSettingsTab.prototype = {
     wasShown: function()
     {
         if (this._paragraphElement)
             return;
 
-        this._paragraphElement = this._appendSection(WebInspector.UIString("Mappings"));
         WebInspector.SettingsTab.prototype.wasShown.call(this);
+
+        var labelElement = this._appendSection();
+        labelElement.addStyleClass("tethering-help-info");
+        labelElement.textContent =
+            WebInspector.UIString("Creates a listen TCP port on your device that maps to a particular TCP port accessible from the host machine.");
+        labelElement.createChild("br");
+        labelElement.createChild("div", "tethering-help-title-left").textContent = WebInspector.UIString("Device port");
+        labelElement.createChild("div", "tethering-help-title-right").textContent = WebInspector.UIString("Target");
+
+        this._paragraphElement = this._appendSection();
         var mappingEntries = WebInspector.settings.portForwardings.get();
         for (var i = 0; i < mappingEntries.length; ++i)
             this._addMappingRow(mappingEntries[i].port, mappingEntries[i].location, false);
         if (!mappingEntries.length)
             this._addMappingRow("", "", true);
         this._save();
     },
 
     /**
      * @param {string} port
      * @param {string} location
      * @param {boolean} focus
      * @return {Element}
      */
     _addMappingRow: function(port, location, focus)
     {
         var mappingRow = this._paragraphElement.createChild("div", "workspace-settings-row");
-        var portElement = mappingRow.createChild("input");
+        var portElement = mappingRow.createChild("input", "tethering-port-input");
         portElement.type = "text";
         portElement.value = port || "";
         if (!port)
             portElement.placeholder = "8080";
         portElement.addEventListener("keydown", this._editTextInputKey.bind(this, true), true);
         portElement.addEventListener("blur", this._save.bind(this), true);
         portElement.addEventListener("input", this._validatePort.bind(this, portElement), true);
 
         var locationElement = mappingRow.createChild("input");
         locationElement.type = "text";
@@ skipping 227 matching lines @@
         if (this._settingsScreen)
             this._settingsScreen.hide();
     },
 
     resize: function()
     {
         if (this._settingsScreen && this._settingsScreen.isShowing())
             this._settingsScreen.doResize();
     }
 }