Pagemacro keyboard shortcuts (#4690)

* Make footnotes a bit more readable and fix note * Add links to tools pages that use shortcuts * Remove page inspector keyboard shortcuts and fix up all links * Remove pagemacro from Eyedropper * Remove Web Console keyboard shortcuts page and fix up redirects * StyleEditor - remove page macro/crosslink * Fix up pagemacro link from Toolbox doc * Minor tidy to 3D view doc * Delete Debugger shortcuts page and redirect * Examine and edit CSS - fix fixable flaws * remove irrelevant link Co-authored-by: Chris Mills <[email protected]>
mdn · May 7, 2021 · 6e59c64 · 6e59c64
1 parent 5e27ba0
commit 6e59c64
Show file tree

Hide file tree

Showing 15 changed files with 55 additions and 108 deletions.
diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
@@ -6815,6 +6815,7 @@
 /en-US/docs/Tools/Page_Inspector/How_to/Edit_filters	/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters
 /en-US/docs/Tools/Page_Inspector/How_to/View_fonts	/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts
 /en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples	/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_CSS_transitions
+/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts	/en-US/docs/Tools/Keyboard_shortcuts#page_inspector
 /en-US/docs/Tools/Page_Inspector/Style_panel	/en-US/docs/Tools/Page_Inspector#CSS_pane
 /en-US/docs/Tools/Page_Inspector/Use_the_3-pane_inspector	/en-US/docs/Tools/Page_Inspector/3-pane_mode
 /en-US/docs/Tools/Performance/Profiler_walkthrough	/en-US/docs/Tools/Performance/Call_Tree
@@ -6835,6 +6836,7 @@
 /en-US/docs/Tools/Toolbox	/en-US/docs/Tools/Tools_Toolbox
 /en-US/docs/Tools/Tools_draft	/en-US/docs/Tools
 /en-US/docs/Tools/Using_the_Source_Editor	/en-US/docs/tools/Keyboard_shortcuts#Source_editor
+/en-US/docs/Tools/Web_Console/Keyboard_shortcuts	/en-US/docs/Tools/Keyboard_shortcuts#web_console
 /en-US/docs/Tools/Web_Console/Message_display_pane	/en-US/docs/Tools/Web_Console/Console_messages
 /en-US/docs/Tools/Web_Console/Opening_the_Web_Console	/en-US/docs/Tools/Web_Console/UI_Tour
 /en-US/docs/Tools/Web_Console/WebConsoleHelp	/en-US/docs/Tools/Web_Console/Helpers

diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json
@@ -24916,14 +24916,6 @@
       "jswisher"
     ]
   },
-  "Tools/Debugger/Keyboard_shortcuts": {
-    "modified": "2020-07-16T22:35:17.489Z",
-    "contributors": [
-      "dkocho4",
-      "wbamberg",
-      "chrisdavidmills"
-    ]
-  },
   "Tools/Debugger/Set_a_logpoint": {
     "modified": "2020-07-16T22:35:20.329Z",
     "contributors": [
@@ -25626,14 +25618,6 @@
       "birtles"
     ]
   },
-  "Tools/Page_Inspector/Keyboard_shortcuts": {
-    "modified": "2020-07-16T22:34:50.161Z",
-    "contributors": [
-      "wbamberg",
-      "chrisdavidmills",
-      "twinmike81"
-    ]
-  },
   "Tools/Page_Inspector/UI_Tour": {
     "modified": "2020-07-16T22:34:48.807Z",
     "contributors": [
@@ -26305,13 +26289,6 @@
       "irenesmith"
     ]
   },
