Merge branch 'leipert-adjust-browser-versions' into 'master'

Update supported browser versions

See merge request gitlab-org/gitlab!63994

.browserslistrc

 #
-# This list of browsers is a conservative first definition, based on
+# This list of browsers is a conservative definition, based on
 # https://docs.gitlab.com/ee/install/requirements.html#supported-web-browsers
 # with the following reasoning:
 #
-# - Edge: Pick the last two major version before the Chrome switch
-# - Rest: We should support the latest ESR of Firefox: 68, because it used quite a lot.
-#         For the rest, pick browser versions that have a similar age to Firefox 68.
+# - We should support the latest ESR of Firefox: 78, because it used quite a lot.
+# - We use Edge/Chrome >= 84 because 83 had an annoying bug which would mean we
+#   need to polyfill Array.reduce: https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
+# - Safari 13 because it is the second latest major version of Safari
 #
-# See also this follow-up epic:
-# https://gitlab.com/groups/gitlab-org/-/epics/3957
+# See also this epic: https://gitlab.com/groups/gitlab-org/-/epics/3957
 #
-chrome >= 73
-edge >= 17
-firefox >= 68
-safari >= 12
+chrome >= 84
+edge >= 84
+firefox >= 78
+safari >= 13.0.4

.gitlab/ci/global.gitlab-ci.yml

@@ -75,7 +75,7 @@
   policy: push  # We want to rebuild the cache from scratch to ensure stale dependencies are cleaned up.
 
 .assets-cache: &assets-cache
-  key: "assets-${NODE_ENV}-v1"
+  key: "assets-${NODE_ENV}-v2"
   paths:
     - assets-hash.txt
     - public/assets/webpack/

.gitlab/ci/rules.gitlab-ci.yml

@@ -162,6 +162,7 @@
 
 .frontend-build-patterns: &frontend-build-patterns
   - "{package.json,yarn.lock}"
+  - ".browserslistrc"
   - "babel.config.js"
   - "config/webpack.config.js"
   - "config/**/*.js"
@@ -170,6 +171,7 @@
 
 .frontend-patterns: &frontend-patterns
   - "{package.json,yarn.lock}"
+  - ".browserslistrc"
   - "babel.config.js"
   - "jest.config.{base,integration,unit}.js"
   - ".csscomb.json"

app/assets/stylesheets/startup/startup-dark.scss

@@ -149,10 +149,6 @@ h1 {
   color: transparent;
   text-shadow: 0 0 0 #fafafa;
 }
