aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMark Stacey <markjstacey@gmail.com>2019-07-24 01:10:13 +0800
committerGitHub <noreply@github.com>2019-07-24 01:10:13 +0800
commit0f8a9a5d495498d87093c14d3d87c51d3f23c7e2 (patch)
tree02b615ec031ffc6ce1157b0f9e305c0160a64f0b
parent437132bf25525dd786bb5da1d1d934a6ef050949 (diff)
downloadtangerine-wallet-browser-0f8a9a5d495498d87093c14d3d87c51d3f23c7e2.tar.gz
tangerine-wallet-browser-0f8a9a5d495498d87093c14d3d87c51d3f23c7e2.tar.zst
tangerine-wallet-browser-0f8a9a5d495498d87093c14d3d87c51d3f23c7e2.zip
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
Diffstat
-rw-r--r--app/home.html1
-rw-r--r--app/notification.html1
-rw-r--r--app/popup.html1
-rw-r--r--app/scripts/ui.js4
-rw-r--r--development/mock-dev.js10
-rw-r--r--gulpfile.js4
-rw-r--r--package-lock.json5
-rw-r--r--package.json1
-rw-r--r--ui/app/css/index.scss4
-rw-r--r--ui/css.js25
10 files changed, 11 insertions, 45 deletions
diff --git a/app/home.html b/app/home.html
index 051133cf8..ac17ed307 100644
--- a/app/home.html
+++ b/app/home.html
@@ -4,6 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<title>MetaMask</title>
+ <link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<div id="app-content"></div>
diff --git a/app/notification.html b/app/notification.html
index 82bf95ada..eba290c15 100644
--- a/app/notification.html
+++ b/app/notification.html
@@ -28,6 +28,7 @@
margin-top: 1rem;
}
</style>
+ <link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body class="notification" style="height:600px;">
<div id="app-content">
diff --git a/app/popup.html b/app/popup.html
index 1ba0fda94..3a6709eaf 100644
--- a/app/popup.html
+++ b/app/popup.html
@@ -4,6 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<title>MetaMask</title>
+ <link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body style="width:357px; height:600px;">
<div id="app-content"></div>
diff --git a/app/scripts/ui.js b/app/scripts/ui.js
index 67ec6bf06..2dde14b48 100644
--- a/app/scripts/ui.js
+++ b/app/scripts/ui.js
@@ -1,5 +1,3 @@
-const injectCss = require('inject-css')
-const NewMetaMaskUiCss = require('../../ui/css')
const startPopup = require('./popup-core')
const PortStream = require('extension-port-stream')
const { getEnvironmentType } = require('./lib/util')
@@ -53,8 +51,6 @@ async function start () {
global.platform.openExtensionInBrowser()
return
}
-
- injectCss(NewMetaMaskUiCss())
})
diff --git a/development/mock-dev.js b/development/mock-dev.js
index dafb91266..39b65d24c 100644
--- a/development/mock-dev.js
+++ b/development/mock-dev.js
@@ -57,13 +57,6 @@ function updateQueryParams (newView) {
}
//
-// CSS
-//
-
-const MetaMaskUiCss = require('../ui/css')
-const injectCss = require('inject-css')
-
-//
// MetaMask Controller
//
@@ -99,9 +92,6 @@ function modifyBackgroundConnection (backgroundConnectionModifier) {
actions._setBackgroundConnection(modifiedBackgroundConnection)
}
-var css = MetaMaskUiCss()
-injectCss(css)
-
// parse opts
var store = configureStore(firstState)
diff --git a/gulpfile.js b/gulpfile.js
index 746860b25..99683bc9f 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -85,6 +85,10 @@ createCopyTasks('vendor', {
source: './app/vendor/',
destinations: commonPlatforms.map(platform => `./dist/${platform}/vendor`),
})
+createCopyTasks('css', {
+ source: './ui/app/css/output/',
+ destinations: commonPlatforms.map(platform => `./dist/${platform}`),
+})
createCopyTasks('reload', {
devOnly: true,
source: './app/scripts/',
diff --git a/package-lock.json b/package-lock.json
index d36ba88a4..fcdaea3d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37003,11 +37003,6 @@
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
"dev": true
},
- "inject-css": {
- "version": "0.1.1",
- "resolved": "https://registry.npmjs.org/inject-css/-/inject-css-0.1.1.tgz",
- "integrity": "sha1-7z/8eOwCbJbiNV2g3zKRfjUmQVw="
- },
"inline-style-prefixer": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz",
diff --git a/package.json b/package.json
index 0cbd873e1..5328af4ab 100644
--- a/package.json
+++ b/package.json
@@ -103,7 +103,6 @@
"fuse.js": "^3.2.0",
"gaba": "^1.4.1",
"human-standard-token-abi": "^2.0.0",
- "inject-css": "^0.1.1",
"jazzicon": "^1.2.0",
"json-rpc-engine": "^4.0.0",
"json-rpc-middleware-stream": "^2.1.1",
diff --git a/ui/app/css/index.scss b/ui/app/css/index.scss
index ffccbd64f..865b23127 100644
--- a/ui/app/css/index.scss
+++ b/ui/app/css/index.scss
@@ -16,3 +16,7 @@
@import './itcss/components/index.scss';
@import './itcss/trumps/index.scss';
+
+@import '../../../node_modules/react-tooltip-component/dist/react-tooltip-component';
+
+@import '../../../node_modules/react-select/dist/react-select';
diff --git a/ui/css.js b/ui/css.js
deleted file mode 100644
index d8f954434..000000000
--- a/ui/css.js
+++ /dev/null
@@ -1,25 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-
-module.exports = bundleCss
-
-var cssFiles = {
- 'index.css': fs.readFileSync(path.join(__dirname, '/app/css/output/index.css'), 'utf8'),
- 'react-tooltip-component.css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-tooltip-component', 'dist', 'react-tooltip-component.css'), 'utf8'),
- 'react-css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-select', 'dist', 'react-select.css'), 'utf8'),
-}
-
-function bundleCss () {
- var cssBundle = Object.keys(cssFiles).reduce(function (bundle, fileName) {
- var fileContent = cssFiles[fileName]
- var output = String()
-
- output += '/*========== ' + fileName + ' ==========*/\n\n'
- output += fileContent
- output += '\n\n'
-
- return bundle + output
- }, String())
-
- return cssBundle
-}
generated by cgit (git 2.34.1) at 2025-03-23 19:53:41 +0800