-  "Tools/Web_Console/Keyboard_shortcuts": {
-    "modified": "2020-07-16T22:34:21.997Z",
-    "contributors": [
-      "wbamberg",
-      "chrisdavidmills"
-    ]
-  },
   "Tools/Web_Console/Rich_output": {
     "modified": "2020-07-16T22:34:20.108Z",
     "contributors": [

diff --git a/files/en-us/tools/3d_view/index.html b/files/en-us/tools/3d_view/index.html
@@ -7,8 +7,11 @@
   - Web Development
   - Web Development:Tools
 ---
-<div>{{ToolsSidebar}}</div><div class="warning">
-<p>From Firefox 47 onwards, 3D view is no longer available.</p>
+<div>{{ToolsSidebar}}</div>
+
+<div class="notecard warning">
+  <h4>Warning</h4>
+   <p>From Firefox 47 onwards, 3D view is no longer available.</p>
 </div>
 
 <p>When you click on the 3D view button, the page goes into 3D view mode; in this mode, you can see your page presented in a 3D view in which nested blocks of HTML are increasingly "tall," projecting outward from the bottom of the page. This view makes it easy to visualize the nesting of your content.</p>
@@ -94,11 +97,7 @@ <h2 id="See_also">See also</h2>
 <ul>
  <li><a href="/en-US/docs/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li>
  <li><a href="/en-US/docs/Tools/Page_Inspector/UI_Tour" title="HTML panel">HTML panel</a></li>
- <li>
-  <div class="threecolumns">
-  <p><a href="/en-US/docs/Tools/Page_Inspector#css_pane">Style panel</a></p>
-  </div>
- </li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector#css_pane">Style panel</a></li>
  <li><a href="/en-US/docs/Tools">Tools</a></li>
  <li><a class="external" href="https://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li>
 </ul>
diff --git a/files/en-us/tools/debugger/index.html b/files/en-us/tools/debugger/index.html
@@ -72,14 +72,9 @@ <h3 id="Look_at_values">Look at values</h3>
  <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_Watch_Expressions">Set watch expressions</a></li>
 </ul>
 
-<hr>
 <h2 id="Reference">Reference</h2>
 
 <ul>
- <li>
-  <p><a href="/en-US/docs/Tools/Debugger/Keyboard_shortcuts">Keyboard shortcuts</a></p>
- </li>
- <li>
-  <p><a href="/en-US/docs/Tools/Debugger/Source_map_errors">Source map errors</a></p>
- </li>
+ <li><a href="/en-US/docs/Tools/Keyboard_shortcuts#debugger">Keyboard shortcuts</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/Source_map_errors">Source map errors</a></li>
 </ul>
diff --git a/files/en-us/tools/debugger/keyboard_shortcuts/index.html b/files/en-us/tools/debugger/keyboard_shortcuts/index.html
diff --git a/files/en-us/tools/eyedropper/index.html b/files/en-us/tools/eyedropper/index.html
@@ -6,9 +6,7 @@
   - Tools
   - Web Development:Tools
 ---
-<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
-<p>The Eyedropper is new in Firefox 31.</p>
-</div>
+<div>{{ToolsSidebar}}</div>
 
 <p>The Eyedropper tool enables you to select colors in the current page. It works like a magnifying glass over the page, enabling you to select with pixel precision. Underneath the magnifying glass it shows the color value for the current pixel using whichever scheme you've selected in <a href="/en-US/docs/Tools/Settings#inspector">Settings &gt; Inspector</a> &gt; Default color unit:</p>
 
@@ -42,4 +40,4 @@ <h2 id="Changing_a_color_value_in_the_Rules_view">Changing a color value in the
 
 <h2 id="Keyboard_shortcuts">Keyboard shortcuts</h2>
 
-<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "eyedropper") }}</p>
+<p>See <a href="/en-US/docs/Tools/Keyboard_shortcuts#eyedropper">All keyboard shortcuts > Eyedropper</a>.</p>
diff --git a/files/en-us/tools/keyboard_shortcuts/index.html b/files/en-us/tools/keyboard_shortcuts/index.html
@@ -118,14 +118,16 @@ <h2 id="Opening_and_closing_tools">Opening and closing tools</h2>
  </tbody>
 </table>
 
-<p><a name="opening-closing-web-console-note">1. Unlike the other toolbox-hosted tools, this shortcut does not also close the Web Console. Instead, it focuses on the Web Console's command line. To close the Web Console, use the global toolbox shortcut of <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> (<kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> on a Mac).</a></p>
+<p><a name="opening-closing-web-console-note">1.</a> Unlike the other toolbox-hosted tools, this shortcut does not also close the Web Console. Instead, it focuses on the Web Console's command line. To close the Web Console, use the global toolbox shortcut of <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> (<kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> on a Mac).</p>
 
-<p><a name="opening-closing-network-monitor-note">2. Before Firefox 55, the keyboard shortcut was <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Q</kbd> (<kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Q</kbd> on a Mac).</a></p>
+<p><a name="opening-closing-network-monitor-note">2.</a> Before Firefox 55, the keyboard shortcut was <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Q</kbd> (<kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Q</kbd> on a Mac).</p>
 
-<p><a name="opening-closing-debugger">3. Starting in Firefox 71. Before Firefox 66, the letter in this shortcut was S. </a></p>
+<p><a name="opening-closing-debugger">3.</a> Starting in Firefox 71. Before Firefox 66, the letter in this shortcut was S.</p>
 
 <h2 id="Toolbox">Toolbox</h2>
 
+<p>Keyboard shortcuts for the <a href="/en-US/docs/Tools/Tools_Toolbox#toolbox">Toolbox</a>.</p>
+
 <div id="toolbox-shortcuts">
 <p>These shortcuts work whenever the toolbox is open, no matter which tool is active.</p>
 
@@ -309,6 +311,8 @@ <h2 id="Source_editor">Source editor</h2>
 
 <h2 id="Page_Inspector">Page Inspector</h2>
 
