Bug 89586 - Web Inspector: Add support for keyboard increment / decrement on numbers in attributes in Elements Panel
Summary: Web Inspector: Add support for keyboard increment / decrement on numbers in a...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (Deprecated) (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Minor
Assignee: Vivek Galatage
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2012-06-20 11:31 PDT by Brian Grinstead
Modified: 2012-07-05 07:46 PDT (History)
12 users (show)

See Also:


Attachments
Screenshot of number highlighted in Elements Panel (65.96 KB, image/png)
2012-06-20 11:31 PDT, Brian Grinstead
no flags Details
Patch (6.69 KB, patch)
2012-07-04 03:37 PDT, Vivek Galatage
no flags Details | Formatted Diff | Diff
Patch (11.89 KB, patch)
2012-07-04 23:23 PDT, Vivek Galatage
no flags Details | Formatted Diff | Diff
Patch (19.21 KB, patch)
2012-07-05 03:42 PDT, Vivek Galatage
no flags Details | Formatted Diff | Diff
Patch (19.21 KB, patch)
2012-07-05 06:02 PDT, Vivek Galatage
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Brian Grinstead 2012-06-20 11:31:03 PDT
When I press up or down on a number in the Styles sidebar, it causes the number to move up or down by one.  Sometimes I want to do the same thing with an attribute (either an inline style, or just a number like `colspan`).  The up/down shortcuts are not hooked up in this case.  See the attached image for example.
Comment 1 Brian Grinstead 2012-06-20 11:31:46 PDT
Created attachment 148612 [details]
Screenshot of number highlighted in Elements Panel
Comment 2 Vivek Galatage 2012-07-04 03:37:51 PDT
Created attachment 150760 [details]
Patch
Comment 3 Pavel Feldman 2012-07-04 04:53:24 PDT
Comment on attachment 150760 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=150760&action=review

> Source/WebCore/inspector/front-end/ElementsTreeOutline.js:1193
> +        function handleKeyDownEvent(event)

This looks like a lot of copy-paste. Could you extract this functionality from the styles sidebar and make it re-usable instead?
Comment 4 Vivek Galatage 2012-07-04 23:23:13 PDT
Created attachment 150882 [details]
Patch
Comment 5 Pavel Feldman 2012-07-04 23:54:35 PDT
Comment on attachment 150882 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=150882&action=review

> Source/WebCore/inspector/front-end/UIUtils.js:279
> +WebInspector.alteredFloatNumber = function(number, event)

Please annotate with jsdoc and compile using compile-front-end.py.
This method is private (rename to _alteredFloatNumber)

> Source/WebCore/inspector/front-end/UIUtils.js:299
> +    if (!String(result).match(WebInspector.StylesSidebarPane.CSSNumberRegex))

This looks like a bad dependency. Utility class should not depend on the styles panel. You should move this check to the call site.

> Source/WebCore/inspector/front-end/UIUtils.js:305
> +WebInspector.handleUpOrDownValue = function(event, element, suggestionHanlder, finishHandler)

Please annotate.

> Source/WebCore/inspector/front-end/UIUtils.js:334
> +        number = WebInspector.StylesSidebarPane.alteredHexNumber(matches[2], event);

Should also be moved into this class as a private member.
Comment 6 Vivek Galatage 2012-07-05 00:00:22 PDT
(In reply to comment #5)
> (From update of attachment 150882 [details])
> View in context: https://bugs.webkit.org/attachment.cgi?id=150882&action=review
> 
> > Source/WebCore/inspector/front-end/UIUtils.js:279
> > +WebInspector.alteredFloatNumber = function(number, event)
> 
> Please annotate with jsdoc and compile using compile-front-end.py.
> This method is private (rename to _alteredFloatNumber)
> 

Will do.

> > Source/WebCore/inspector/front-end/UIUtils.js:299
> > +    if (!String(result).match(WebInspector.StylesSidebarPane.CSSNumberRegex))
> 
> This looks like a bad dependency. Utility class should not depend on the styles panel. You should move this check to the call site.
> 

Ahh.. Thats really bad. Missed these migrations. Sure will update them as well.

> > Source/WebCore/inspector/front-end/UIUtils.js:305
> > +WebInspector.handleUpOrDownValue = function(event, element, suggestionHanlder, finishHandler)
> 
> Please annotate.
> 

Sure, will annotate it.

> > Source/WebCore/inspector/front-end/UIUtils.js:334
> > +        number = WebInspector.StylesSidebarPane.alteredHexNumber(matches[2], event);
> 
> Should also be moved into this class as a private member.

Will do.

Thank you for the comments. Will update all of them and re-upload the patch.
Comment 7 Alexander Pavlov (apavlov) 2012-07-05 01:01:04 PDT
(In reply to comment #5)
> (From update of attachment 150882 [details])
> View in context: https://bugs.webkit.org/attachment.cgi?id=150882&action=review
> 
> > Source/WebCore/inspector/front-end/UIUtils.js:279
> > +WebInspector.alteredFloatNumber = function(number, event)
> 
> > Source/WebCore/inspector/front-end/UIUtils.js:305
> > +WebInspector.handleUpOrDownValue = function(event, element, suggestionHanlder, finishHandler)

Vivek, could I ask you to give these methods more specific names now that you are moving them inside WebInspector? The existing names were comprehensible while inside StylesSidebarPane, but in UIUtils, it is hard to understand what they. Do. Maybe handleUpOrDownFloatValue[Change]() (and something similar for alteredFloatNumber)...
Comment 8 Vivek Galatage 2012-07-05 03:42:45 PDT
Created attachment 150915 [details]
Patch
Comment 9 Vivek Galatage 2012-07-05 04:32:22 PDT
(In reply to comment #7)
> (In reply to comment #5)
> > (From update of attachment 150882 [details] [details])
> > View in context: https://bugs.webkit.org/attachment.cgi?id=150882&action=review
> > 
> > > Source/WebCore/inspector/front-end/UIUtils.js:279
> > > +WebInspector.alteredFloatNumber = function(number, event)
> > 
> > > Source/WebCore/inspector/front-end/UIUtils.js:305
> > > +WebInspector.handleUpOrDownValue = function(event, element, suggestionHanlder, finishHandler)
> 
> Vivek, could I ask you to give these methods more specific names now that you are moving them inside WebInspector? The existing names were comprehensible while inside StylesSidebarPane, but in UIUtils, it is hard to understand what they. Do. Maybe handleUpOrDownFloatValue[Change]() (and something similar for alteredFloatNumber)...

Thank you Alexander, I have renamed the method to handleElementValueModifications and other methods as: _modifiedHexValue & _modifiedFloatNumber.
Comment 10 Alexander Pavlov (apavlov) 2012-07-05 05:36:00 PDT
Comment on attachment 150915 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=150915&action=review

The patch works for me.

Please fix the nit before landing (guess Pavel will r+ cq+ an updated patch automatically :)) Thanks for handling this feature.

> Source/WebCore/inspector/front-end/MetricsSidebarPane.js:317
> +        WebInspector.handleElementValueModifications(event, element, finishHandler.bind(this), undefined, customNumberHandler.bind(this))

You don't need to bind customNumberHandler, since it does not address "this" or any of its properties. This line is also missing a trailing semicolon (;)
Comment 11 Pavel Feldman 2012-07-05 05:44:51 PDT
Comment on attachment 150915 [details]
Patch

Looks good. Please fix according to Alexander's comments.
Comment 12 Vivek Galatage 2012-07-05 06:02:40 PDT
Created attachment 150930 [details]
Patch
Comment 13 Vivek Galatage 2012-07-05 06:05:11 PDT
(In reply to comment #11)
> (From update of attachment 150915 [details])
> Looks good. Please fix according to Alexander's comments.

Thank you Pavel and Alexander for your quick reviews. Uploaded the new patch.
Comment 14 WebKit Review Bot 2012-07-05 07:20:13 PDT
Comment on attachment 150930 [details]
Patch

Clearing flags on attachment: 150930

Committed r121902: <http://trac.webkit.org/changeset/121902>
Comment 15 WebKit Review Bot 2012-07-05 07:20:20 PDT
All reviewed patches have been landed.  Closing bug.
Comment 16 Brian Grinstead 2012-07-05 07:46:33 PDT
(In reply to comment #13)
> (In reply to comment #11)
> > (From update of attachment 150915 [details] [details])
> > Looks good. Please fix according to Alexander's comments.
> 
> Thank you Pavel and Alexander for your quick reviews. Uploaded the new patch.

Vivek, thank you so much for taking care of this - can't wait to check it out!