1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
🦊 Minimalized version of MetaMask for my own personal use.
Go to file
Mark Stacey 0f8a9a5d49
Serve CSS as an external file (#6894)
The CSS is now served as an external file instead of being injected.
This was done to improve performance. Ideally we would come to a middle
ground between this and the former behaviour by injecting only the CSS
that was required for the initial page load, then lazily loading the
rest. However that change would be more complex. The hope was that
making all CSS external would at least be a slight improvement.

Performance metrics were collected before and after this change to
determine whether this change actually helped. The metrics collected
were the timing events provided by Chrome DevTools:

* DOM Content Loaded (DCL) [1]
* Load (L) [2]
* First Paint (FP) [3]
* First Contentful Paint (FCP) [3]
* First Meaningful Paint (FMP) [3]

Here are the results (units in milliseconds):

Injected CSS:

| Run | DCL | L | FP | FCP | FMP |
| :--- | ---: | ---: | ---: | ---: | ---: |
| 1 | 1569.45 | 1570.97 | 1700.36 | 1700.36 | 1700.36 |
| 2 | 1517.37 | 1518.84 | 1630.98 | 1630.98 | 1630.98 |
| 3 | 1603.71 | 1605.31 | 1712.56 | 1712.56 | 1712.56 |
| 4 | 1522.15 | 1523.72 | 1629.3 | 1629.3 | 1629.3 |
| **Min** | 1517.37 | 1518.84 | 1629.3 | 1629.3 | 1629.3 |
| **Max** | 1603.71 | 1605.31 | 1712.56 | 1712.56 | 1712.56 |
| **Mean** | 1553.17 | 1554.71 | 1668.3 | 1668.3 | 1668.3 |
| **Std. dev.** | 33.41 | 33.43 | 38.16 | 38.16 | 38.16 |

External CSS:

| Run | DCL | L | FP | FCP | FMP |
| :--- | ---: | ---: | ---: | ---: | ---: |
| 1 | 1595.4 | 1598.91 | 284.97 | 1712.86 | 1712.86 |
| 2 | 1537.55 | 1538.99 | 199.38 | 1633.5 | 1633.5 |
| 3 | 1571.28 | 1572.74 | 268.65 | 1677.03 | 1677.03 |
| 4 | 1510.98 | 1512.33 | 206.72 | 1607.03 | 1607.03 |
| **Min** | 1510.98 | 1512.33 | 199.38 | 1607.03 | 1607.03 |
| **Max** | 1595.4 | 1598.91 | 284.97 | 1712.86 | 1712.86 |
| **Mean** | 1553.8025 | 1555.7425 | 239.93 | 1657.605 | 1657.605 |
| **Std. dev.** | 29.5375 | 30.0825 | 36.88 | 37.34 | 37.34 |

Unfortunately, using an external CSS file made no discernible improvement
to the overall page load time. DCM and L were practically identical, and
FCP and FMP were marginally better (well within error margins).

However, the first paint time was _dramatically_ improved. This change
seems worthwhile for the first paint time improvement alone. It also
allows us to delete some code and remove a dependency.

The old `css.js` module included two third-party CSS files as well, so
those have been imported into the main Sass file. This was easier than
bundling them in the gulpfile.

The resulting CSS bundle needs to be served from the root because we're
using a few `@include` rules that make this assumption. We could move
this under `/css/` if desired, but we'd need to update each of these
`@include` rules.

Relates to #6646

[1]: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
[2]: https://developer.mozilla.org/en-US/docs/Web/Events/load
[3]: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
2019-07-23 14:10:13 -03:00
.circleci Add scripts to automate GitHub releases (#6653) 2019-07-17 22:51:47 -07:00
.github Add Mark Stacey (Kyokan) to UI CodeOwners (#6798) 2019-07-03 22:34:44 -02:30
.storybook Add storybook README.md file 2018-05-07 13:22:29 -07:00
app Serve CSS as an external file (#6894) 2019-07-23 14:10:13 -03:00
development Serve CSS as an external file (#6894) 2019-07-23 14:10:13 -03:00
docs Abstract domain provider from its stream transport (#6670) 2019-07-15 16:28:04 -07:00
test Remove Drizzle tests (#6855) 2019-07-15 17:10:46 -03:00
ui Serve CSS as an external file (#6894) 2019-07-23 14:10:13 -03:00
.babelrc Remove Babel transformations for older browser versions (#6812) 2019-07-18 18:17:20 -03:00
.dockerignore mascara - ready to deploy via docker 2017-04-05 22:59:25 -07:00
.editorconfig Clean EditorConfig file 2019-05-23 07:17:42 -02:30
.eslintignore Lint .json files (#6852) 2019-07-15 11:03:22 -03:00
.eslintrc Remove unused expressions (#6839) 2019-07-12 12:41:39 -03:00
.gitattributes Show lockfile diffs on GitHub (#6857) 2019-07-15 17:40:05 -02:30
.gitignore Add scripts to automate GitHub releases (#6653) 2019-07-17 22:51:47 -07:00
.nvmrc Update to Node.js v10 2019-06-27 11:46:13 -03:00
.stylelintignore mascara - remove from project (#6283) 2019-03-12 11:17:21 -02:30
.stylelintrc Lint and cleanup all scss 2017-08-14 10:31:27 +02:00
CHANGELOG.md Merge pull request #6832 from MetaMask/master-rebased 2019-07-12 10:58:19 -07:00
CONTRIBUTING.md update contributing.md 2018-07-05 17:52:26 -04:00
fonts Improved Ui Dev Mode 2016-07-01 14:23:37 -07:00
gentests.js Check for unused function arguments (#6583) 2019-05-08 15:51:33 -04:00
gulpfile.js Serve CSS as an external file (#6894) 2019-07-23 14:10:13 -03:00
images Improved Ui Dev Mode 2016-07-01 14:23:37 -07:00
ISSUE_TEMPLATE Merge branch 'master' into NewUI-flat-merge-with-master 2017-12-06 21:11:52 -08:00
LICENSE License 2018-06-22 16:28:54 -04:00
MISSION.md Mission v2 2018-05-29 09:30:59 -07:00
package-lock.json Serve CSS as an external file (#6894) 2019-07-23 14:10:13 -03:00
package.json Serve CSS as an external file (#6894) 2019-07-23 14:10:13 -03:00
README.md Improve the Redux DevTools documentation (#6882) 2019-07-18 16:07:35 -03:00
USER_AGREEMENT.md fix tos link; 2018-07-12 16:24:13 -04:00

MetaMask Browser Extension

Build Status Coverage Status

You can find the latest version of MetaMask on our official website. For help using MetaMask, visit our User Support Site.

For up to the minute news, follow our Twitter or Medium pages.

To learn how to develop MetaMask-compatible applications, visit our Developer Docs.

To learn how to contribute to the MetaMask project itself, visit our Internal Docs.

Building locally

  • Install Node.js version 10 and the latest available npm@6
    • If you are using nvm (recommended) running nvm use will automatically choose the right node version for you.
    • If you install Node.js manually, ensure you're using npm@6
      • Install npm@6 using npm install -g npm@6
  • Install dependencies: npm ci
    • If you have issues with node-sass compilation, try npm rebuild node-sass
  • Build the project to the ./dist/ folder with npm run dist.
  • Optionally, to start a development build (e.g. with logging and file watching) run npm start instead.
    • To start the React DevTools and Redux DevTools Extension alongside the app, use npm run start:dev.
      • React DevTools will open in a separate window; no browser extension is required
      • Redux DevTools will need to be installed as a browser extension. Open the Redux Remote DevTools (shown in the context menu and in the extension menu) to access Redux state logs.
        • You will also need to check the "Use custom (local) server" checkbox in the Remote DevTools Settings, using the default server configuration (host localhost, port 8000, secure connection checkbox unchecked)

Uncompressed builds can be found in /dist, compressed builds can be found in /builds once they're built.

Contributing

You can read our internal docs here.

You can re-generate the docs locally by running npm run doc, and contributors can update the hosted docs by running npm run publish-docs.

Running Tests

Run tests with npm test.

You can also test with a continuously watching process, via npm run watch.

You can run the linter by itself with npm run lint.

Architecture

Architecture Diagram

Development

npm install
npm start

Build for Publishing

npm run dist

Writing Browser Tests

To write tests that will be run in the browser using QUnit, add your test files to test/integration/lib.

Other Docs