Pagemacro keyboard shortcuts #4690

hamishwillee · 2021-05-04T02:01:46Z

As per #3196 we are removing the Page macro (transclusion).

Prior to this change, All keyboard shortcuts contains all shortcuts, parts of which are transcluded into other docs - e.g. Debugger Keyboard shortcuts and Eyedropper

Where possible, this PR moves the content from the All keyboard shortcuts and then links from the old page to the new page.

I went back and forth a few times considering perhaps:

just duplicating the content in both place
Just linking from the location where the macro was to the sll keyboard shortcut docs. In the end I decided that while it is nice to have a single page with all the keyboard shortcuts, it is more useful for end users to have that information on hand when they are using the tool.

I am not certain this was the best decision, mostly because now the shortcuts are scattered. I do think that that if you're using web console, page inspector etc you probably are happy enough with the current way. If you think I'd be better off duplicating or linking to the All ... doc instead let me know - relatively easy fix.

github-actions · 2021-05-04T02:03:42Z

Preview URLs

Flaws

Note! 9 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
Title: Examine and edit HTML
on GitHub
Flaw count: 2

broken_links:
- Anchor not lowercase
- No need for the pathname in anchor links if it's the same page

External URLs

URL: /en-US/docs/Tools/Tools_Toolbox
Title: Toolbox
on GitHub

No new external URLs

URL: /en-US/docs/Tools/Style_Editor
Title: Style Editor
on GitHub

No new external URLs

URL: /en-US/docs/Tools/Eyedropper
Title: Eyedropper
on GitHub

No new external URLs

URL: /en-US/docs/Tools/Web_Console
Title: Web Console
on GitHub

No new external URLs

URL: /en-US/docs/Tools/Page_Inspector
Title: Page Inspector
on GitHub

No new external URLs

URL: /en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
Title: Examine and edit HTML
on GitHub

No new external URLs

URL: /en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS
Title: Examine and edit CSS
on GitHub

No new external URLs

URL: /en-US/docs/Tools/Debugger
Title: The Firefox JavaScript Debugger
on GitHub

No new external URLs

URL: /en-US/docs/Tools/3D_View
Title: 3D view
on GitHub

No new external URLs

URL: /en-US/docs/Tools/Keyboard_shortcuts
Title: All keyboard shortcuts
on GitHub

https://support.apple.com/kb/HT3399 (1 time) (Note! This is a new URL 👀)

(this comment was updated 2021-05-07 07:31:53.387622)

hamishwillee · 2021-05-04T03:15:38Z

files/en-us/tools/style_editor/index.html

@@ -107,4 +107,7 @@ <h2 id="Keyboard_shortcuts">Keyboard shortcuts</h2>

 <h3 id="Source_editor_shortcuts">Source editor shortcuts</h3>

-<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
+
+<p>See <a href="/en-US/docs/Tools/Keyboard_shortcuts#source_editor">All keyboard shortcuts > Source editor</a> for the default source editor shortcuts.</p>


@chrisdavidmills Here I couldn't copy the key mapping in because even though this is the ONLY place it was transcluded, the source editor can in theory apply to different types of source. So I chose to link back.

hamishwillee · 2021-05-04T04:56:49Z

files/en-us/tools/tools_toolbox/index.html

- <li>click the wrench icon (<img alt="" src="wrench-icon.png">), which is in the main toolbar or under the Hamburger menu (<img alt="" src="hamburger.png">), then select "Toggle Tools"</li>
- <li>activate any tool hosted in the Toolbox (for example, the JavaScript Debugger or the Page Inspector)</li>
- <li>press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> on Windows and Linux, or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> on OS X. See also <a href="/en-US/docs/Tools/Keyboard_shortcuts">keyboard shortcuts</a>.</li>
+ <li>Select "Toggle Tools" from the Web Developer menu (under "Tools" on OS X and Linux, or "Firefox" on Windows)</li>


@chrisdavidmills This is the beginning of page https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox
I think it is a bit incorrect. I was referring to a wrench that no longer exists. Can you confirm that nowdays the ways to open the toolbar are:

Keyboard keys

Right click on any element and click inspect element

On any platform (right?), use hamburger and do Web Developer - then do Toggle Tools or select specific tool.

There aren't any other ways right?

I think it would be better to list the three most common different ways, which you've basically got correct above, except that the hamburger menu option now seems to be Hamburger menu > More tools > Web developer tools.

hamishwillee · 2021-05-04T04:57:24Z

files/en-us/tools/eyedropper/index.html

@@ -6,9 +6,7 @@
  - Tools
  - Web Development:Tools
 ---
-<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">


Note, FF31 irrelevant now.

hamishwillee · 2021-05-04T04:59:50Z

files/en-us/tools/keyboard_shortcuts/index.html

-<p>To select these, visit <code>about:config</code>, select the setting <code>devtools.editor.keymap</code>, and assign "vim" or "emacs", or "sublime" to that setting. If you do this, the selected bindings will be used for all the developer tools that use the source editor. You need to reopen the editor for the change to take effect.</p>
-
-<p>From Firefox 33 onwards, the key binding preference is exposed in the <a href="/en-US/docs/Tools/Settings#editor_preferences">Editor Preferences</a> section of the developer tools settings, and you can set it there instead of <code>about:config</code>.</p>
+<div class="notecard note">