-.form-control::-ms-input-placeholder {
-  color: #bfbfbf;
-  opacity: 1;
-}
 .form-control::placeholder {
   color: #bfbfbf;
   opacity: 1;
@@ -179,7 +175,6 @@ h1 {
   color: #fafafa;
   text-align: center;
   vertical-align: middle;
-  -moz-user-select: none;
   user-select: none;
   background-color: transparent;
   border: 1px solid transparent;
@@ -630,9 +625,6 @@ input {
   border-radius: 4px;
   padding: 6px 10px;
 }
-.form-control::-ms-input-placeholder {
-  color: #868686;
-}
 .form-control::placeholder {
   color: #868686;
 }
@@ -1474,7 +1466,6 @@ svg.s16 {
   top: 4px;
 }
 .search .search-input-wrap .search-icon {
-  -moz-user-select: none;
   user-select: none;
 }
 .search .search-input-wrap .clear-icon {
@@ -1688,9 +1679,6 @@ body.gl-dark
 body.gl-dark .search form {
   background-color: rgba(250, 250, 250, 0.2);
 }
-body.gl-dark .search .search-input::-ms-input-placeholder {
-  color: rgba(250, 250, 250, 0.8);
-}
 body.gl-dark .search .search-input::placeholder {
   color: rgba(250, 250, 250, 0.8);
 }

app/assets/stylesheets/startup/startup-general.scss

@@ -130,10 +130,6 @@ h1 {
   color: transparent;
   text-shadow: 0 0 0 #303030;
 }
-.form-control::-ms-input-placeholder {
-  color: #5e5e5e;
-  opacity: 1;
-}
 .form-control::placeholder {
   color: #5e5e5e;
   opacity: 1;
@@ -160,7 +156,6 @@ h1 {
   color: #303030;
   text-align: center;
   vertical-align: middle;
-  -moz-user-select: none;
   user-select: none;
   background-color: transparent;
   border: 1px solid transparent;
@@ -611,9 +606,6 @@ input {
   border-radius: 4px;
   padding: 6px 10px;
 }
-.form-control::-ms-input-placeholder {
-  color: #868686;
-}
 .form-control::placeholder {
   color: #868686;
 }
@@ -1455,7 +1447,6 @@ svg.s16 {
   top: 4px;
 }
 .search .search-input-wrap .search-icon {
-  -moz-user-select: none;
   user-select: none;
 }
 .search .search-input-wrap .clear-icon {

app/assets/stylesheets/startup/startup-signin.scss

@@ -198,10 +198,6 @@ hr {
   color: transparent;
   text-shadow: 0 0 0 #303030;
 }
-.form-control::-ms-input-placeholder {
-  color: #5e5e5e;
-  opacity: 1;
-}
 .form-control::placeholder {
   color: #5e5e5e;
   opacity: 1;
@@ -229,7 +225,6 @@ hr {
   color: #303030;
   text-align: center;
   vertical-align: middle;
-  -moz-user-select: none;
   user-select: none;
   background-color: transparent;
   border: 1px solid transparent;
@@ -319,13 +314,6 @@ fieldset:disabled a.btn {
   appearance: none;
   -moz-appearance: none;
 }
-.gl-form-input:not(.form-control-plaintext):-moz-read-only,
-.gl-form-input.form-control:not(.form-control-plaintext):-moz-read-only {
-  background-color: #fafafa;
-  color: #868686;
-  box-shadow: inset 0 0 0 1px #dbdbdb;
-  cursor: not-allowed;
-}
 .gl-form-input:disabled,
 .gl-form-input:not(.form-control-plaintext):read-only,
 .gl-form-input.form-control:disabled,
@@ -335,10 +323,6 @@ fieldset:disabled a.btn {
   box-shadow: inset 0 0 0 1px #dbdbdb;
   cursor: not-allowed;
 }
-.gl-form-input::-ms-input-placeholder,
-.gl-form-input.form-control::-ms-input-placeholder {
-  color: #868686;
-}
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {
   color: #868686;
@@ -495,7 +479,6 @@ hr {
   z-index: 1;
 }
 .flash-container.sticky {
-  position: -webkit-sticky;
   position: sticky;
   top: 48px;
   z-index: 251;
@@ -521,9 +504,6 @@ label.label-bold {
   border-radius: 4px;
   padding: 6px 10px;
 }
-.form-control::-ms-input-placeholder {
-  color: #868686;
-}
 .form-control::placeholder {
   color: #868686;
 }

config/webpack.config.js

+const crypto = require('crypto');
 const fs = require('fs');
 const path = require('path');
 
+const BABEL_VERSION = require('@babel/core/package.json').version;
 const SOURCEGRAPH_VERSION = require('@sourcegraph/code-host-integration/package.json').version;
 
+const BABEL_LOADER_VERSION = require('babel-loader/package.json').version;
 const CompressionPlugin = require('compression-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const glob = require('glob');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const VUE_LOADER_VERSION = require('vue-loader/package.json').version;
 const VUE_VERSION = require('vue/package.json').version;
+
 const webpack = require('webpack');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const { StatsWriterPlugin } = require('webpack-stats-plugin');
@@ -21,6 +25,12 @@ const vendorDllHash = require('./helpers/vendor_dll_hash');
 const MonacoWebpackPlugin = require('./plugins/monaco_webpack');
 
 const ROOT_PATH = path.resolve(__dirname, '..');
+const SUPPORTED_BROWSERS = fs.readFileSync(path.join(ROOT_PATH, '.browserslistrc'), 'utf-8');
+const SUPPORTED_BROWSERS_HASH = crypto
+  .createHash('sha256')
+  .update(SUPPORTED_BROWSERS)
+  .digest('hex');
+
 const VENDOR_DLL = process.env.WEBPACK_VENDOR_DLL && process.env.WEBPACK_VENDOR_DLL !== 'false';
 const CACHE_PATH = process.env.WEBPACK_CACHE_PATH || path.join(ROOT_PATH, 'tmp/cache');
 const IS_PRODUCTION = process.env.NODE_ENV === 'production';
@@ -217,6 +227,16 @@ module.exports = {
         loader: 'babel-loader',
         options: {
           cacheDirectory: path.join(CACHE_PATH, 'babel-loader'),
+          cacheIdentifier: [
+            process.env.BABEL_ENV || process.env.NODE_ENV || 'development',
+            webpack.version,
+            BABEL_VERSION,
+            BABEL_LOADER_VERSION,
+            // Ensure that changing supported browsers will refresh the cache
+            // in order to not pull in outdated files that import core-js
+            SUPPORTED_BROWSERS_HASH,
+          ].join('|'),
+          cacheCompression: false,
         },
       },
       {

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -149,10 +149,6 @@ h1 {
   color: transparent;
   text-shadow: 0 0 0 #fafafa;
 }
-.form-control::-ms-input-placeholder {
-  color: #bfbfbf;
-  opacity: 1;
-}
 .form-control::placeholder {
   color: #bfbfbf;
   opacity: 1;
@@ -179,7 +175,6 @@ h1 {
   color: #fafafa;
   text-align: center;
   vertical-align: middle;
-  -moz-user-select: none;
   user-select: none;
   background-color: transparent;
   border: 1px solid transparent;
@@ -630,9 +625,6 @@ input {
   border-radius: 4px;
   padding: 6px 10px;
 }
-.form-control::-ms-input-placeholder {
-  color: #868686;
-}
 .form-control::placeholder {
   color: #868686;
 }
@@ -1474,7 +1466,6 @@ svg.s16 {
   top: 4px;
 }
 .search .search-input-wrap .search-icon {
-  -moz-user-select: none;
   user-select: none;
 }
 .search .search-input-wrap .clear-icon {
@@ -1688,9 +1679,6 @@ body.gl-dark
 body.gl-dark .search form {
   background-color: rgba(250, 250, 250, 0.2);
 }
-body.gl-dark .search .search-input::-ms-input-placeholder {
-  color: rgba(250, 250, 250, 0.8);
-}
 body.gl-dark .search .search-input::placeholder {
   color: rgba(250, 250, 250, 0.8);
 }

ee/app/assets/stylesheets/startup/startup-general.scss

@@ -130,10 +130,6 @@ h1 {
   color: transparent;
   text-shadow: 0 0 0 #303030;
 }
-.form-control::-ms-input-placeholder {
-  color: #5e5e5e;
-  opacity: 1;
-}
 .form-control::placeholder {
   color: #5e5e5e;
   opacity: 1;
@@ -160,7 +156,6 @@ h1 {
   color: #303030;
   text-align: center;
   vertical-align: middle;
-  -moz-user-select: none;
   user-select: none;
   background-color: transparent;
   border: 1px solid transparent;
@@ -611,9 +606,6 @@ input {
   border-radius: 4px;
   padding: 6px 10px;
 }
-.form-control::-ms-input-placeholder {
-  color: #868686;
-}
 .form-control::placeholder {
   color: #868686;
 }
@@ -1455,7 +1447,6 @@ svg.s16 {
   top: 4px;
 }
 .search .search-input-wrap .search-icon {
-  -moz-user-select: none;
   user-select: none;
 }
 .search .search-input-wrap .clear-icon {

ee/app/assets/stylesheets/startup/startup-signin.scss

@@ -198,10 +198,6 @@ hr {
   color: transparent;
   text-shadow: 0 0 0 #303030;
 }
-.form-control::-ms-input-placeholder {
-  color: #5e5e5e;
-  opacity: 1;
-}
 .form-control::placeholder {
   color: #5e5e5e;
   opacity: 1;
@@ -229,7 +225,6 @@ hr {
   color: #303030;
   text-align: center;
   vertical-align: middle;
-  -moz-user-select: none;
   user-select: none;
   background-color: transparent;
   border: 1px solid transparent;
@@ -319,13 +314,6 @@ fieldset:disabled a.btn {
   appearance: none;
   -moz-appearance: none;
 }
-.gl-form-input:not(.form-control-plaintext):-moz-read-only,
-.gl-form-input.form-control:not(.form-control-plaintext):-moz-read-only {
-  background-color: #fafafa;
-  color: #868686;
-  box-shadow: inset 0 0 0 1px #dbdbdb;
-  cursor: not-allowed;
-}
 .gl-form-input:disabled,
 .gl-form-input:not(.form-control-plaintext):read-only,
 .gl-form-input.form-control:disabled,
@@ -335,10 +323,6 @@ fieldset:disabled a.btn {
   box-shadow: inset 0 0 0 1px #dbdbdb;
   cursor: not-allowed;
 }
-.gl-form-input::-ms-input-placeholder,
-.gl-form-input.form-control::-ms-input-placeholder {
-  color: #868686;
-}
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {
   color: #868686;
@@ -495,7 +479,6 @@ hr {
   z-index: 1;
 }
 .flash-container.sticky {
-  position: -webkit-sticky;
   position: sticky;
   top: 48px;
   z-index: 251;
@@ -521,9 +504,6 @@ label.label-bold {
   border-radius: 4px;
   padding: 6px 10px;
 }
-.form-control::-ms-input-placeholder {
-  color: #868686;
-}
 .form-control::placeholder {
   color: #868686;
 }

tooling/danger/project_helper.rb

@@ -54,6 +54,7 @@ module Tooling
         %r{\A(ee/)?scripts/frontend/} => :frontend,
         %r{(\A|/)(
           \.babelrc |
+          \.browserslistrc |
           \.eslintignore |
           \.eslintrc(\.yml)? |
           \.nvmrc |

yarn.lock

@@ -2883,16 +2883,16 @@ browserify-zlib@^0.2.0:
   dependencies:
     pako "~1.0.5"
 
-browserslist@^4.12.0, browserslist@^4.8.3:
-  version "4.16.1"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.1.tgz#bf757a2da376b3447b800a16f0f1c96358138766"
-  integrity sha512-UXhDrwqsNcpTYJBTZsbGATDxZbiVDsx6UjpmRUmtnP10pr8wAYr5LgFoEFw9ixriQH2mv/NX2SfGzE/o8GndLA==
+browserslist@^4.12.0, browserslist@^4.16.6:
+  version "4.16.6"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
+  integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==
   dependencies:
-    caniuse-lite "^1.0.30001173"
-    colorette "^1.2.1"
-    electron-to-chromium "^1.3.634"
+    caniuse-lite "^1.0.30001219"
+    colorette "^1.2.2"
+    electron-to-chromium "^1.3.723"
     escalade "^3.1.1"
-    node-releases "^1.1.69"
+    node-releases "^1.1.71"
 
 bser@2.1.1:
   version "2.1.1"
@@ -3079,10 +3079,10 @@ camelcase@^6.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.0.0.tgz#5259f7c30e35e278f1bdc2a4d91230b37cad981e"
   integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==
 
-caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001173:
-  version "1.0.30001185"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001185.tgz#3482a407d261da04393e2f0d61eefbc53be43b95"
-  integrity sha512-Fpi4kVNtNvJ15H0F6vwmXtb3tukv3Zg3qhKkOGUq7KJ1J6b9kf4dnNgtEAFXhRsJo0gNj9W60+wBvn0JcTvdTg==
+caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001219:
+  version "1.0.30001241"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001241.tgz#cd3fae47eb3d7691692b406568d7a3e5b23c7598"
+  integrity sha512-1uoSZ1Pq1VpH0WerIMqwptXHNNGfdl7d1cJUFs80CwQ/lVzdhTvsFZCeNFslze7AjsQnb4C85tzclPa1VShbeQ==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -3631,11 +3631,11 @@ copy-webpack-plugin@^6.4.1:
     webpack-sources "^1.4.3"
 
 core-js-compat@^3.6.2:
-  version "3.6.4"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.4.tgz#938476569ebb6cda80d339bcf199fae4f16fff17"
-  integrity sha512-zAa3IZPvsJ0slViBQ2z+vgyyTuhd3MFn1rBQjZSKVEgB0UMYhUkCj9jJUVPgGTGqWvsBVmfnruXgTcNyTlEiSA==
+  version "3.15.2"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.15.2.tgz#47272fbb479880de14b4e6081f71f3492f5bd3cb"
+  integrity sha512-Wp+BJVvwopjI+A1EFqm2dwUmWYXrvucmtIB2LgXn/Rb+gWPKYxtmb4GKHGKG/KGF1eK9jfjzT38DITbTOCX/SQ==
   dependencies:
-    browserslist "^4.8.3"
+    browserslist "^4.16.6"
     semver "7.0.0"
 
 core-js-pure@^3.0.0:
@@ -4613,10 +4613,10 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
-electron-to-chromium@^1.3.634:
-  version "1.3.642"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.642.tgz#8b884f50296c2ae2a9997f024d0e3e57facc2b94"
-  integrity sha512-cev+jOrz/Zm1i+Yh334Hed6lQVOkkemk2wRozfMF4MtTR7pxf3r3L5Rbd7uX1zMcEqVJ7alJBnJL7+JffkC6FQ==
+electron-to-chromium@^1.3.723:
+  version "1.3.762"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.762.tgz#3fa4e3bcbda539b50e3aa23041627063a5cffe61"
+  integrity sha512-LehWjRpfPcK8F1Lf/NZoAwWLWnjJVo0SZeQ9j/tvnBWYcT99qDqgo4raAfS2oTKZjPrR/jxruh85DGgDUmywEA==
 
 elliptic@^6.0.0:
   version "6.5.4"
@@ -8744,10 +8744,10 @@ node-notifier@^8.0.0:
     uuid "^8.3.0"
     which "^2.0.2"
 
-node-releases@^1.1.69:
-  version "1.1.70"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.70.tgz#66e0ed0273aa65666d7fe78febe7634875426a08"
-  integrity sha512-Slf2s69+2/uAD79pVVQo8uSiC34+g8GWY8UH2Qtqv34ZfhYrxpYpfzs9Js9d6O0mbDmALuxaTlplnBTnSELcrw==
+node-releases@^1.1.71:
+  version "1.1.73"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.73.tgz#dd4e81ddd5277ff846b80b52bb40c49edf7a7b20"
+  integrity sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==
 
 nodemon@^2.0.4:
   version "2.0.4"