+<p>Keyboard shortcuts for the <a href="/en-US/docs/Tools/Page_Inspector">Page inspector</a>.</p>
+
 <div id="page-inspector">
 <table class="fullwidth-table">
  <tbody>
@@ -660,6 +664,8 @@ <h3 id="CSS_pane">CSS pane</h3>
 
 <h2 id="Debugger">Debugger</h2>
 
+<p>Keyboard shortcuts for the <a href="/en-US/docs/Tools/Debugger">Firefox JavaScript Debugger</a>.</p>
+
 <div id="debugger">
 <table class="fullwidth-table">
  <tbody>
@@ -738,15 +744,18 @@ <h2 id="Debugger">Debugger</h2>
  </tbody>
 </table>
 
-<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>
 
 <div class="notecard note">
-<p><strong>Note:</strong> Before Firefox 66, the combination <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> on Windows and Linux or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd> on macOS would open/close the Debugger. From Firefox 66 and later, this is no longer the case.</p>
+  <h4>Note</h4>
+  <p>Before Firefox 66, the combination <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> on Windows and Linux or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd> on macOS would open/close the Debugger. From Firefox 66 and later, this is no longer the case.</p>
 </div>
 </div>
 
 <h2 id="Web_Console">Web Console</h2>
 
+<p>Keyboard shortcuts for the <a href="/en-US/docs/Tools/Web_Console">Web Console</a>.</p>
+
 <div id="web-console">
 <table class="fullwidth-table">
  <tbody>
@@ -958,6 +967,8 @@ <h3 id="Autocomplete_popup">Autocomplete popup</h3>
 
 <h2 id="Style_Editor">Style Editor</h2>
 
+<p>Keyboard shortcuts for the <a href="/en-US/docs/Tools/Style_Editor">Style editor</a>.</p>
+
 <table class="fullwidth-table">
  <tbody>
   <tr>
@@ -1074,6 +1085,8 @@ <h2 id="Scratchpad">Scratchpad</h2>
 
 <h2 id="Eyedropper">Eyedropper</h2>
 
+<p>Keyboard shortcuts for the <a href="/en-US/docs/Tools/Eyedropper#keyboard_shortcuts">Eyedropper</a>.</p>
+
 <table class="fullwidth-table">
  <tbody>
   <tr>

diff --git a/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/index.html
@@ -61,16 +61,16 @@ <h3 id="Rule_display">Rule display</h3>
 
 <ul>
  <li><em>Highlight matched elements</em>: next to the selector is a target icon: click this to highlight all nodes in the page that match this selector.</li>
- <li><em>Overridden declaration</em>: declarations that are overridden by later rules are crossed out. See <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#overridden_declarations">overridden declarations</a>.</li>
+ <li><em>Overridden declaration</em>: declarations that are overridden by later rules are crossed out. See <a href="#overridden_declarations">overridden declarations</a>.</li>
  <li><em>Inactive rules</em> (not shown): if a rule is inactive (e.g., <code>padding</code> on a <code>:visited</code> pseudo-element), it is colored gray, with an info icon that gives more information when clicked.</li>
- <li><em>Filter rules containing this property</em>: next to overridden declarations is an icon you can click to filter the rules list to show only those rules that include that property. See <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#overridden_declarations">overridden declarations</a>.</li>
+ <li><em>Filter rules containing this property</em>: next to overridden declarations is an icon you can click to filter the rules list to show only those rules that include that property. See <a href="#overridden_declarations">overridden declarations</a>.</li>
  <li><em>Enable/disable</em>: if you hover over a declaration, a checkbox appears next to it: you can use this to toggle the declaration on or off.</li>
- <li><em>Filename and line number</em>: on the right-hand side is a link to the rule. See <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#link_to_css_file">link to CSS file</a>.</li>
+ <li><em>Filename and line number</em>: on the right-hand side is a link to the rule. See <a href="#link_to_css_file">link to CSS file</a>.</li>
 </ul>
 
 <p>If the element has a <code><a href="/en-US/docs/Web/CSS/display">display: grid</a></code> declaration, then it gets a grid icon next to it, like this: <img alt="" src="screen_shot_2016-12-16_at_10.51.15_am.png">. Click that icon to display the grid overlaid on the page, including grid lines and tracks. See <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examine grid layouts</a> for more on this.</p>
 