@chrisdavidmills I couldn't remove this "Source Editor" section to another page because I don't think there is one. At the moment this is only linked by the Style editor section - is there another place you can edit things? I.e. is the specific or generic?

I'm really not sure

hamishwillee · 2021-05-04T05:01:06Z

files/en-us/tools/keyboard_shortcuts/index.html

-  </tr>
- </tbody>
-</table>
+<p>See <a href="/en-US/docs/Tools/Eyedropper#keyboard_shortcuts">Eyedropper > Keyboard Shortcuts</a>.</p>


@chrisdavidmills Section above is about a tool called "Scratchpad". I can't find any docs on that so I can't move this. Any ideas on what it is for?

This is gone; see https://developer.mozilla.org/en-US/docs/Tools/Deprecated_tools#scratchpad for details.

chrisdavidmills

Not much to change here, from the outset.

I think this way of doing it is ok, although it does make me wonder if it would be better to just have a single page with all shortcuts listed on it, and then link the landing pages for each tool to their specific section on that page for the tool-specific shortcuts?

Then someone who wants all the shortcuts in one place can just visit that page anyway?

Thoughts? I've not got a particularly strong opinion about this.

chrisdavidmills · 2021-05-04T11:24:00Z

files/en-us/tools/tools_toolbox/index.html

- <li>click the wrench icon (<img alt="" src="wrench-icon.png">), which is in the main toolbar or under the Hamburger menu (<img alt="" src="hamburger.png">), then select "Toggle Tools"</li>
- <li>activate any tool hosted in the Toolbox (for example, the JavaScript Debugger or the Page Inspector)</li>
- <li>press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> on Windows and Linux, or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> on OS X. See also <a href="/en-US/docs/Tools/Keyboard_shortcuts">keyboard shortcuts</a>.</li>
+ <li>Select "Toggle Tools" from the Web Developer menu (under "Tools" on OS X and Linux, or "Firefox" on Windows)</li>


I think it would be better to list the three most common different ways, which you've basically got correct above, except that the hamburger menu option now seems to be Hamburger menu > More tools > Web developer tools.

hamishwillee · 2021-05-04T22:28:23Z

I think this way of doing it is ok, although it does make me wonder if it would be better to just have a single page with all shortcuts listed on it, and then link the landing pages for each tool to their specific section on that page for the tool-specific shortcuts?

Thanks @chrisdavidmills. That was my concern, as in the description:

I am not certain this was the best decision, mostly because now the shortcuts are scattered. I do think that that if you're using web console, page inspector etc you probably are happy enough with the current way. If you think I'd be better off duplicating or linking to the All ... doc instead let me know - relatively easy fix.

I think I will revert this. I'll push back to draft and fix up on Friday.

hamishwillee · 2021-05-07T02:05:22Z

files/en-us/tools/tools_toolbox/index.html

 <li><a href="/en-US/docs/Tools/Eyedropper">Grab a color from the page</a></li>
 <li>Take a screenshot of the entire page: take a screenshot of the complete web page and saves it in your Downloads directory</li>
 <li><a href="/en-US/docs/Tools/Rulers">Toggle rulers for the page</a></li>
 <li>Measure a portion of the page: measure a part of the website by selecting areas within the page</li>
+ <li><a href="/en-US/docs/Tools/3D_View">3D view</a> (Removed in Firefox 47)</li>


@chrisdavidmills Should I just delete this link - Firefox 47 was 2016? Note that the document could still exist, but you'd find it by search if you were on an old build

Yeah, let's get rid of it. I'll do that now.

hamishwillee · 2021-05-07T02:14:47Z

@peterbe Just FYI, this popped up - but the URL is not new.

hamishwillee · 2021-05-07T02:17:20Z

@chrisdavidmills Ready for your re-review.
As we discussed this inverts the changes - we now keep the single keyboard shortcut page. Where pagemacros were part of a page the inclusion was replaced with a link. Where there was a dedicated page for a specific tool's keyboard mappings I just deleted the page, and fixed up links to it from appropriate places.

chrisdavidmills

Nice work @hamishwillee ; I think this is now ready to merge.

chrisdavidmills · 2021-05-07T07:28:12Z

files/en-us/tools/tools_toolbox/index.html

 <li><a href="/en-US/docs/Tools/Eyedropper">Grab a color from the page</a></li>
 <li>Take a screenshot of the entire page: take a screenshot of the complete web page and saves it in your Downloads directory</li>
 <li><a href="/en-US/docs/Tools/Rulers">Toggle rulers for the page</a></li>
 <li>Measure a portion of the page: measure a part of the website by selecting areas within the page</li>
+ <li><a href="/en-US/docs/Tools/3D_View">3D view</a> (Removed in Firefox 47)</li>


Yeah, let's get rid of it. I'll do that now.

peterbe · 2021-05-07T17:03:59Z

@peterbe Just FYI, this popped up - but the URL is not new.

It gets confused because of this diff portion:

