Reorganize neterror images

- added images/ directory
- placing .svg images in images/
- moved default_N_percent directory to images/
- replaced the help_outline PNGs with SVG

Bug: 852872
Change-Id: I7c3083526a64304f461ed964b040767ba6d8afe4
Reviewed-on: https://chromium-review.googlesource.com/1210962Reviewed-by: Edward Jung <edwardjung@chromium.org>
Reviewed-by: Asanka Herath <asanka@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: Dan H <harringtond@chromium.org>
Cr-Commit-Position: refs/heads/master@{#589654}

chrome/browser/resources/chromeos/neterror.css

@@ -44,8 +44,8 @@ a {
 
 .icon-offline {
   content: -webkit-image-set(
-      url(../../../../components/neterror/resources/default_100_percent/offline/100-error-offline.png) 1x,
-      url(../../../../components/neterror/resources/default_200_percent/offline/200-error-offline.png) 2x);
+      url(../../../../components/neterror/resources/images/default_100_percent/offline/100-error-offline.png) 1x,
+      url(../../../../components/neterror/resources/images/default_200_percent/offline/200-error-offline.png) 2x);
 }
 
 #help-box-outer {

components/neterror/resources/images/help_outline.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0z"/>
+    <path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/>
+</svg>

components/neterror/resources/neterror.css

@@ -57,15 +57,15 @@ a {
 
 .icon-offline {
   content: -webkit-image-set(
-      url(default_100_percent/offline/100-error-offline.png) 1x,
-      url(default_200_percent/offline/200-error-offline.png) 2x);
+      url(images/default_100_percent/offline/100-error-offline.png) 1x,
+      url(images/default_200_percent/offline/200-error-offline.png) 2x);
   position: relative;
 }
 
 .icon-disabled {
   content: -webkit-image-set(
-      url(default_100_percent/offline/100-disabled.png) 1x,
-      url(default_200_percent/offline/200-disabled.png) 2x);
+      url(images/default_100_percent/offline/100-disabled.png) 1x,
+      url(images/default_200_percent/offline/200-disabled.png) 2x);
   width: 112px;
 }
 
@@ -112,9 +112,7 @@ a {
 }
 
 #error-information-button {
-  content: -webkit-image-set(
-          url(../../resources/default_100_percent/neterror/help_outline.png) 1x,
-          url(../../resources/default_200_percent/neterror/help_outline.png) 2x);
+  content: url(images/help_outline.svg);
   height: 24px;
   vertical-align: -.15em;
   width: 24px;
@@ -333,7 +331,7 @@ a {
 }
 
 #download-link:before, #download-link-clicked:before {
-  content: url(offline_content/download-blue.svg);
+  content: url(images/download-blue.svg);
   display: inline-block;
   margin-inline-end: 4px;
   vertical-align: -webkit-baseline-middle;

components/neterror/resources/neterror.html

@@ -66,16 +66,16 @@
         <div id="offline-content-summary" onclick="launchDownloadsPage()" hidden>
           <div class="offline-content-summary-images">
             <div class="offline-content-summary-image-truncate">
-              <img id="earth" src="offline_content/earth.svg">
+              <img id="earth" src="images/earth.svg">
             </div>
             <div class="offline-content-summary-image-truncate">
-              <img id="music-note" src="offline_content/music-note.svg">
+              <img id="music-note" src="images/music-note.svg">
             </div>
             <div class="offline-content-summary-image-truncate">
-              <img id="video" src="offline_content/video.svg">
+              <img id="video" src="images/video.svg">
             </div>
             <div>
-              <img id="image" src="offline_content/image.svg">
+              <img id="image" src="images/image.svg">
             </div>
           </div>
           <div class="offline-content-summary-description"
@@ -130,10 +130,10 @@
   </div>
 
   <div id="offline-resources">
-    <img id="offline-resources-1x" src="default_100_percent/offline/100-offline-sprite.png">
-    <img id="offline-resources-2x" src="default_200_percent/offline/200-offline-sprite.png">
-    <img id="offline-resources-bday-1x" src="default_100_percent/offline/100-offline-sprite-bday.png">
-    <img id="offline-resources-bday-2x" src="default_200_percent/offline/200-offline-sprite-bday.png">
+    <img id="offline-resources-1x" src="images/default_100_percent/offline/100-offline-sprite.png">
+    <img id="offline-resources-2x" src="images/default_200_percent/offline/200-offline-sprite.png">
+    <img id="offline-resources-bday-1x" src="images/default_100_percent/offline/100-offline-sprite-bday.png">
+    <img id="offline-resources-bday-2x" src="images/default_200_percent/offline/200-offline-sprite-bday.png">
     <template id="audio-resources">
       <audio id="offline-sound-press" src="sounds/button-press.mp3"></audio>
       <audio id="offline-sound-hit" src="sounds/hit.mp3"></audio>