v3 UI's time range slider is harder to use than that of v2 UI
authorrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 6 Jan 2016 20:26:58 +0000 (20:26 +0000)
committerrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 6 Jan 2016 20:26:58 +0000 (20:26 +0000)
commit91d0f074b8f8dc53402270356b5a7a74b1644958
tree19abc5055b20e6cb2a0fdaab00858bf687411252
parentd2937c996722bda4ec9fd92adf225624f5d4f7e1
v3 UI's time range slider is harder to use than that of v2 UI
https://bugs.webkit.org/show_bug.cgi?id=152780

Reviewed by Antti Koivisto.

Improved the time range slider by using a cubic mapping to time range and providing a text field
to directly edit the number of days to show.

Now an user can enter the text mode to directly edit the number of days to show by clicking on
the number of days (text field is always there with opacity=0).

* public/v3/pages/charts-toolbar.js:
(ChartsToolbar): Store the minimum and maximum number of days allowed. Also rename _inputElement
to _slider and added a new type=number text field as _editor.
(ChartsToolbar.prototype.render):
(ChartsToolbar.prototype.setStartTime): Exit the text mode when the number of days is changed by
an URL state transition (i.e. back/forward navigation).
(ChartsToolbar.prototype._setInputElementValue): Added. Updates the values of _slider and _editor.
(ChartsToolbar.prototype._enterTextMode): Added. Hide the elements used by the slider mode and
show the text field.
(ChartsToolbar.prototype._exitTextMode): Added. Does the opposite.
(ChartsToolbar.prototype._sliderValueMayHaveChanged): Renamed from _inputValueMayHaveChanged.
(ChartsToolbar.prototype._editorValueMayHaveChanged): Added. Similar to _sliderValueMayHaveChanged
but also corrects the value of _editor if needed.
(ChartsToolbar.prototype._callNumberOfDaysCallback): Extracted from _inputValueMayHaveChanged.
Also fixed a bug that we didn't update the URL state when the change event was fired without
modifying the effective number of days.
(ChartsToolbar.cssTemplate): Tweaked the style to support the new mode. Also set a fixed width on
the span showing the number of days in the slider mode.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@194651 268f45cc-cd09-0410-ab3c-d52691b4dbfc
Websites/perf.webkit.org/ChangeLog
Websites/perf.webkit.org/public/v3/pages/charts-toolbar.js