-<p><a name="mac-function-key-note">1. By default, on some Macs, the function key is remapped to use a special feature: for example, to change the screen brightness or the volume. See this </a><a href="https://support.apple.com/kb/HT3399">guide to using these keys as standard function keys</a>. To use a remapped key as a standard function key, hold the Function key down as well (so to open the Profiler, use <kbd>Shift</kbd> + <kbd>Function</kbd> + <kbd>F5</kbd>).</p>
+<p><a id="mac-function-key-note">1.</a> By default, on some Macs, the function key is remapped to use a special feature: for example, to change the screen brightness or the volume. See this <a href="https://support.apple.com/kb/HT3399">guide to using these keys as standard function keys</a>. To use a remapped key as a standard function key, hold the Function key down as well (so to open the Profiler, use <kbd>Shift</kbd> + <kbd>Function</kbd> + <kbd>F5</kbd>).</p>

I think the simple solution might be to change the messaging from:

-Note! This is a new URL 👀
+Note! This is maybe a new URL 👀

CC @escattone

escattone · 2021-05-07T17:18:45Z

@peterbe 👍 I like your simple solution, but would suggest the wording Note! This may be a new URL 👀.

peterbe · 2021-05-07T17:23:53Z

@peterbe 👍 I like your simple solution, but would suggest the wording Note! This may be a new URL 👀.

mdn/yari#3752

hamishwillee requested a review from a team as a code owner May 4, 2021 02:01

hamishwillee requested review from a team and chrisdavidmills and removed request for a team May 4, 2021 02:01

hamishwillee changed the title ~~Pagemacro debugger~~ Pagemacro keyboard shortcuts May 4, 2021

hamishwillee force-pushed the pagemacro_debugger branch from 511723f to bd3c660 Compare May 4, 2021 03:10

hamishwillee commented May 4, 2021

View reviewed changes

chrisdavidmills requested changes May 4, 2021

View reviewed changes

hamishwillee marked this pull request as draft May 4, 2021 22:28

hamishwillee force-pushed the pagemacro_debugger branch from b1a7d11 to 3d78916 Compare May 7, 2021 00:41

hamishwillee added 3 commits May 7, 2021 10:44

Make footnotes a bit more readable and fix note

26bebf8

Add links to tools pages that use shortcuts

8b47ea4

Remove page inspector keyboard shortcuts and fix up all links

3acbecf

hamishwillee force-pushed the pagemacro_debugger branch from 3d78916 to 3acbecf Compare May 7, 2021 01:10

hamishwillee added 5 commits May 7, 2021 11:14

Remove pagemacro from Eyedropper

b540a32

Remove Web Console keyboard shortcuts page and fix up redirects

187ade7

StyleEditor - remove page macro/crosslink

5de5b27

Fix up pagemacro link from Toolbox doc

8115cbd

Minor tidy to 3D view doc

dfbddcd

hamishwillee commented May 7, 2021

View reviewed changes

Delete Debugger shortcuts page and redirect

fa52293

hamishwillee marked this pull request as ready for review May 7, 2021 02:12

Examine and edit CSS - fix fixable flaws

1f36f7b

remove irrelevant link

760c8bc

chrisdavidmills approved these changes May 7, 2021

View reviewed changes

chrisdavidmills merged commit 6e59c64 into mdn:main May 7, 2021

hamishwillee deleted the pagemacro_debugger branch May 7, 2021 07:41

github-actions bot locked as resolved and limited conversation to collaborators Sep 8, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pagemacro keyboard shortcuts #4690

Pagemacro keyboard shortcuts #4690

hamishwillee commented May 4, 2021 •

edited

Loading

github-actions bot commented May 4, 2021 •

edited

Loading

hamishwillee May 4, 2021

hamishwillee May 4, 2021

chrisdavidmills May 4, 2021

hamishwillee May 7, 2021

hamishwillee May 4, 2021

hamishwillee May 4, 2021

chrisdavidmills May 4, 2021

hamishwillee May 4, 2021

chrisdavidmills May 4, 2021

chrisdavidmills left a comment

chrisdavidmills May 4, 2021

hamishwillee commented May 4, 2021

hamishwillee May 7, 2021

chrisdavidmills May 7, 2021

hamishwillee commented May 7, 2021

hamishwillee commented May 7, 2021

chrisdavidmills left a comment

chrisdavidmills May 7, 2021

peterbe commented May 7, 2021

escattone commented May 7, 2021

peterbe commented May 7, 2021

Pagemacro keyboard shortcuts #4690

Pagemacro keyboard shortcuts #4690

Conversation

hamishwillee commented May 4, 2021 • edited Loading

github-actions bot commented May 4, 2021 • edited Loading

Preview URLs

Flaws

External URLs

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chrisdavidmills left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hamishwillee commented May 4, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hamishwillee commented May 7, 2021

hamishwillee commented May 7, 2021

chrisdavidmills left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

peterbe commented May 7, 2021

escattone commented May 7, 2021

peterbe commented May 7, 2021

hamishwillee commented May 4, 2021 •

edited

Loading

github-actions bot commented May 4, 2021 •

edited

Loading