Centralized all minor images/icons. Fixes issue #81.

docs/authoring-development-workflow.html

@@ -33,7 +33,7 @@ Chrome) to test resizing layouts</li>
 
 <p>Navigate to a URL you wish to debug then toggle between
 <em>dock-to-right</em> and <em>dock-to-window</em> by clicking and <strong>long-holding</strong> on the
-layout icon <img src="authoring-development-workflow/layout_button.png"/>  at the bottom left-hand corner of the DevTools.</p>
+layout icon <img src="../../images/layout-button.png"/>  at the bottom left-hand corner of the DevTools.</p>
 
 <div class="screenshot"><img src="authoring-development-workflow/chrome_docktomain.jpg"/></div>
 
@@ -333,7 +333,7 @@ complete this process. This will relaunch the browser.</p>
 
 <div class="screenshot"><img src="authoring-development-workflow/image_37.png"/></div>
 
-<p>When you now click the <em>Settings</em> cog <img src="authoring-development-workflow/image_38.png"/>
+<p>When you now click the <em>Settings</em> cog <img src="../../images/gear.png"/>
 , a new 'Experiments' tab will be available,
 where you can easily enable or disable experimental features.
 </p>

docs/clean-testing-environment.html

@@ -1,13 +1,13 @@
 {{+bindTo:partials.standard_devtools_article}}
 <h1>Creating A Clean Testing Environment</h1>
- 
-<p>A clean testing environment allows you to to easily determine the point of 
-failure for your site or web application, rather than wondering if it was 
+
+<p>A clean testing environment allows you to to easily determine the point of
+failure for your site or web application, rather than wondering if it was
 something in the background that caused your slow-down or failure.</p>
 
-<p>Apps, extensions, background processes and unnecessary tabs are only some of the 
-things that can impact your profiling figures and should be avoided where 
-possible. This is of particular relevance when you wish to accurately profile 
+<p>Apps, extensions, background processes and unnecessary tabs are only some of the
+things that can impact your profiling figures and should be avoided where
+possible. This is of particular relevance when you wish to accurately profile
 using the <a href="timeline.html">Timeline</a>, <a href="cpu-profiling.html">Profiles</a> or <code>about:tracing</code>.</p>
 
 <strong>To set up a clean testing environment:</strong>
@@ -16,24 +16,24 @@ using the <a href="timeline.html">Timeline</a>, <a href="cpu-profiling.html">Pro
 <li>
 Ensure Chrome is being run with a clean profile:
 <ul>
-    <li><p>Option 1: Use Incognito mode. Open the <b>Chrome menu</b> <img src="/devtools/images/chrome-menu.png" alt="Chrome menu"/> and select <b>New Incognito Window</b>, or launch 
+    <li><p>Option 1: Use Incognito mode. Open the <b>Chrome menu</b> <img src="/../../images/chrome-menu.png" alt="Chrome menu"/> and select <b>New Incognito Window</b>, or launch
        Chrome with the <code>--incognito</code> switch.</p>
 
        <p><img src="clean-testing-environment/incognito.png"/></p></li>
-    <li><p>Option 2: Use a fresh Chrome profile. Click the user icon in the top-right corner 
+    <li><p>Option 2: Use a fresh Chrome profile. Click the user icon in the top-right corner
 	of your Chrome window and select <b>New User</b>.</p>
 
         <p><img src="clean-testing-environment/screenprofile.jpg"/></p>
         <p>&nbsp;</p>
-       <p>To guarantee a clean profile that doesn't inherit 
-       any extensions or settings, launch Chrome using the <code>--user-data-dir</code> 
+       <p>To guarantee a clean profile that doesn't inherit
+       any extensions or settings, launch Chrome using the <code>--user-data-dir</code>
        switch with the path <code>'/dev/null'</code>.  e.g:</p>
 
        <p>
        <ul>
         <li>OSX:    <code>open -a "Google Chrome" --args --user-data-dir=/dev/null</code></li>
         <li>Linux:  <code>google-chrome --user-data-dir=/dev/null</code></li>
-        <li>Windows: <code>"C:\Users\username\AppData\Local\Google\Chrome\Application\chrome.exe" 
+        <li>Windows: <code>"C:\Users\username\AppData\Local\Google\Chrome\Application\chrome.exe"
           --user-data-dir=/dev/null</code></li>
         </ul>
       </p>
@@ -41,14 +41,14 @@ Ensure Chrome is being run with a clean profile:
 <p>This will ensure you get a completely empty profile instead of loading the user's profile as read-only.</p><br/>
 </li>
 
-<li>Close other tabs and processes/applications you may have running in the background. If these apps need to run in the background, use your system monitor to ensure apps are not stealing too much CPU or RAM. <img 
+<li>Close other tabs and processes/applications you may have running in the background. If these apps need to run in the background, use your system monitor to ensure apps are not stealing too much CPU or RAM. <img
   src="clean-testing-environment/activity.png"/></li>
 
 <li>Disable any Dynamic CPU overclocking you may have enabled on your system.</li>
 <li>Make sure you are up to date with the latest builds of Chrome. You can use <a href="http://download-chromium.appspot.com">http://download-chromium.appspot.com</a> to grab edge builds.</li>
 
