1167148 - UX Issues with Keyboard shortcuts - Firefox Developer Tools | MDN

Status: RESOLVED FIXED

(Developer Documentation Graveyard :: General, defect)

Description

[Adrian Aichner [:anaran]]

Attachment: Maximized.png

See:

https://developer.mozilla.org/en-US/docs/Tools/Keyboard_shortcuts

Details:

1.
The page does not render tables well in various typical window configurations, like maximized or semi-maximized (full height, half width).

The cause for this are hard-coded styles.

2.
The tables use table-header styling for the first column to make it stand out. Used in this way it does not really stand out.

3.
The first column is typically labelled with "Command" in https://support.mozilla.org/en-US/kb/keyboard-shortcuts-perform-firefox-tasks-quickly, which is probably a good target to by conform with for the extra impression of a unified design language.
This header is missing and the command column is not always phrased as a command.

I am going to tackle 1 and 3 and would like to have additional feedback on 2.


http://mzl.la/1vxCDgA

Comment 1

[Adrian Aichner [:anaran]]

Attachment: SemiMaximized.png

Only Windows shortcut column is visibale, no table of contents.

Comment 2

[Adrian Aichner [:anaran]]

Comment on attachment 8608643 [details]
Maximized.png

Table of contents obstructs shortcut table with hard-coded styling.

Comment 3

[Adrian Aichner [:anaran]]

Comment on attachment 8608648 [details]
SemiMaximized.png

Only Windows shortcut column is visible, no table of contents.

Comment 4

[Adrian Aichner [:anaran]]

I have tried my hand at items 1 and 3, had to keep minimal styling (of command column only to maintain alignment of tables.

Looking at this page for a while I think item 2 should also be implemented, but I'll wait for feedback.

Comment 5

[Adrian Aichner [:anaran]]

Attachment: Maximized-after.png

No interference with table of contents, tables still line up

Comment 6

[Adrian Aichner [:anaran]]

Attachment: SemiMaximized-after.png

All platform columns visible, tables still line up.
Table of contents is only shown at top, like before.

Comment 7

[Eric Shepherd [:sheppy]]

What does your changed CSS look like, assuming that's all you've changed?

Comment 8

[Adrian Aichner [:anaran]]

As discussed, we'll leave command column marked up as <th> for now (item 2 in the report).

Summary of my changes as found in revision history:

Minimize use of style attribute to Command column for maintainability while keeping tables aligned
Remove absolute size from first table, add Command header, upgrade commands to verb phrase