DevTools: [SSP] fix design glitches in "Insert New Rule"

The patch does the following:
- adds tooltip for the "Insert New Rule" button
- repositions button via absolute positioning
- does not show "via inspector" title in "Insert New Rule" if it's going
to be added in actual stylesheet.

R=pfeldman, vsevik
BUG=402461

Review URL: https://codereview.chromium.org/468973002

git-svn-id: svn://svn.chromium.org/blink/trunk@180204 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js

@@ -1138,6 +1138,7 @@ WebInspector.StylePropertiesSection = function(parentPane, styleRule, editable,
 
     if (this.editable && this.rule) {
         var newRuleButton = closeBrace.createChild("div", "sidebar-pane-button-new-rule");
+        newRuleButton.title = WebInspector.UIString("Insert Style Rule");
         newRuleButton.addEventListener("click", this._onNewRuleClick.bind(this), false);
     }
 
@@ -1889,7 +1890,8 @@ WebInspector.ComputedStylePropertiesSection.prototype = {
  */
 WebInspector.BlankStylePropertiesSection = function(stylesPane, defaultSelectorText, styleSheetId, ruleLocation, insertAfterRule)
 {
-    WebInspector.StylePropertiesSection.call(this, stylesPane, {selectorText: defaultSelectorText, rule: {isViaInspector: true}}, true, false);
+    var styleSheetHeader = WebInspector.cssModel.styleSheetHeaderForId(styleSheetId);
+    WebInspector.StylePropertiesSection.call(this, stylesPane, {selectorText: defaultSelectorText, rule: {isViaInspector: styleSheetHeader.isViaInspector()}}, true, false);
     this._ruleLocation = ruleLocation;
     this._styleSheetId = styleSheetId;
     if (insertAfterRule)

third_party/WebKit/Source/devtools/front_end/elementsPanel.css

@@ -191,6 +191,7 @@
     background-clip: padding;
     -webkit-user-select: text;
     border-bottom: 1px solid rgb(191, 191, 191);
+    position: relative;
 }
 
 .styles-pane .sidebar-separator {

third_party/WebKit/Source/devtools/front_end/sidebarPane.css

@@ -198,9 +198,11 @@
 .sidebar-pane-button-new-rule {
     background-image: url(Images/paneAddButtons.png);
     background-position: 0 0;
+    position: absolute;
     height: 16px;
     width: 22px;
-    float: right;
+    right: 0px;
+    bottom: 1px;
     visibility: hidden;
 }