Tab-based shortcuts on review request page fields.
Review Request #10929 — Created Feb. 29, 2020 and updated
This review request is for the 2nd part of "selecting review request
field" project. The goal of this project is to havetab
-based keybaord
shortcuts on review request page fields. (e.g., hittingtab-d
focuses
"Description" field).This project is dependent on "Keyboard shortcut registry"
The project includes a
ShortcutHelpDialog
which dynamically renders
available keyboard shortcuts on each page as well as their descriptions.
A screenshot is attached below.
Press
tab
andh
on review request page and the dialog is shown (the
shortcuts are displayed as well).Press
tab
andd
on review request page and Description field is
focused.Press
tab
andh
on dashboard page and the help dialog is shown.All unit tests passed.
Summary | ID | Author |
---|---|---|
20d4da8c4268f33c102486061da94fc8a66af18c | Jay | |
ff48beaa3d798a3d2fe07b612c7d561064db47f7 | Jay | |
a324636d864dd8215f692e85425d4e2cef4d0ef4 | Jay | |
18847f629b301aeb2de567989234ed6690b0b73a | Jay | |
6e8c74bbf63591f72a84589f93add4a54a063020 | Jay | |
a2a94100711811603e545a28e1d2ce5c37db92dd | Jay | |
1c9b40db935e92a8239a869cbbe14f5cf1388a10 | Jay | |
538fe4586645ff2d69019858bd33e90c9edacf62 | Jay | |
a215d8037abd54564052af460459467f9c164ca6 | Jay | |
f0a4818f3dd6714626210881a0cf756f2873928a | Jay | |
025f1a15417988514668e3f4d1c8ffd5da988a74 | Jay | |
12de8777b68d977c3f5da45af4cac9eebe0487c2 | Jay | |
9ee4a792a8e1659f08a965ef0ad488b07286acb4 | Jay | |
f2f0041bfb6468fad5189b7cf464855befd67196 | Jay |
Description | From | Last Updated |
---|---|---|
We're trying to get rid of most of common.less and move to the CSS Component structure. This would be best … |
chipx86 | |
Can you wrap this in gettext() so the string can be localized? |
chipx86 | |
Looks like this would conflict with the other review request, right? That uses "docs," this uses "description." |
chipx86 | |
You can use $.ui.keyCode.TAB and 'H'.charCodeAt(0), respectively. It'd also be nice to be consistent with "KeyCode", rather than "Keycode". |
chipx86 | |
You can make use of chaining here: pageView.$el .trigger(....) .trigger(....) ....; |
chipx86 | |
It'd be nice to make these private methods (prefix with a _). |
chipx86 | |
This should use _.isEmpty(). |
chipx86 | |
These must be localized. You'll want to pass in the localized strings as parameters to the template. |
chipx86 | |
Right now, we should be using _.each() instead of Object.entries().forEach(). It has wider browser compatibility. We also cannot use fat … |
chipx86 | |
You should use if (entry[1].tabBaseCallback). We want to test if it's present and has a value, and this is the … |
chipx86 | |
Same here. |
chipx86 | |
We have to use var here, for browser compatibility. |
chipx86 | |
Missing a semicolon. |
chipx86 | |
This also needs to be localized. |
chipx86 | |
This should be const (and appear as the first variable -- we do defined variables and consts before undefined and … |
chipx86 | |
I don't think we need to call .render() anymore. .show() does this for us, iirc. |
chipx86 | |
We don't re-define this, so we should use const. |
chipx86 | |
Comments should go on their own line and be proper sentences (capitalization, punctuation, "the", etc.). |
chipx86 | |
Let's use _.size() here. It will guarantee the right thing for the browser it's running on. |
chipx86 | |
Two things that can improve this: Let's pull out innerText into a variable, so we can check it without re-fetching … |
chipx86 | |
Mind adding a comment about how this state is managed? |
chipx86 | |
We should just reference $.ui.keyCode.TAB. |
chipx86 | |
Instead of _.bind(), we should use =>. |
chipx86 | |
You can chain these: this.$el .on(...) .on(...) ...; The binding below can also be included in the chain. |
chipx86 | |
This is missing an "Args" section, documenting evt and isTabBasedShortcut. |
chipx86 | |
Docstring summaries must be a single line. How about: /** * Call a shortcut handler when a key or combination … |
chipx86 | |
This can be: const keyBinding = this.keyBindings[keys]; let func = (isTabBasedShortcut ? keyBinding.tabBasedShortcut : keyBinding.callback); |
chipx86 | |
Typo: "field" |
chipx86 | |
Can you place this alphabetically in the list of test files? |
chipx86 |
- Change Summary:
-
More changes,
tab-h
can trigger help dialog now. - Description:
-
~ This is the first code commit I did for the 2nd part of
~ "selecting review request field" project. ~ This review request is for the 2nd part of "selecting review request
~ field" project. The goal of this project is to have tab
-based keybaord+ shortcuts on review request page fields. (e.g., hitting tab-d
focuses+ "Description" field). This project is dependent on "Keyboard shortcut registry"
~ The goal is to add
tab
based keyboard shortcuts on review~ request page fields (e.g., hitting tab-d
focuses "Description"~ field). ~ ~ Currently we can trigger a help dialog that will be showing available
~ keyboard shortcuts on the page. This help dialog is called ~ ShortcutHelpDialogView
. Later changes may include passing in parameters~ to this dialog view and render available shortcuts dynamically. - My current change is adding a
keydown
detector inkeyBindingsUtils
- that can detect tab
key being held down. This can help- future development such as showing help popovers while tab
- key is held down and detecting tab
based key combinations. - Testing Done:
-
~ Hold
tab
on review request page and the log messages are~ Press
tab
andh
on review request page and the dialog is shown.- printed in console. ~ This code change has defects because it applies to any page
~ that inherits from RB.PageView
. It should be only working~ on review request
&review request draft
page.~ Press
tab
andd
on review request page and alert message is shown.~ ~ Press above key combinations outside review request page and nothing
+ happens. - Commits:
-
Summary ID Author 3dec5902e36f9da5eec25993418c4e88c667f80a Jay 3d82ba3525b1f48711372952ec94389951542d70 Jay 5acf1f77a465eb609535fade44747d64bbd5e00e Jay e63693dc2281dd08feaf4957f3ab57717c50a342 Jay 699106b138a1736c497fdb1ed23c5cbdd20d5605 Jay 564f1a61bd0833e912ffda3a11a4aad4ac703656 Jay 8616a7627c0439a2ae52d5f8fafc0ac993f97a8d Jay 5967295b5e9f0e38d0f3f1515d2772de918f5096 Jay fd424c91a0e592c0b5f11dbb1faa1e19c9741c4d Jay bc2f57a1f2cba6524203bb3ae77274294e979006 Jay ddafc7b61e713fcf655dfc27ad93f8de12e94e6f Jay 99f8bedd5fd6b9813e4bfc117efcd23b634ebb42 Jay f4147a3406a1b4d87cde33034a10c817d9628f13 Jay a8679c7266cb03fc2399bf74b968dcfa2d8a4467 Jay 3bdeb2c31a70dee756b17562ccc4a9a35654fa50 Jay bfccd8c8ecaab3a3325a6e47d3d4a64144a386f9 Jay - Diff:
-
Revision 2 (+361 -83)
Checks run (2 succeeded)
- Description:
-
This review request is for the 2nd part of "selecting review request
field" project. The goal of this project is to have tab
-based keybaordshortcuts on review request page fields. (e.g., hitting tab-d
focuses"Description" field). This project is dependent on "Keyboard shortcut registry"
~ Currently we can trigger a help dialog that will be showing available
~ keyboard shortcuts on the page. This help dialog is called ~ ShortcutHelpDialogView
. Later changes may include passing in parameters~ to this dialog view and render available shortcuts dynamically. ~ In this version, the shortcut help dialog can dynamically render available
~ shortcuts as well as their descriptions. ShortcutHelpDialog
finds~ available keyboard shortcuts on each page and display them in a well-formed ~ table. - Testing Done:
-
~ Press
tab
andh
on review request page and the dialog is shown.~ Press
tab
andh
on review request page and the dialog is shown (the+ shortcuts are displayed as well). ~ Press
tab
andd
on review request page and alert message is shown.~ Press
tab
andd
on my dashboard page and the dialog is shown.- - Press above key combinations outside review request page and nothing
- happens. - Commits:
-
Summary ID Author 5967295b5e9f0e38d0f3f1515d2772de918f5096 Jay fd424c91a0e592c0b5f11dbb1faa1e19c9741c4d Jay bc2f57a1f2cba6524203bb3ae77274294e979006 Jay ddafc7b61e713fcf655dfc27ad93f8de12e94e6f Jay 99f8bedd5fd6b9813e4bfc117efcd23b634ebb42 Jay f4147a3406a1b4d87cde33034a10c817d9628f13 Jay a8679c7266cb03fc2399bf74b968dcfa2d8a4467 Jay 3bdeb2c31a70dee756b17562ccc4a9a35654fa50 Jay bfccd8c8ecaab3a3325a6e47d3d4a64144a386f9 Jay 692bc1de7b67381c93c5ea43f031c9eee157f184 Jay 244c704e94e9e34347509d48363c7f501a68692c Jay f58b9c2186cf338a9865dfcbd662afda47aa3d62 Jay 48d8216594744ff5250794a3640ddc3a14274357 Jay 6f371824fd0811f94e8e277e3d696913b1cf92c6 Jay fe08e14bff73d7aa8b9df48886a0920d730bbc9d Jay 62258b670d02dad0fee90931ee62ddd9e69126b7 Jay 892c7dfbb1d3d29d2f305a665e58cd705a080b49 Jay 7d537165aea174b6a11e1c6e9752bdb342effa5f Jay a277f8cd7e1c60cf164a6200052a6d33ac84bbc1 Jay - Diff:
-
Revision 3 (+561 -181)
- Added Files:
Checks run (2 succeeded)
- Description:
-
This review request is for the 2nd part of "selecting review request
field" project. The goal of this project is to have tab
-based keybaordshortcuts on review request page fields. (e.g., hitting tab-d
focuses"Description" field). This project is dependent on "Keyboard shortcut registry"
~ In this version, the shortcut help dialog can dynamically render available
~ shortcuts as well as their descriptions. ShortcutHelpDialog
finds~ available keyboard shortcuts on each page and display them in a well-formed ~ The project includes a
ShortcutHelpDialog
which dynamically renders~ available keyboard shortcuts on each page as well as their descriptions. ~ A screenshot is attached below. - table. - Commits:
-
Summary ID Author 692bc1de7b67381c93c5ea43f031c9eee157f184 Jay 244c704e94e9e34347509d48363c7f501a68692c Jay f58b9c2186cf338a9865dfcbd662afda47aa3d62 Jay 48d8216594744ff5250794a3640ddc3a14274357 Jay 6f371824fd0811f94e8e277e3d696913b1cf92c6 Jay fe08e14bff73d7aa8b9df48886a0920d730bbc9d Jay 62258b670d02dad0fee90931ee62ddd9e69126b7 Jay 892c7dfbb1d3d29d2f305a665e58cd705a080b49 Jay 7d537165aea174b6a11e1c6e9752bdb342effa5f Jay a277f8cd7e1c60cf164a6200052a6d33ac84bbc1 Jay 62a05c8b533e6460c38ab0dbcbcd90e59fb8ea4b Jay 2c731c42f114684a9d28b02db306d384cebd23d8 Jay eef2c16a04bbf0ffd0c0ed2853dc805a5a0c211a Jay a301a25923ad03ba08f68360e8203167acb20bf2 Jay 10bf8f9a35233be9f9ef0cd2bac033ce9ba2fa18 Jay d46c9fb052ac011b5fa01054b9c2463b15d1dd1b Jay d67137093a82fae7b536f7dc1e1f01f60eec8c73 Jay 0aa3cec05c64a45177ff07025ebfb90db15b44d3 Jay 0fb02faaa9a34e9d87b5ae9c3846c1a3e4160576 Jay eee4b69cafa04f4b6ada4662172f7d264823020c Jay 20c64907abb9aaac171588f906a1b20743e17013 Jay - Diff:
-
Revision 4 (+620 -190)
- Removed Files:
- Added Files:
Checks run (2 succeeded)
- Commits:
-
Summary ID Author 62a05c8b533e6460c38ab0dbcbcd90e59fb8ea4b Jay 2c731c42f114684a9d28b02db306d384cebd23d8 Jay eef2c16a04bbf0ffd0c0ed2853dc805a5a0c211a Jay a301a25923ad03ba08f68360e8203167acb20bf2 Jay 10bf8f9a35233be9f9ef0cd2bac033ce9ba2fa18 Jay d46c9fb052ac011b5fa01054b9c2463b15d1dd1b Jay d67137093a82fae7b536f7dc1e1f01f60eec8c73 Jay 0aa3cec05c64a45177ff07025ebfb90db15b44d3 Jay 0fb02faaa9a34e9d87b5ae9c3846c1a3e4160576 Jay eee4b69cafa04f4b6ada4662172f7d264823020c Jay 20c64907abb9aaac171588f906a1b20743e17013 Jay 7c6dbaac53155d9254f8bbff944da5f06735c2d3 Jay 94475ce07d634af284836ba6dc32e824b6992734 Jay e1654205949a0b7914eecfd19b1651f78647213a Jay f563e3d5253e205ac1682954514aa70ff6e6c07b Jay 14c32b571c03a585fdb7f7aae82a834ba51e3c85 Jay 566b35317b1314e0292fa75b09b07797cb9e78e4 Jay 5b91e87c3b4380d2921afc88df96a093c654d149 Jay c225288a74c8a0de0d8370bb397e0529ab973eaa Jay ebebb8f7bbfcb7a9aef57e7c080987ff273b2bd8 Jay 8b1661ea6b1c4ca0ffc0e46c158c74cfd7dac21e Jay d545fc87bc29c4c94c4072219c03aeabbda0f058 Jay ba12dca4b8e547a61ebc47610bb228f4206982a5 Jay - Diff:
-
Revision 5 (+782 -206)
Checks run (2 succeeded)
- Testing Done:
-
Press
tab
andh
on review request page and the dialog is shown (theshortcuts are displayed as well). ~ Press
tab
andd
on my dashboard page and the dialog is shown.~ Press
tab
andd
on review request page and Description field is+ focused. + + Press
tab
andh
on dashboard page and the help dialog is shown.+ + All unit tests passed.
- Commits:
-
Summary ID Author 7c6dbaac53155d9254f8bbff944da5f06735c2d3 Jay 94475ce07d634af284836ba6dc32e824b6992734 Jay e1654205949a0b7914eecfd19b1651f78647213a Jay f563e3d5253e205ac1682954514aa70ff6e6c07b Jay 14c32b571c03a585fdb7f7aae82a834ba51e3c85 Jay 566b35317b1314e0292fa75b09b07797cb9e78e4 Jay 5b91e87c3b4380d2921afc88df96a093c654d149 Jay c225288a74c8a0de0d8370bb397e0529ab973eaa Jay ebebb8f7bbfcb7a9aef57e7c080987ff273b2bd8 Jay 8b1661ea6b1c4ca0ffc0e46c158c74cfd7dac21e Jay d545fc87bc29c4c94c4072219c03aeabbda0f058 Jay ba12dca4b8e547a61ebc47610bb228f4206982a5 Jay 20d4da8c4268f33c102486061da94fc8a66af18c Jay ff48beaa3d798a3d2fe07b612c7d561064db47f7 Jay a324636d864dd8215f692e85425d4e2cef4d0ef4 Jay 18847f629b301aeb2de567989234ed6690b0b73a Jay 6e8c74bbf63591f72a84589f93add4a54a063020 Jay a2a94100711811603e545a28e1d2ce5c37db92dd Jay 1c9b40db935e92a8239a869cbbe14f5cf1388a10 Jay 538fe4586645ff2d69019858bd33e90c9edacf62 Jay a215d8037abd54564052af460459467f9c164ca6 Jay f0a4818f3dd6714626210881a0cf756f2873928a Jay 025f1a15417988514668e3f4d1c8ffd5da988a74 Jay 12de8777b68d977c3f5da45af4cac9eebe0487c2 Jay 9ee4a792a8e1659f08a965ef0ad488b07286acb4 Jay - Diff:
-
Revision 6 (+905 -233)
Checks run (2 succeeded)
-
-
We're trying to get rid of most of
common.less
and move to the CSS Component structure. This would be best in arb/css/ui/shortcuts-dialog.less
, as a.rb-c-shortcuts-dialog
component, using effective style names.I know we're at the end of the term, but if you're interested in working on this after the semester ends, this would be a great task for that time! :) Otherwise consider it a reminder for us before it lands.
-
-
Looks like this would conflict with the other review request, right? That uses "docs," this uses "description."
-
You can use
$.ui.keyCode.TAB
and'H'.charCodeAt(0)
, respectively.It'd also be nice to be consistent with "KeyCode", rather than "Keycode".
-
-
-
-
These must be localized. You'll want to pass in the localized strings as parameters to the template.
-
Right now, we should be using
_.each()
instead ofObject.entries().forEach()
. It has wider browser compatibility.We also cannot use fat arrow functions in templates. They'll be preserved and sent to the browser, and will break browsers without the support (not uncommon in enterprises).
Basically, anything in a template skips Babel transpilation, so we can't use unsafe stuff.
-
You should use
if (entry[1].tabBaseCallback)
. We want to test if it's present and has a value, and this is the safest, shortest way. (It will beundefined
if missing.) -
-
-
-
-
This should be
const
(and appear as the first variable -- we do defined variables andconst
s before undefined andlet
s), since it won't be redefined. -
-
-
Comments should go on their own line and be proper sentences (capitalization, punctuation, "the", etc.).
-
-
Two things that can improve this:
- Let's pull out
innerText
into a variable, so we can check it without re-fetching it each time. - Let's use
expect(...).toContain('test1')
, so we can get better output if the expectation fails.
- Let's pull out
-
-
-
-
You can chain these:
this.$el .on(...) .on(...) ...;
The binding below can also be included in the chain.
-
-
Docstring summaries must be a single line.
How about:
/** * Call a shortcut handler when a key or combination is pressed.
-
This can be:
const keyBinding = this.keyBindings[keys]; let func = (isTabBasedShortcut ? keyBinding.tabBasedShortcut : keyBinding.callback);
-
-
- Commits:
-
Summary ID Author 20d4da8c4268f33c102486061da94fc8a66af18c Jay ff48beaa3d798a3d2fe07b612c7d561064db47f7 Jay a324636d864dd8215f692e85425d4e2cef4d0ef4 Jay 18847f629b301aeb2de567989234ed6690b0b73a Jay 6e8c74bbf63591f72a84589f93add4a54a063020 Jay a2a94100711811603e545a28e1d2ce5c37db92dd Jay 1c9b40db935e92a8239a869cbbe14f5cf1388a10 Jay 538fe4586645ff2d69019858bd33e90c9edacf62 Jay a215d8037abd54564052af460459467f9c164ca6 Jay f0a4818f3dd6714626210881a0cf756f2873928a Jay 025f1a15417988514668e3f4d1c8ffd5da988a74 Jay 12de8777b68d977c3f5da45af4cac9eebe0487c2 Jay 9ee4a792a8e1659f08a965ef0ad488b07286acb4 Jay 20d4da8c4268f33c102486061da94fc8a66af18c Jay ff48beaa3d798a3d2fe07b612c7d561064db47f7 Jay a324636d864dd8215f692e85425d4e2cef4d0ef4 Jay 18847f629b301aeb2de567989234ed6690b0b73a Jay 6e8c74bbf63591f72a84589f93add4a54a063020 Jay a2a94100711811603e545a28e1d2ce5c37db92dd Jay 1c9b40db935e92a8239a869cbbe14f5cf1388a10 Jay 538fe4586645ff2d69019858bd33e90c9edacf62 Jay a215d8037abd54564052af460459467f9c164ca6 Jay f0a4818f3dd6714626210881a0cf756f2873928a Jay 025f1a15417988514668e3f4d1c8ffd5da988a74 Jay 12de8777b68d977c3f5da45af4cac9eebe0487c2 Jay 9ee4a792a8e1659f08a965ef0ad488b07286acb4 Jay f2f0041bfb6468fad5189b7cf464855befd67196 Jay - Diff:
-
Revision 7 (+1035 -317)