Fixes 590477: Style pane numeric property change modifier shortcuts are undiscoverable. Shift mouse…

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

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 2896 matching lines @@
          * @this {WebInspector.StylesSidebarPane.CSSPropertyPrompt}
          */
         function customNumberHandler(prefix, number, suffix)
         {
             if (number !== 0 && !suffix.length && WebInspector.CSSMetadata.isLengthProperty(this._treeElement.property.name))
                 suffix = "px";
             return prefix + number + suffix;
         }
 
         // Handle numeric value increment/decrement only at this point.
-        if (!this._isEditingName && WebInspector.handleElementValueModifications(event, this._treeElement.valueElement, finishHandler.bind(this), this._isValueSuggestion.bind(this), customNumberHandler.bind(this)))
+        if (!this._isEditingName && WebInspector.handleElementValueModifications(event, this._treeElement.valueElement, finishHandler.bind(this), this._isValueSuggestion.bind(this), customNumberHandler.bind(this))) {

[lushnikov, 2016/03/25 18:48:32]

style: omit braces

             return true;
+        }
 
         return false;
     },
 
+     /**
+     * @override
+     */
+    onEditStart: function()

[lushnikov, 2016/03/25 18:48:32]

I think we can simplify this even further.

Let's not add the onEditStart and onEditDone hooks to keep the TextPrompt
interface minimal.
Instead, the contents of this method can move into the end of
WI.StylesSidebarPane.CSSPropertyPrompt constructor.

In this case, we would not be able to call both this.title() and this.text()
methods in the if-condition, as the prompt is not attached yet. However, this is
not an issue:
- this.text() could be just substituted with manual fetching of text:

  var text = isEditingName ? treeElement.nameElement.textContent :
treeElement.valueElement.textContent;

- this.title() should not depend on the prompt attachment. (see comments in
TextPrompt.js)

+    {
+        // if a css value is being edited that has a numeric substring, hint that precision modifier shortcuts are available

[lushnikov, 2016/03/25 18:48:32]

style: comments should start with capital letter and finish with dot.

+        if (!this._isEditingName && !this.title() && this.text().match(/\d+/))
+            this.setTitle(WebInspector.UIString("Increment/decrement with mousewheel or up/down keys. %s: ±100, Shift: ±10, Alt: ±0.1", WebInspector.isMac() ? "Cmd" : "Ctrl"));
+    },
+
     /**
      * @param {string} word
      * @return {boolean}
      */
     _isValueSuggestion: function(word)
     {
         if (!word)
             return false;
         word = word.toLowerCase();
         return this._cssCompletions.keySet().hasOwnProperty(word);
@@ skipping 151 matching lines @@
     WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, onNodeChanged);
     onNodeChanged();
     return button;
 
     function onNodeChanged()
     {
         var node = WebInspector.context.flavor(WebInspector.DOMNode);
         button.setEnabled(!!node);
     }
 }