feat(devtools): support icons in offline mode (#45430) (#45743)

Add support to material design icons in offline mode for Angular Devtools. Self hosting the web font so icons are loaded regardless of network connection. Bring the font file as well as its corresponding css file from third_party repo through bazel into shell-browser directory while building. PR Close #45743
angular · May 12, 2022 · 5e404d3 · 5e404d3
1 parent aea7b98
commit 5e404d3
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 10 deletions.
diff --git a/devtools/projects/shell-browser/src/assets/BUILD.bazel b/devtools/projects/shell-browser/src/assets/BUILD.bazel
@@ -6,5 +6,8 @@ filegroup(
         "*.svg",
         "**/*.png",
         "*.css",
-    ]),
+    ]) + [
+        "//third_party/github.com/google/material-design-icons:material-design-icons",
+        "//third_party/github.com/google/material-design-icons:LICENSE",
+    ],
 )
diff --git a/devtools/projects/shell-browser/src/index.html b/devtools/projects/shell-browser/src/index.html
@@ -5,8 +5,8 @@
     <title>ShellChrome</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
     <link rel="icon" type="image/x-icon" href="assets/icon16.png" />
+    <link rel="stylesheet" href="./third_party/github.com/google/material-design-icons/material-icons.css">
     <link rel="stylesheet" href="./styles.css"></head>
   </head>
   <body>

diff --git a/devtools/projects/shell-browser/src/popups/not-angular.html b/devtools/projects/shell-browser/src/popups/not-angular.html
@@ -1,7 +1,7 @@
 <html>
 
 <head>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+  <link href="../third_party/github.com/google/material-design-icons/material-icons.css" rel="stylesheet" />
   <style>
     * {
       margin: 0;

diff --git a/devtools/projects/shell-browser/src/popups/production.html b/devtools/projects/shell-browser/src/popups/production.html
@@ -1,7 +1,7 @@
 <html>
 
 <head>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+  <link href="../third_party/github.com/google/material-design-icons/material-icons.css" rel="stylesheet" />
   <style>
     * {
       margin: 0;

diff --git a/devtools/projects/shell-browser/src/popups/supported.html b/devtools/projects/shell-browser/src/popups/supported.html
@@ -1,7 +1,7 @@
 <html>
 
 <head>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+  <link href="../third_party/github.com/google/material-design-icons/material-icons.css" rel="stylesheet" />
   <style>
     * {
       margin: 0;

diff --git a/devtools/projects/shell-browser/src/popups/unsupported.html b/devtools/projects/shell-browser/src/popups/unsupported.html
@@ -1,7 +1,7 @@
 <html>
 
 <head>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+  <link href="../third_party/github.com/google/material-design-icons/material-icons.css" rel="stylesheet" />
   <style>
     * {
       margin: 0;

diff --git a/third_party/fonts.google.com/open-sans/BUILD.bazel b/third_party/fonts.google.com/open-sans/BUILD.bazel
@@ -2,7 +2,7 @@ licenses(["notice"])
 
 # Downloaded from: https://fonts.google.com/?selection.family=Open+Sans:300,400,600,700
 # Timestamp: 03/02/2019
-exports_files(["LICENSE.txt"])
+exports_files(["LICENSE"])
 
 filegroup(
     name = "open-sans",

diff --git a/third_party/github.com/google/material-design-icons/BUILD.bazel b/third_party/github.com/google/material-design-icons/BUILD.bazel
@@ -2,15 +2,18 @@ licenses(["notice"])
 
 # Downloaded from: https://github.com/google/material-design-icons/blob/3.0.1/LICENSE
 # Timestamp: 06/02/2019
-exports_files(["LICENSE.txt"])
+exports_files(["LICENSE"])
 
 filegroup(
     name = "material-design-icons",
     srcs = [
         # https://github.com/google/material-design-icons/blob/3.0.1/iconfont/material-icons.css
         "material-icons.css",
-        # https://github.com/google/material-design-icons/blob/3.0.1/iconfont/MaterialIcons-Regular.ttf
+        # https://github.com/google/material-design-icons/blob/f5cdf3a23d3acdd8490fc4879f4f59a705f409ef/font/MaterialIcons-Regular.ttf
         "MaterialIcons-Regular.ttf",
     ],
-    visibility = ["//modules/playground:__subpackages__"],
+    visibility = [
+        "//devtools/projects/shell-browser:__subpackages__",
+        "//modules/playground:__subpackages__",
+    ],
 )
diff --git a/third_party/github.com/google/material-design-icons/MaterialIcons-Regular.ttf b/third_party/github.com/google/material-design-icons/MaterialIcons-Regular.ttf