Offline usage of angular-devtools

[dbosque]

Description:

When using angular-devtools on a pc without internet connection, the icons are all messed up. Probably because there is a reference to https://fonts.googleapis.com/icon?family=Material+Icons.

Please support offline usage.

[mgechev]

That's a nice one! I'll add it to the backlog and we'll evaluate its priority relative to the other feature requests we got. Thank you for the report!

[BeGj]

Lovely tool, but unfortunately is quite broken in offline. Please consider making a fix, or provide the icons in the extension build.

edit: I suppose it is this line that's responsible https://github.com/rangle/angular-devtools/blob/bac55885c6077723d2817e87283e859f2464724e/src/index.html#L9

[StephenCooper]

Probably not a recommended approach but temporary workaround

If you are installing as an unpacked extension you can work around this by downloading the font files yourself manually and updating the index.html as follows.

Replaced

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> 

with

<link rel="stylesheet" href="fonts.css" />

In fonts.css I copied the contents of that link but updated the src to point to a local copy of the woff2 file.

/* fallback */
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format("woff2");
}

.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

[BeGj]

I got it working thanks to your comment @StephenCooper

1. Search for <link rel="stylesheet" href="fonts.css" /> replace with <link rel="stylesheet" href="assets/fonts.css" />
2. Put fonts.css and the original woff2 into projects/shell-chrome/src/assets
3. yarn build:chrome
4. Loaded dist/shell-chrome as unpacked extension in chrome://extensions/

[mgechev]

If anyone wants to open a PR with this improvement, I'd love to work with you on a review and release the fix after that.

[wizardnet972]

@mgechev basically I think it's should be two versions of the extension. one for offline the other for online. because the offline version will have to contain the font in part of the bundle. this is can be in the build time to prevent duplication of code or different index files.

Another suggestion is to use https://github.com/typekit/webfontloader to try to load the font and use the fallback to load the font from the assets folder.

What do you think about it? I can send PR if you approve.