Fix links to devtools (part 2)

files/en-us/games/techniques/efficient_animation_for_web_games/index.md

@@ -75,7 +75,7 @@ Remember that when you do drawing with `requestAnimationFrame` (and in general),
 
 There are some popular animation-related libraries and UI toolkits with animation functions that still do things like using `setTimeout` to drive their animations, drive all their animations completely individually, or other similar things that aren't conducive to maintaining a high frame-rate. One of the goals for the [Puzzowl](http://teamgiraffe.co.uk/) game is for it to be a solid 60fps on reasonable hardware (for the record, it's almost there on Galaxy Nexus-class hardware) while still being playable on low-end devices (such as a Firefox OS Geeksphone Keon). It would have been good to use as much third party software as possible, but most of what we tried was either too complicated for simple use-cases, or had performance issues on mobile.
 
-How this conclusion was reached, however, is more important than the conclusion itself. To begin with, the priority was to write the code quickly to iterate on gameplay (and we'd certainly recommend doing this). We assumed that our own, naive code was making the game slower than we would like. To an extent, this was true: we found plenty to optimize in our own code, but it got to the point where we knew what we were doing ought to perform quite well, and it still wasn't quite there. At this point, we turned to the Firefox [JavaScript profiler](/en-US/docs/Tools/Performance), and this told us almost exactly what low-hanging-fruit was left to address to improve performance. As it turned out, the code from some of the things mentioned above; the animation code had some corner cases where redraws were happening several times per frame, and some of the animations caused Firefox to need to redraw everything (they were fine in other browsers, as it happens — that particular issue is now fixed). Some of the third party code we were using was poorly optimized.
+How this conclusion was reached, however, is more important than the conclusion itself. To begin with, the priority was to write the code quickly to iterate on gameplay (and we'd certainly recommend doing this). We assumed that our own, naive code was making the game slower than we would like. To an extent, this was true: we found plenty to optimize in our own code, but it got to the point where we knew what we were doing ought to perform quite well, and it still wasn't quite there. At this point, we turned to the Firefox [JavaScript profiler](https://firefox-source-docs.mozilla.org/devtools-user/performance/index.html), and this told us almost exactly what low-hanging-fruit was left to address to improve performance. As it turned out, the code from some of the things mentioned above; the animation code had some corner cases where redraws were happening several times per frame, and some of the animations caused Firefox to need to redraw everything (they were fine in other browsers, as it happens — that particular issue is now fixed). Some of the third party code we were using was poorly optimized.
 
 ## A take-away
 

files/en-us/games/tools/index.md

@@ -21,8 +21,8 @@ On this page you can find links to our game development tools articles, which ev
   - : Shumway is a renderer for Adobe Flash built entirely in JavaScript, WebGL, etc., bridging the gap between Flash and web standards. This article shows how to make use of Shumway, and how to contribute fixes and bugs to the project.
 - Toolchain for developing and debugging games
 
-  - : How does this differ from normal web app debugging? What specialist tools are available? A lot of this is going to be covered by Will in [tools](/en-US/docs/Tools), but here we should provide a kind of practical toolchain tutorial for debugging games, with links to Will's stuff:
+  - : How does this differ from normal web app debugging? What specialist tools are available? A lot of this is going to be covered by Will in [tools](https://firefox-source-docs.mozilla.org/devtools-user/index.html), but here we should provide a kind of practical toolchain tutorial for debugging games, with links to Will's stuff:
 
     - Basic tools overview
-    - [Shader editor](/en-US/docs/Tools/Shader_Editor)
+    - [Shader editor](https://firefox-source-docs.mozilla.org/devtools-user/shader_editor/index.html)
     - Performance tools (still in production, estimated early 2014)

files/en-us/glossary/developer_tools/index.md

@@ -13,7 +13,7 @@ Current browsers provide integrated developer tools, which allow to inspect a we
 ## See also
 
 - {{interwiki("wikipedia", "Web development tools", "Web development tools")}} on Wikipedia
-- [Firefox Developer Tools](/en-US/docs/Tools) on MDN
+- [Firefox Developer Tools](https://firefox-source-docs.mozilla.org/devtools-user/index.html) on MDN
 - [Firebug](https://getfirebug.com/) (former developer tool for Firefox)
 - [Chrome DevTools](https://developer.chrome.com/devtools) on chrome.com
 - [Safari Web Inspector](https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007874-CH1-SW1) on apple.com

files/en-us/glossary/dominator/index.md

@@ -12,5 +12,5 @@ This concept is important for {{Glossary("garbage collection")}} because it mean
 ## See also
 
 - {{interwiki("wikipedia", "Dominator (graph theory)", "Dominator")}} on Wikipedia
-- [Dominators](/en-US/docs/Tools/Memory/Dominators)
+- [Dominators](https://firefox-source-docs.mozilla.org/devtools-user/memory/dominators/index.html)
 - [Garbage collection](/en-US/docs/Web/JavaScript/Memory_Management#garbage_collection)

files/en-us/glossary/flex_container/index.md

@@ -28,4 +28,4 @@ A value of `flex` causes the element to become a block level flex container, and
 - CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
 - CSS Flexbox Guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_
 - CSS Flexbox Guide: _[Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items)_
-- Firefox Developer Tools > How to: *[CSS Flexbox Inspector: Examine Flexbox layouts](/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts)*
+- Firefox Developer Tools > How to: *[CSS Flexbox Inspector: Examine Flexbox layouts](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html)*

files/en-us/glossary/network_throttling/index.md

@@ -12,7 +12,7 @@ tags:
 
 It's important not to overlook network conditions users experience on mobile. The internet speeds for developers creating web applications in a corporate office building on a powerful computer are generally very fast. As a developer, tech writer, or designer, this is likely your experience. The network speeds of a mobile user accessing that web application, possibly while traveling or in a remote area with poor data plan coverage, will likely be very slow, if they are able to get online at all. Network throttling enables a developer to emulate an experience of a user. Most browser developer tools, such as the browser inspector, provide a function to emulate different network conditions. By emulating your user's experience via network throttling, you can more readily identify and fix load time issues.
 
-Browser developer tools generally have network throttling options, to allow you to test your app under slow network conditions. Firefox's developer tools for example have a drop-down menu available in both the [Network Monitor](/en-US/docs/Tools/Network_Monitor) and [Responsive Design Mode](/en-US/docs/Tools/Responsive_Design_Mode) containing network speed options (e.g. wifi, good 3G, 2G...)
+Browser developer tools generally have network throttling options, to allow you to test your app under slow network conditions. Firefox's developer tools for example have a drop-down menu available in both the [Network Monitor](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html) and [Responsive Design Mode](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html) containing network speed options (e.g. wifi, good 3G, 2G...)
 
 ## See also
 

files/en-us/glossary/validator/index.md

@@ -11,4 +11,4 @@ A validator is a program that checks for syntax errors in code. Validators can b
 ## See also
 
 - {{Interwiki("wikipedia", "Validator")}} on Wikipedia
-- [Short list of validators](/en-US/docs/Tools/Validators)
+- [Short list of validators](https://firefox-source-docs.mozilla.org/devtools-user/validators/index.html)

files/en-us/learn/accessibility/html/index.md

@@ -412,7 +412,7 @@ As an added bonus, in most browsers associating a label with a form input means
 
 > **Note:** You can see some good and bad form examples in [good-form.html](https://mdn.github.io/learning-area/accessibility/html/good-form.html) and [bad-form.html](https://mdn.github.io/learning-area/accessibility/html/bad-form.html).
 
-You can find a nice explanation of the importance of proper text labels, and how to investigate text label issues using the [Firefox Accessibility Inspector](/en-US/docs/Tools/Accessibility_inspector), in the following video:
+You can find a nice explanation of the importance of proper text labels, and how to investigate text label issues using the [Firefox Accessibility Inspector](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html), in the following video:
 
 {{EmbedYouTube("YhlAVlfH0rQ")}}
 

files/en-us/learn/common_questions/index.md

@@ -71,7 +71,7 @@ Questions related to the tools/software you can use to build websites.
   on Google App Engine?](/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine)
   - : Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.
 - [What
-  tools are available to debug and improve website performance?](/en-US/docs/Tools/Performance)
+  tools are available to debug and improve website performance?](https://firefox-source-docs.mozilla.org/devtools-user/performance/index.html)
   - : This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your
     website, using the tools to check memory usage, the JavaScript call tree, the number of DOM nodes being rendered, and
     more.

files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md

@@ -317,7 +317,7 @@ In the image below we have a pleasingly round balloon. The actual file is rectan
 
 The shape in this example is not reacting to the content of the image file. Instead, the circle function is taking its centre point from the centre of the image file, as if we had put a compass in the middle of the file and drawn a circle that fits inside the file. It is that circle that the text flows around.
 
-> **Note:** In Firefox you can use the DevTools [Shapes Inspector](/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes) to inspect Shapes.
+> **Note:** In Firefox you can use the DevTools [Shapes Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html) to inspect Shapes.
 
 The `circle()` function is just one of a few basic shapes that are defined, however there are a number of different ways to create shapes. For more information and example code for CSS Shapes see the [Guides to CSS Shapes](/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) on MDN.
 

files/en-us/learn/css/building_blocks/debugging_css/index.md

@@ -48,13 +48,13 @@ Sometimes when writing CSS you will encounter an issue where your CSS doesn't se
 
 The article [What are browser developer tools](/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) is an up-to-date guide explaining how to access the tools in various browsers and platforms. While you may choose to mostly develop in a particular browser, and therefore will become most familiar with the tools included in that browser, it is worth knowing how to access them in other browsers. This will help if you are seeing different rendering between multiple browsers.
 
-You will also find that browsers have chosen to focus on different areas when creating their DevTools. For example, in Firefox there are some excellent tools for working visually with CSS Layout, allowing you to inspect and edit [Grid Layouts](/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts), [Flexbox](/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts), and [Shapes](/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes). However, all of the different browsers have similar fundamental tools, e.g., for inspecting the properties and values applied to elements on your page, and making changes to them from the editor.
+You will also find that browsers have chosen to focus on different areas when creating their DevTools. For example, in Firefox there are some excellent tools for working visually with CSS Layout, allowing you to inspect and edit [Grid Layouts](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html), [Flexbox](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html), and [Shapes](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html). However, all of the different browsers have similar fundamental tools, e.g., for inspecting the properties and values applied to elements on your page, and making changes to them from the editor.
 
 In this lesson we will look at some useful features of the Firefox DevTools for working with CSS. In order to do so I'll be using [an example file](https://mdn.github.io/css-examples/learn/inspecting/inspecting.html). Load this up in a new tab if you want to follow along, and open up your DevTools as described in the article linked above.
 
 ## The DOM versus view source
 
-Something that can trip up newcomers to DevTools is the difference between what you see when you [view the source](/en-US/docs/Tools/View_source) of a webpage, or look at the HTML file you put on the server, and what you can see in the [HTML Pane](/en-US/docs/Tools/Page_Inspector/UI_Tour#html_pane) of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences.
+Something that can trip up newcomers to DevTools is the difference between what you see when you [view the source](https://firefox-source-docs.mozilla.org/devtools-user/view_source/index.html) of a webpage, or look at the HTML file you put on the server, and what you can see in the [HTML Pane](/en-US/docs/Tools/Page_Inspector/UI_Tour#html_pane) of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences.
 
 In the rendered DOM the browser may have normalized the HTML, for example by correcting some badly-written HTML for you. If you incorrectly closed an element, for instance by opening an `<h2>` but closing with an `</h3>`, the browser will figure out what you were meaning to do and the HTML in the DOM will correctly close the open `<h2>` with an `</h2>`. The DOM will also show any changes made by JavaScript.
 
@@ -96,7 +96,7 @@ You can add properties using the DevTools. Perhaps you have realized that you do
 
 ![The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open](inspecting3-font-size.png)
 
-> **Note:** There are other useful features in the Rules view too, for example declarations with invalid values are crossed out. You can find out more at [Examine and edit CSS](/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS).
+> **Note:** There are other useful features in the Rules view too, for example declarations with invalid values are crossed out. You can find out more at [Examine and edit CSS](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html).
 
 ## Understanding the box model
 
@@ -112,7 +112,7 @@ The element with a class of `box2` is using `border-box`, so here the padding an
 
 ![The Layout section of the DevTools](inspecting4-box-model.png)
 
-> **Note:** Find out more in [Examining and Inspecting the Box Model](/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model).
+> **Note:** Find out more in [Examining and Inspecting the Box Model](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_the_box_model/index.html).
 
 ## Solving specificity issues
 
@@ -143,7 +143,7 @@ As you will recall from the lesson on [cascade and inheritance](/en-US/docs/Lear
 
 ## Find out more about the Firefox DevTools
 
-There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main [DevTools section](/en-US/docs/Tools), and for more detail on the things we have briefly covered in this lesson see [The How To Guides](/en-US/docs/Tools/Page_Inspector#how_to).
+There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main [DevTools section](https://firefox-source-docs.mozilla.org/devtools-user/index.html), and for more detail on the things we have briefly covered in this lesson see [The How To Guides](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html#how-to).
 
 ## Debugging problems in CSS
 

files/en-us/learn/css/css_layout/grids/index.md

@@ -600,7 +600,7 @@ aside {
 
 {{ EmbedLiveSample('Grid frameworks in CSS Grid', '100%', 600) }}
 
-If you use the [Firefox Grid Inspector](/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) to overlay the grid lines on your design, you can see how our 12-column grid works.
+If you use the [Firefox Grid Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) to overlay the grid lines on your design, you can see how our 12-column grid works.
 
 ![A 12 column grid overlaid on our design.](learn-grids-inspector.png)
 
@@ -615,7 +615,7 @@ In this overview, we've toured the main features of CSS Grid Layout. You should
 ## See also
 
 - [CSS Grid guides](/en-US/docs/Web/CSS/CSS_Grid_Layout#guides)
-- [CSS Grid Inspector: Examine grid layouts](/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts)
+- [CSS Grid Inspector: Examine grid layouts](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html)
 
 {{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
 

files/en-us/learn/css/css_layout/media_queries/index.md

@@ -200,7 +200,7 @@ In the early days of responsive design, many designers would attempt to target v
 
 There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targeting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as **breakpoints**.
 
-The [Responsive Design Mode](/en-US/docs/Tools/Responsive_Design_Mode) in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.
+The [Responsive Design Mode](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html) in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.
 
 ![A screenshot of a layout in a mobile view in Firefox DevTools.](rwd-mode.png)