-<p>To view <a href="/en-US/docs/Web/CSS/Cascade">user-agent styles</a> (<em>i.e.,</em> browser-default CSS rules), enable "Inspector &gt; Show Browser Styles" under the <a href="/en-US/docs/Tools/Settings">developer tool settings</a> panel. (Note that this setting is independent of the "Browser styles" checkbox in the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#examine_computed_css">Computed view</a>.)</p>
+<p>To view <a href="/en-US/docs/Web/CSS/Cascade">user-agent styles</a> (<em>i.e.,</em> browser-default CSS rules), enable "Inspector &gt; Show Browser Styles" under the <a href="/en-US/docs/Tools/Settings">developer tool settings</a> panel. (Note that this setting is independent of the "Browser styles" checkbox in the <a href="#examine_computed_css">Computed view</a>.)</p>
 
 <p>User-agent styles are displayed against a different background, and the link to the filename and line number contains the prefix <code>(user agent)</code>:</p>
 
@@ -354,6 +354,6 @@ <h2 id="Copy_rules">Copy rules</h2>
 <h2 id="See_also">See also</h2>
 
 <ul>
- <li>Complete list of Page Inspector <a href="/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts">Keyboard shortcuts</a>.</li>
+ <li>Complete list of Page Inspector <a href="/en-US/docs/Tools/Keyboard_shortcuts#page_inspector">Keyboard shortcuts</a>.</li>
  <li>The Inspector also includes a number of specialized tools for working with particular CSS features, such as colors, fonts, and animations. To read about these see the list of <a href="/en-US/docs/Tools/Page_Inspector">how to guides</a>.</li>
 </ul>
diff --git a/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/index.html b/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/index.html
@@ -23,7 +23,7 @@ <h3 id="HTML_breadcrumbs">HTML breadcrumbs</h3>
 
 <p>Hovering over a breadcrumb highlights that element in the page.</p>
 
-<p>The breadcrumbs bar has its own <a href="/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts#breadcrumbs_bar">keyboard shortcuts</a>.</p>
+<p>The breadcrumbs bar has its own <a href="/en-US/docs/Tools/Keyboard_shortcuts#Breadcrumbs_bar">keyboard shortcuts</a>.</p>
 
 <h3 id="Searching">Searching</h3>
 

diff --git a/files/en-us/tools/page_inspector/index.html b/files/en-us/tools/page_inspector/index.html
@@ -57,7 +57,7 @@ <h2 id="Reference">Reference</h2>
 
 <div class="twocolumns">
 <ul>
- <li><a href="/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts">Keyboard shortcuts </a></li>
+ <li><a href="/en-US/docs/Tools/Keyboard_shortcuts#page_inspector">Keyboard shortcuts </a></li>
  <li><a href="/en-US/docs/Tools/Tools_Toolbox#inspector">Settings</a></li>
 </ul>
 </div>
diff --git a/files/en-us/tools/page_inspector/keyboard_shortcuts/index.html b/files/en-us/tools/page_inspector/keyboard_shortcuts/index.html
diff --git a/files/en-us/tools/style_editor/index.html b/files/en-us/tools/style_editor/index.html
@@ -27,9 +27,9 @@
 <p>The Style Editor is divided into three main sections:</p>
 
 <ul>
- <li><a href="/en-US/docs/Tools/Style_Editor#the_style_sheet_pane">the style sheet pane on the left</a></li>
- <li><a href="/en-US/docs/Tools/Style_Editor#the_editor_pane">the editor on the right</a></li>
- <li><a href="/en-US/docs/Tools/Style_Editor#the_media_sidebar">the media sidebar.</a></li>
+ <li><a href="#the_style_sheet_pane">the style sheet pane on the left</a></li>
+ <li><a href="#the_editor_pane">the editor on the right</a></li>
+ <li><a href="#the_media_sidebar">the media sidebar.</a></li>
 </ul>
 
 <h2 id="The_style_sheet_pane">The style sheet pane</h2>
@@ -42,7 +42,7 @@ <h2 id="The_editor_pane">The editor pane</h2>
 
 <p>On the right is the editor pane. This is where the source for the selected style sheet is available for you to read and edit. Any changes you make are immediately applied to the page. This makes it easy to experiment with, revise, and test changes. Once you're satisfied with your changes, you can save a copy locally by clicking the Save button on the sheet's entry in the style sheet pane.</p>
 
-<p>The editor provides line numbers and syntax highlighting to help make it easier to read your CSS. It also supports a number of <a href="/en-US/docs/Tools/Style_Editor#source_editor_shortcuts">keyboard shortcuts</a>.</p>
+<p>The editor provides line numbers and syntax highlighting to help make it easier to read your CSS. It also supports a number of <a href="#source_editor_shortcuts">keyboard shortcuts</a>.</p>
 
 <p>The Style Editor automatically de-minimizes style sheets that it detects, without affecting the original. This makes it much easier to work on pages that have been optimized.</p>
 
@@ -105,6 +105,6 @@ <h3 id="Editing_original_sources">Editing original sources</h3>
 
 <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>
+<ul>
+  <li><a href="/en-US/docs/Tools/Keyboard_shortcuts#style_editor">Source editor shortcuts</a></li>
+</ul>