-<li>If you are running into a bug and generally use Chrome Canary as your 
-  development browser, it is worth testing in Chrome Stable to ensure the issue 
+<li>If you are running into a bug and generally use Chrome Canary as your
+  development browser, it is worth testing in Chrome Stable to ensure the issue
   is unrelated to new features or bugs.</li>
 </ul>
 

docs/contributing.md

@@ -230,7 +230,7 @@ Adjust the path to `chromeServerProfile` to be some writable directory in your s
 ### Step 3: Inspector inception
 
 Once Canary is open go to any web page (the page doesn't matter because you're
-not going to use it for anything). Open up the DevTools for the page, and undock <img src="contributing-files/image03.png" alt="undock DevTools"/> from the window so it is in a separate window.<br/>
+not going to use it for anything). Open up the DevTools for the page, and undock <img src="../../images/layout-button.png" alt="undock DevTools"/> from the window so it is in a separate window.<br/>
 
 Next, open a new tab or launch another instance of Chrome (either Chrome Stable
 or Canary) and go to [http://localhost:9222](http://localhost:9222).

docs/dom-and-styles.html

@@ -839,7 +839,7 @@ global.animationData = global.animationData || {};
 <ul>
 <li>Right-click any element on the page the page and select <strong>Inspect Element</strong>.</li>
 <li>Press <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">C</span> (or <span class="kbd">Cmd</span> + <span class="kbd">Shift</span> + <span class="kbd">C</span> on mac) to open DevTools in Inspect Element mode, then click on an element.</li>
-<li>Click <strong>Inspect Element</strong> <img src="dom-and-styles-files/images/inspect-icon.png" class="inspect-icon" alt="Inspect icon"> at the top of the DevTools window to go into Inspect Element Mode, then click on an element.</li>
+<li>Click the <strong>Inspect Element button</strong> <img src="../../images/inspect-icon.png" class="inspect-icon" alt="Inspect icon"> at the top of the DevTools window to go into Inspect Element Mode, then click on an element.</li>
 <li>Use the <code>inspect()</code> method in the console, such as <code>inspect(document.body)</code>. See the <a href="commandline-api.md">Command-Line API</a> for information on using inspect.</li>
 </ul>
 <div class="devtools-animation-container">
@@ -1027,7 +1027,7 @@ element.className = 'active';
 <li>The currently selected element.</li>
 <li>Ancestors of the currently selected element.</li>
 </ul>
-<p>If you find it excessive to view all event handlers, including those registered using event delegation, click <strong>Filter</strong><strong> </strong><img alt="" src="dom-and-styles-files/images/image_16.png" /> and select the menu item <strong>Selected Node Only</strong> which limits displayed event listeners to only those registered directly on the element.</p>
+<p>If you find it excessive to view all event handlers, including those registered using event delegation, click <strong>Filter</strong><strong> </strong><img alt="filter" src="../../images/filters.png" /> and select the menu item <strong>Selected Node Only</strong> which limits displayed event listeners to only those registered directly on the element.</p>
 <p><img alt="" src="dom-and-styles-files/images/image_17.png" /></p>
 <p class="note"><strong>Note:</strong> Many Chrome extensions add their own event listeners onto the DOM.</p>
 
@@ -1103,7 +1103,7 @@ video, audio, div, .message, body *, time {
 <p>After you have selected a valid CSS property, bring up suggestions for applicable CSS values by moving focus to the CSS property value field. For example, the property <code>display</code> suggests values such as <code>block, flex, none,</code> and others.</p>
 <p>Paste CSS into the Styles pane using <span class="kbd">Ctrl</span> + <span class="kbd">V</span> (or <span class="kbd">Cmd</span> + <span class="kbd">V</span> on Mac). Properties and their values are parsed and entered into the correct fields.</p>
 <h4 id="add-a-style-rule">Add a style rule</h4>
-<p>You may find it preferable to add styles along with a <strong>new selector</strong>. Click <strong>New Style Rule</strong> <img alt="" src="dom-and-styles-files/images/image_22.png" /> within the styles pane header bar to generate a new CSS rule.</p>
+<p>You may find it preferable to add styles along with a <strong>new selector</strong>. Click <strong>New Style Rule</strong> <img alt="plus" src="../../images/plus.png" /> within the styles pane header bar to generate a new CSS rule.</p>
 <div class="devtools-animation-container">
   <animation class="devtools-animation" src="new-style-rule" speed="2000" repeatdelay="2"></animation>
 </div>
@@ -1124,7 +1124,7 @@ video, audio, div, .message, body *, time {
 </ul>
 <p>To set an element's state:</p>
 <ul>
-<li>Click <strong>Toggle Element State</strong><img alt="" src="dom-and-styles-files/images/image_23.png" /> next to <strong>New Style Rule</strong> within the styles pane header.</li>
+<li>Click <strong>Toggle Element State</strong><img alt="" src="../../images/attributes-icon.png" /> next to <strong>New Style Rule</strong> within the styles pane header.</li>
 <li>Right-click a DOM node in the Elements panel and select <strong>Force Element State.</strong></li>
 </ul>
 <h3 id="change-history-local-modifications">Change history (Local modifications)</h3>
@@ -1143,7 +1143,7 @@ video, audio, div, .message, body *, time {
 </p>
 
 <p>Make a modification to a CSS rule which originates from an external style sheet and notice the change shows in the local modifications pane.</p>
-<p><strong>Note</strong>: When you create a new rule using New Style Rule <img alt="" src="dom-and-styles-files/images/image_24.png" />, the new rule doesn't belong to an existing stylesheet. DevTools adds it to a special inspector stylesheet. The inspector stylesheet can be edited in the Sources panel, like other files.</p>
+<p><strong>Note</strong>: When you create a new rule using New Style Rule <img alt="plus" src="../../images/plus.png" />, the new rule doesn't belong to an existing stylesheet. DevTools adds it to a special inspector stylesheet. The inspector stylesheet can be edited in the Sources panel, like other files.</p>
 <p>Explore the local modifications pane:</p>
 <ul>
 <li>Expand top-level file names to view the time <img alt="" src="dom-and-styles-files/images/image_25.png" /> a modification occurred.</li>

docs/elements-styles.html

@@ -17,8 +17,8 @@ from the <a href="http://dev.chromium.org/getting-involved/dev-channel">Develope
   <span id="computed_styles_test">THIS (Inspect Me)</span> element
   or hit <b>Control-Shift-C</b> to enter the Inspect Element mode and
   click on it. Alternatively, if you have DevTools open, click the
-  <b>Magnifier</b>
-  <img class="ui" src="elements-styles-files/magnifier.png" style="top:6px">
+  <b>Inspect Element</b>
+  <img class="ui" alt="magnifier" src="../../images/inspect-icon.png" style="top:6px">
   button at the bottom of the <b>Elements</b> panel to point-click the element
   in the page.</li>
 
@@ -144,7 +144,7 @@ from the <a href="http://dev.chromium.org/getting-involved/dev-channel">Develope
 <h3 id="styles_add_new">Adding New Rules and Properties</h3>
   <li>You can add a new style rule to be considered in addition to those found
   in the stylesheets loaded by the page. Click the <b>Gear</b>
-  <span><img src="elements-styles-files/gear.png"></span> button and
+  <span><img src="../../images/gear.png"></span> button and
   select the <nobr><b>New Style Rule</b></nobr> option. A new rule with an
   automatically suggested selector appears. Press <b>Enter</b> to accept the
   selector and start typing in the first property of the rule.

docs/elements.html

@@ -116,9 +116,9 @@ the Styles section bar.</p>
 
   <div class="screenshot"><img src="elements-files/elements_style_completion.png"></div>
 <br/>
-<p>You can add a new style selector using the <span><img src="elements-files/plus.png"></span> button found in the <strong>Styles</strong>
+<p>You can add a new style selector using the <span><img src="../../images/plus.png"></span> button found in the <strong>Styles</strong>
 section bar. In order to emulate an element's pseudostate (:active, :hover, :focus, :visited), use the
-<span><img src="elements-files/attributes.png"></span> in the Styles pane header. In will bring up a small pane where you can select
+<span><img src="../../images/attributes-icon.png" alt="attributes" /></span> in the Styles pane header. In will bring up a small pane where you can select
 which pseudostates of the selected element should be activated. </p>
 
 

docs/javascript-debugging.html

@@ -35,7 +35,7 @@ page</a> or the <a href="http://todomvc.com/architecture-examples/angularjs/">To
 inspected page. Standard controls to pause, resume, and step through code are
 provided below the panel selection icons. A button to force a pause at
 exceptions is located at the bottom of the window. Sources are visible in
-separate tabs and clicking <img src="javascript-debugging/image_1.png"/> opens the file navigator
+separate tabs and clicking <img src="../../images/show-file-navigator.png"/> opens the file navigator
 which will display all open scripts.</p>
 
 
@@ -43,11 +43,11 @@ which will display all open scripts.</p>
 
 <p>The <strong>execution control</strong> buttons are located at the top of the side panels and allow you to step through code. The buttons available are:</p>
 
-<p><strong><img src="javascript-debugging/button_continue.jpg"/> Continue:</strong> continues code execution until we encounter another breakpoint.</p>
-<p><strong><img src="javascript-debugging/button_step_over.jpg"/> Step over:</strong> step through code line-by-line to get insights into how each line affects the variables being updated. Should your code call another function, the debugger won't jump into its code, instead stepping over so that the focus remains on the current function.</p>
-<p><strong><img src="javascript-debugging/button_step_into.jpg"/> Step into:</strong> like Step over, however clicking Step into at the function call will cause the debugger to move its execution to the first line in the functions definition.</p>
-<p><strong><img src="javascript-debugging/button_stepout.jpg"/>Step out:</strong> having stepped into a function, clicking this will cause the remainder of the function definition to be run and the debugger will move its execution to the parent function.</p>
-<p><strong><img src="javascript-debugging/button_disable.png"/>Toggle breakpoints:</strong> toggles breakpoints on/off while leaving their enabled states intact.</p>
+<p><strong><img src="../../images/continue.jpg"/> Continue:</strong> continues code execution until we encounter another breakpoint.</p>
+<p><strong><img src="../../images/step_over.jpg"/> Step over:</strong> step through code line-by-line to get insights into how each line affects the variables being updated. Should your code call another function, the debugger won't jump into its code, instead stepping over so that the focus remains on the current function.</p>
+<p><strong><img src="../../images/step_into.jpg"/> Step into:</strong> like Step over, however clicking Step into at the function call will cause the debugger to move its execution to the first line in the functions definition.</p>
+<p><strong><img src="../../images/step_out.jpg"/>Step out:</strong> having stepped into a function, clicking this will cause the remainder of the function definition to be run and the debugger will move its execution to the parent function.</p>
+<p><strong><img src="../../images/disable-breakpoints.png"/>Toggle breakpoints:</strong> toggles breakpoints on/off while leaving their enabled states intact.</p>
 
 <p>There are also several related keyboard shortcuts available in the <strong>Sources</strong> panel:</p>
 
@@ -141,7 +141,7 @@ drop-down</p>
 <li>Hover over the source code to inspect local and global variables, function
 arguments etc.</li>
 <li>Delete the breakpoint by clicking the blue tag breakpoint indicator</li>
-<li>Click the <strong>Continue</strong> <img class="ui" src="javascript-debugging/image_9.png"/> button or hit <strong>F8</strong> in DevTools window to resume</li>
+<li>Click the <strong>Continue</strong> <img class="ui" src="../../images/continue.jpg"/> button or hit <strong>F8</strong> in DevTools window to resume</li>
 </ul>
 
 
@@ -177,7 +177,7 @@ set breakpoint on line 2</li>
   "dynamicScriptFunction()" disabled>Call function from dynamic
   script</button></li>
 <li>You should stop on the breakpoint</li>
-<li>Click the <strong>Continue</strong> <img class="ui" src="javascript-debugging/image_9.png"/> button or hit <strong>F8</strong> in DevTools window to resume</li>
+<li>Click the <strong>Continue</strong> <img class="ui" src="../../images/continue.jpg"/> button or hit <strong>F8</strong> in DevTools window to resume</li>
 </ul>
 
 <p><div class="screenshot"><img src="javascript-debugging/dynamic-script.jpg"/></div></p>
@@ -199,11 +199,11 @@ function onMouseOver(event) {
 }
 </script>
 <ul>
-<li>Click the <strong>Pause</strong> <img class="ui" src="javascript-debugging/image_13.png"/> button</li>
+<li>Click the <strong>Pause</strong> <img class="ui" src="../../images/pause-icon.png"/> button</li>
 <li>Move your mouse over this section</li>
 <li>You should stop in <code>onMouseOver</code>
   function</li>
-<li>Click the <strong>Continue</strong> <img class="ui" src="javascript-debugging/image_14.png"/> button or hit <strong>F8</strong> in DevTools window to resume</li>
+<li>Click the <strong>Continue</strong> <img class="ui" src="../../images/continue.jpg"/> button or hit <strong>F8</strong> in DevTools window to resume</li>
 </ul>
 
 <p><div class="screenshot"><img src="javascript-debugging/continue-to-resume.jpg"/></div></p>
@@ -223,13 +223,13 @@ function raiseAndCatchException() {
 }
 </script>
 <ul>
-<li>Click the <strong>Pause on exceptions</strong> <img class="ui" src="javascript-debugging/image_19.png"/>button at the bottom of the window to switch to
+<li>Click the <strong>Pause on exceptions</strong> <img class="ui" src="../../images/pause-gray.png"/>button at the bottom of the window to switch to
 <strong>Pause on all exceptions</strong> mode</li>
 <li><button onclick="raiseAndCatchException()">Raise
   exception!</button></li>
 <li>You should stop in <span class=
   "source-code">raiseAndCatchException</span> function</li>
-<li>Click the <strong>Continue</strong> <img class="ui" src="javascript-debugging/image_17.png"/> button or hit <strong>F8</strong> in DevTools window to resume</li>
+<li>Click the <strong>Continue</strong> <img class="ui" src="../../images/continue.jpg"/> button or hit <strong>F8</strong> in DevTools window to resume</li>
 </ul>
 
 <p><div class="screenshot"><img src="javascript-debugging/append-child.jpg"/></div></p>
@@ -254,7 +254,7 @@ function raiseException() {
 }
 </script>
 <ul>
-<li>Click the <strong>Pause on exceptions</strong> <img class="ui" src="javascript-debugging/image_19.png"/>button again to switch to <strong>Pause on uncaught
+<li>Click the <strong>Pause on exceptions</strong> <img class="ui" src="../../images/pause-blue.png"/>button again to switch to <strong>Pause on uncaught
 exceptions</strong> mode</li>
 <li><button onclick="raiseAndCatchException()">Raise
   exception!</button></li>
@@ -262,7 +262,7 @@ exceptions</strong> mode</li>
 caught</li>
 <li><button onclick="raiseException()">Raise uncaught exception!</button></li>
 <li>You should stop in <code>raiseException</code> function</li>
-<li>Click the <strong>Continue</strong> <img class="ui" src="javascript-debugging/image_9.png"/> button or hit <strong>F8</strong> in DevTools window to resume</li>
+<li>Click the <strong>Continue</strong> <img class="ui" src="../../images/continue.jpg"/> button or hit <strong>F8</strong> in DevTools window to resume</li>
 </ul>
 
 
@@ -291,7 +291,7 @@ context menu     <div id="parent" style="border: solid 2px; padding: 5px; margin
 select <strong>Break on Subtree Modifications</strong></li>
 <li><button onclick="appendChildButtonClicked()">Append child!</button></li>
 <li>You should stop on <code>appendChild</code> function call</li>
-<li>Click the <strong>Continue</strong> <img class="ui" src="javascript-debugging/image_9.png"/>  button or hit <strong>F8</strong> in DevTools window to resume</li>
+<li>Click the <strong>Continue</strong> <img class="ui" src="../../images/continue.jpg"/>  button or hit <strong>F8</strong> in DevTools window to resume</li>
 </ul>
 
 
@@ -314,7 +314,7 @@ function retrieveData() {
 }
 </script>
 <ul>
-<li>Click the <strong>Add</strong> <img class="ui" src="javascript-debugging/image_24.png"/> button on <strong>XHR Breakpoints</strong> sidebar pane on the right side
+<li>Click the <strong>Add</strong> <img class="ui" src="../../images/plus.png"/> button on <strong>XHR Breakpoints</strong> sidebar pane on the right side
 of <strong>Sources</strong> panel</li>
 <li>Type "data.txt" in text input and hit <strong>enter</strong></li>
 <li><button onclick="retrieveData()">Retrieve data.txt by XHR</button></li>
@@ -322,7 +322,7 @@ of <strong>Sources</strong> panel</li>
   call</li>
 <li>Right-click on the newly created breakpoint and select <strong>Remove Breakpoint</strong>
 context menu item</li>
-<li>Click the <strong>Continue</strong> <img class="ui" src="javascript-debugging/image_25.png"/> button or hit <strong>F8</strong> in DevTools window to resume</li>
+<li>Click the <strong>Continue</strong> <img class="ui" src="../../images/continue.jpg"/> button or hit <strong>F8</strong> in DevTools window to resume</li>
 </ul>
 
 
@@ -372,7 +372,7 @@ function hovermeMouseOut(event) {
       Hover me!
     </div></li>
 <li>You should stop on <code>mouseout</code> event handler</li>
-<li>Click the <strong>Continue</strong> <img class="ui" src="javascript-debugging/image_28.png"/> button or hit <strong>F8</strong> in DevTools window to resume</li>
+<li>Click the <strong>Continue</strong> <img class="ui" src="../../images/continue.jpg"/> button or hit <strong>F8</strong> in DevTools window to resume</li>
 </ul>
 
 <p><div class="screenshot"><img src="javascript-debugging/continue-to-resume.jpg"/></div></p>
@@ -470,7 +470,7 @@ frames and navigate to the corresponding locations in the code:</p>
 
 <p>You may also want to pause JavaScript execution next time exception is thrown
 and inspect its call stack, scope variables and state of your app. A tri-state
-stop button ( <img src="javascript-debugging/image_34.png"/> <!-- TODO: Fix alt text
+stop button ( <img src="../../images/pause-gray.png"/> <!-- TODO: Fix alt text
 and URL --> ) at the bottom of the Scripts panel enables you to switch between
 different exception handling modes: you can choose to either pause on all
 exception or only on the uncaught ones or you can ignore exceptions altogether.</p>
@@ -539,7 +539,7 @@ the DevTools:</p>
 
 <p><div class="screenshot"><img src="javascript-debugging/pretty-print-off.jpg"/></div></p>
 
-<p>And by clicking on the curly brace <img src="javascript-debugging/image_45.png"/> ("Pretty Print") icon in the bottom left
+<p>And by clicking on the curly brace <img src="../../images/prettyprint-icon.png"/> ("Pretty Print") icon in the bottom left
 corner, the JavaScript is transformed into a more human readable form. This is
 also more easy for debugging and setting breakpoints.</p>
 

docs/javascript-memory-profiling.md

@@ -204,7 +204,7 @@ When investigating memory issues, the Timeline panel’s **Memory view** can be
 
 The first thing to do is identify a sequence of actions you suspect is leaking memory. This could be anything from navigating around a site, hovering, clicking, or otherwise somehow interacting with page in a way that seems to negatively impact performance more over time.
 
-On the Timeline panel start recording (<span class="kbd">Ctrl</span> + <span class="kbd">E</span> or <span class="kbd">Cmd</span> + <span class="kbd">E</span>) and perform the sequence of actions you want to test. To force a full garbage collection click the trash icon (![](memory-profiling-files/image_8.png)) at the bottom.
+On the Timeline panel start recording (<span class="kbd">Ctrl</span> + <span class="kbd">E</span> or <span class="kbd">Cmd</span> + <span class="kbd">E</span>) and perform the sequence of actions you want to test. To force a full garbage collection click the trash icon (![](../../images/collect-garbage.png)) at the bottom.
 
 Below we see a memory leak pattern, where some nodes are not being collected:
 
@@ -253,13 +253,13 @@ On the Profiles panel, choose ** *Take Heap Snapshot* **, then click **Start** o
 
 ### Clearing snapshots
 
-Snapshots can be removed (both from DevTools and renderers memory) by pressing the Clear all profiles icon (![](memory-profiling-files/image_14.png)):
+Snapshots can be removed (both from DevTools and renderers memory) by pressing the Clear all profiles icon (![](../../images/clear.png)):
 
 ![](memory-profiling-files/image_15.png)
 
 <p class="note"><strong>Note:</strong> Closing the DevTools window will not delete collected profiles from the renderers memory. When reopening DevTools, all previously taken snapshots will reappear in the list of snapshots.</p>
 
-Remember that we mentioned earlier you can force GC from the DevTools as part of your snapshot workflow. When taking a Heap Snapshot, it is automatically forced. In Timeline it can be very convenient to force a GC by clicking on the trash can (Collect Garbage) button (<img src="memory-profiling-files/image_8.png"/>).
+Remember that we mentioned earlier you can force GC from the DevTools as part of your snapshot workflow. When taking a Heap Snapshot, it is automatically forced. In Timeline it can be very convenient to force a GC by clicking on the trash can (Collect Garbage) button (<img src="../../images/collect-garbage.png"/>).
 
 <img src="memory-profiling-files/force.png"/>
 

docs/mobile-emulation.html

@@ -66,7 +66,7 @@ make this process more straightforward.</p>
 
 <h4>Notes</h4>
 <ul>
-  <li>The <strong>Swap dimensions</strong> button in between the <em>Resolution</em> values (<img src="mobile-emulation/image_6.png"/>) will swap the width and height.</li>
+  <li>The <strong>Swap dimensions</strong> button in between the <em>Resolution</em> values (<img src="../../images/swap-dimensions-button.png"/>) will swap the width and height.</li>
   <li><b>Shrink to fit</b> ensures the emulated device screen is completely visible within your browser window. This setting does not emulate the device differently.</li>
   <li>Device media queries (e.g <code>@media only screen and (min-device-width:768px)</code>) will be enabled according to the values defined in the Resolution settings.</li>
   <li>You may want to undock DevTools or dock it to the right while working with emulated viewport settings.

docs/network.md

@@ -116,7 +116,7 @@ Latency is the time to load the first byte in the response.</td>
 
 ### Preserving the network log upon navigation
 
-By default, the current network record log is discarded when you navigate to another page, or reload the current page. To preserve the recording log in these scenarios, click the black **Preserve log upon navigation** button <img src="network-files/keep-log-off.png" alt="Don't preserve log on navigation"/> at the bottom of the Network panel; new records are appended to the bottom of the table. Click the same button again (now red <img src="network-files/keep-log-on.png" alt="Preserve resources on navigation"/>) to disable log preservation.
+By default, the current network record log is discarded when you navigate to another page, or reload the current page. To preserve the recording log in these scenarios, click the black **Preserve log upon navigation** button <img src="../../images/recording-off.png" alt="Don't preserve log on navigation"/> at the bottom of the Network panel; new records are appended to the bottom of the table. Click the same button again (now red <img src="../../images/recording-on.png" alt="Preserve resources on navigation"/>) to disable log preservation.
 
 ### Sorting and filtering ###
 
@@ -149,7 +149,7 @@ You can change the default set of columns displayed by the Network table. To sho
 
 ### Changing resource row sizes
 
-You can view the Network table with large resource rows (the default), or small resource rows. Click the blue **Use small resource rows** toggle button <img src="network-files/small-resource-rows.png" alt="Small resource rows"/> at the bottom of the panel to view small rows. Click the same button (now gray <img src="network-files/large-rows.png" alt="Large resource rows"/>) to view large resource rows again. Large rows enable some columns to display two text fields: a primary field and a secondary field (Time and Latency, for instance). When viewing small rows only the primary field is displayed.
+You can view the Network table with large resource rows (the default), or small resource rows. Click the blue **Use small resource rows** toggle button <img src="../../images/small-resource-rows.png" alt="Small resource rows"/> at the bottom of the panel to view small rows. Click the same button (now gray <img src="../../images/large-resource-rows.png" alt="Large resource rows"/>) to view large resource rows again. Large rows enable some columns to display two text fields: a primary field and a secondary field (Time and Latency, for instance). When viewing small rows only the primary field is displayed.
 
 In the following screenshot, the Network table is viewed with small resource rows and just the Timeline column.
 

docs/resource-panel.md

@@ -22,7 +22,7 @@ You can inspect IndexedDB databases and object stores, page through an object st
 
 **To clear the object store**, do one of the following:
 
-* Click the **Clear object store** button <img src="resources-files/clear.png" /> at the bottom of the panel.
+* Click the **Clear object store** button <img src="../../images/clear.png" /> at the bottom of the panel.
 * Right-click or Control-click the object store and select **Clear** from the context menu.
 
 **To view properties of a database**, select it from the list of databases.
@@ -37,7 +37,7 @@ their contents.
 * **To view the available Web SQL databases**, expand the Web SQL item in the tree control.
 * **To view available tables in a database**, expand the database tree item.
 * **To view a table's records**, select the table. It's properties appear in the right-hand pane.
-* **To refresh the view of the database**, click the Refresh button <img src="resources-files/refresh.png" /> at the bottom of the panel. 
+* **To refresh the view of the database**, click the Refresh button <img src="../../images/refresh.png" /> at the bottom of the panel. 
 
 You can query a Web SQL database's tables with SQL commands and view 
 query results in a tabular format. As you type out a command or table name, code hints are provided for the names of supported SQL commands and clauses, and the names of tables that the database contains.
@@ -80,7 +80,7 @@ You can clear (delete) a single cookies, all cookies in the selected frame group
 
 **To clear all cookies from the selected frame group**, do one of the following:
 
-* Click the Clear button <img src="resources-files/clear.png" /> at the bottom of the Resources panel.
+* Click the Clear button <img src="../../images/clear.png" /> at the bottom of the Resources panel.
 * Right-click on the frame group and select **Clear** from the context menu.
 * Right-click on a cookie row in the table and select **Clear All**.
 
@@ -100,7 +100,7 @@ Note the following about this operation:
 You can also refresh the table to reflect any changes to the page's cookies.
 
 **To refresh the cookies table**, click the refresh button <img 
-src="resources-files/refresh.png" /> at the bottom of the Resources panel. 
+src="../../images/refresh.png" /> at the bottom of the Resources panel. 
 
 ## Application Cache
 
@@ -176,7 +176,7 @@ You can view and edit local and session storage key/value pairs you've created u
 * Right-click or Control-click the cell you want to edit and choose Edit from the context menu.
 
 **To refresh the table with new storage data**, click the Refresh button at the bottom of the panel.
-<img src="resources-files/refresh.png" />
+<img src="../../images/refresh.png" />
 
 # Inspecting page resources
 

docs/settings.html

@@ -6,7 +6,7 @@
   <p>
     <strong>To modify the Settings in DevTools:</strong>
     <ul>
-      <li>Click on the Settings cog <img src="settings-files/settings-icon.png"> and open up the General Settings pane to make changes. Alternatively, you can use the shortcut <span class="kbd">?</span> to open to Settings pane too.</li>
+      <li>Click on the Settings cog <img src="../../images/gear.png" alt="gear"> and open up the General Settings pane to make changes. Alternatively, you can use the shortcut <span class="kbd">?</span> to open to Settings pane too.</li>
     </ul>
   </p>
 

docs/shortcuts.html

@@ -13,7 +13,7 @@
       <p> To access the DevTools, on any web page or app in Google Chrome you can use one of these options: </p>
 
       <ul>
-        <li> Open the <b>Chrome menu </b> <img src="shortcuts-files/chrome-menu.png" alt="Chrome menu"> at the top-right of your browser window, then select <b>Tools</b> &gt; <b>Developer Tools</b>.</li>
+        <li> Open the <b>Chrome menu </b> <img src="../../images/chrome-menu.png" alt="Chrome menu"> at the top-right of your browser window, then select <b>Tools</b> &gt; <b>Developer Tools</b>.</li>
         <li> Right-click on any page element and select <b>Inspect Element</b>.</li>
       </ul>
 
@@ -292,11 +292,11 @@
         </table>
 
         <p>
-          <img src="shortcuts-files/toggle-element-state.png" alt="Element Pseudostates" />
+          <img src="../../images/attributes-icon.png" alt="Element Pseudostates" />
           Emulate an element's pseudo state (<code>:active</code>, <code>:hover</code>, <code>:focus</code>, <code>:visited</code>)
         </p>
         <p>
-          <img src="shortcuts-files/new-style-rule.png" alt="Adding style selectors" />
+          <img src="../../images/plus.png" alt="Adding style selectors" />
           Add new style selectors
         </p>
 
@@ -424,15 +424,15 @@
           </tbody>
         </table>
         <p>
-          <img src="shortcuts-files/pause-on-exceptions-button.png" alt="Pause on Exception Button" />
+          <img src="../../images/pause-gray.png" alt="Pause on Exception Button" />
           Don't pause on exceptions
         </p>
         <p>
-          <img src="shortcuts-files/pause-on-uncaught-exceptions-button.png" alt="Pause on All Exceptions" />
+          <img src="../../images/pause-blue.png" alt="Pause on All Exceptions" />
           Pause on All exceptions (including those caught within try/catch blocks)
         </p>
         <p>
-          <img src="shortcuts-files/pause-on-uncaught-errors-button.png" alt="Pause on Uncaught Exceptions" />
+          <img src="../../images/pause-purple.png" alt="Pause on Uncaught Exceptions" />
           Pause on uncaught exceptions (usually the one you want)
         </p>
 

docs/timeline.md

@@ -113,11 +113,11 @@ To make a recording, you start a recording session, interact with your applicati
     <li>Open the page you want to record.</li>
     <li>Open the Timeline panel and start recording by doing one of the following:</li>
     <ul>
-        <li>Click the round record button at the bottom of the Timeline panel. <img width="32px" style="vertical-align:middle" src="timeline-images/recordbutton-off.png"></img></li>
+        <li>Click the round record button at the bottom of the Timeline panel. <img width="32px" style="vertical-align:middle" src="../../images/recording-off.png"></img></li>
         <li>Press the keyboard shortcut Ctrl+E, or Cmd+E on Mac.
         </li>
     </ul>
-    <p>The Record button turns red during a recording. <img src="timeline-images/recordbutton-on.png" style="vertical-align:middle" width="32px"></img> </p>
+    <p>The Record button turns red during a recording. <img src="../../images/recording-on.png" style="vertical-align:middle" width="32px"></img> </p>
     <li>Perform any necessary user actions to record the desired behavior.</li>
     <li>Stop the recording by pressing the now red record button, or
     repeating the keyboard shortcut.</li>

docs/tips-and-tricks.html

@@ -205,7 +205,7 @@ $x('//'img, frame);
 
 <p><img src="tips-and-tricks/image_0.png"  /></p>
 
-<p>Timeline won’t display any data by default but you can begin a recording session with it by opening your app and clicking on the circle <img src="tips-and-tricks/recordbuttonblack.png"/> at the bottom of the pane. Using the <span class="kbd">Ctrl</span> + <span class="kbd">E</span> or <span class="kbd">Cmd</span> + <span class="kbd">E</span> shortcut will also trigger a record.</p>
+<p>Timeline won’t display any data by default but you can begin a recording session with it by opening your app and clicking on the circle <img src="../../images/recording-off.png"/> at the bottom of the pane. Using the <span class="kbd">Ctrl</span> + <span class="kbd">E</span> or <span class="kbd">Cmd</span> + <span class="kbd">E</span> shortcut will also trigger a record.</p>
 
 <p><img src="tips-and-tricks/image_1.png"  /></p>
 
@@ -374,7 +374,7 @@ $x('//'img, frame);
 
 <h3 id="tracking-uncaught-exceptions">Tracking uncaught exceptions</h3>
 
-<p>From the Sources pane, double clicking the pause script execution (<img src="tips-and-tricks/image_31.png"  />) button will break the code when an uncaught exception occurs, preserving the call stack and the current state of the application - some refer to this as the purple pause.</p>
+<p>From the Sources pane, double clicking the pause script execution (<img src="../../images/pause-icon.png"  />) button will break the code when an uncaught exception occurs, preserving the call stack and the current state of the application - some refer to this as the purple pause.</p>
 
 <p><img src="tips-and-tricks/image_32.png"  /></p>
 
@@ -406,7 +406,7 @@ $x('//'img, frame);
 
 <ul>
 <li><p>Go to the Sources panel and selected your desired script from the scripts list.</p></li>
-<li><p>Next, press the "Pretty print" button <img src="tips-and-tricks/image_37.png"  /> (marked with curly braces) from the bottom of the DevTools window.</p></li>
+<li><p>Next, press the "Pretty print" button <img src="../../images/prettyprint-icon.png"  /> (marked with curly braces) from the bottom of the DevTools window.</p></li>
 <li><p>Your code should now be prettified!</p></li>
 </ul>
 
@@ -489,7 +489,7 @@ Object("hello")
 
 <p><img src="tips-and-tricks/image_45.png"  /></p>
 
-<p>A pause button ( <img src="tips-and-tricks/image_46.png"  />) at the top of the Scripts panel enables you to switch between different exception handling modes. You likely don't want to pause on all exceptions, unless you're debugging code that's wrapped in try/catch.</p>
+<p>A pause button ( <img src="../../images/pause-gray.png"  />) at the top of the Scripts panel enables you to switch between different exception handling modes. You likely don't want to pause on all exceptions <img src="../../images/pause-blue.png" />, unless you're debugging code that's wrapped in try/catch.</p>
 
 
 
@@ -600,13 +600,13 @@ Object("hello")
 
 <p>Once you have finished adding a property, you can hit the tab key to set the next property.</p>
 
-<p>New selectors can be added by clicking the <img src="tips-and-tricks/image_61.png"  />button to the right-hand side of the "Styles" sub-panel. This allows you to define a selector and similarly, add new properties and values as needed.</p>
+<p>New selectors can be added by clicking the <img src="../../images/plus.png" alt="plus" />button to the right-hand side of the "Styles" sub-panel. This allows you to define a selector and similarly, add new properties and values as needed.</p>
 
 <p>Note: You can also edit any selector in the Styles pane by single-clicking on the name of a selector. Once the name has been changed, the existing properties for the selector will be applied to the element selection defined by the new selector.</p>
 
 <p><img src="tips-and-tricks/image_62.png"  /></p>
 
-<p>New pseudo-selectors can be added in a similar fashion, by appending them to the name of a selector. Also note that clicking on the "toggle element states" <img src="tips-and-tricks/image_63.png"  />button, to the right of the  new selector button will toggle the visibility of the "Force element state" pane.</p>
+<p>New pseudo-selectors can be added in a similar fashion, by appending them to the name of a selector. Also note that clicking on the "toggle element states" <img src="../../images/attributes-icon.png" alt="toggle"  />button, to the right of the  new selector button will toggle the visibility of the "Force element state" pane.</p>
 
 <p><img src="tips-and-tricks/image_64.png"  /></p>
 
@@ -901,7 +901,7 @@ mode. See <a href="https://code.google.com/p/chromium/issues/detail?id=133915">h
 <p>Dock-to-right mode is also useful for previewing how your pages look when viewed on screens with smaller viewports. To use this:</p>
 
 <ul>
-<li><p>Enable dock-to-right mode by long-holding on the layout switcher icon <img src="tips-and-tricks/image_91.png"  /> at the bottom of the DevTools window</p></li>
+<li><p>Enable dock-to-right mode by long-holding on the layout switcher icon <img src="../../images/layout-button.png" alt="Layout Button"  /> at the bottom of the DevTools window</p></li>
 <li><p>You can now drag the window splitter right and left to change the width of the viewport and trigger your media query breakpoints.</p></li>
 </ul>