From 17e23d0a395213169829d8f23f2f4a734b9cbc99 Mon Sep 17 00:00:00 2001 From: "depfu[bot]" <23717796+depfu[bot]@users.noreply.github.com> Date: Thu, 5 Oct 2023 15:39:47 +0200 Subject: [PATCH 1/6] Update all Yarn dependencies (2023-10-04) (PR #4768) Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com> --- package.json | 14 +-- yarn.lock | 234 +++++++++++++++++++++++++++------------------------ 2 files changed, 130 insertions(+), 118 deletions(-) diff --git a/package.json b/package.json index 7f49d9fda2..6ae39a563f 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "@codemirror/lang-cpp": "^6.0.2", "@codemirror/lang-javascript": "^6.2.1", "@codemirror/lang-rust": "^6.0.1", - "@codemirror/language": "^6.9.0", + "@codemirror/language": "^6.9.1", "@codemirror/state": "^6.2.1", "@codemirror/view": "^6.16.0", "@firefox-devtools/react-contextmenu": "^5.1.0", @@ -97,23 +97,23 @@ "workbox-window": "^7.0.0" }, "devDependencies": { - "@babel/cli": "^7.22.15", + "@babel/cli": "^7.23.0", "@babel/core": "^7.22.17", "@babel/eslint-parser": "^7.22.15", "@babel/eslint-plugin": "^7.22.10", "@babel/plugin-proposal-class-properties": "^7.18.6", - "@babel/preset-env": "^7.22.15", + "@babel/preset-env": "^7.22.20", "@babel/preset-flow": "^7.22.15", "@babel/preset-react": "^7.22.15", "@testing-library/dom": "^9.3.3", "@testing-library/jest-dom": "^6.1.3", "@testing-library/react": "^14.0.0", "alex": "^11.0.1", - "autoprefixer": "^10.4.15", + "autoprefixer": "^10.4.16", "babel-jest": "^29.7.0", "babel-loader": "^9.1.3", "babel-plugin-module-resolver": "^5.0.0", - "browserslist": "^4.21.10", + "browserslist": "^4.22.1", "caniuse-lite": "^1.0.30001538", "circular-dependency-plugin": "^5.2.1", "codecov": "^3.8.3", @@ -131,7 +131,7 @@ "eslint-plugin-jest-dom": "^5.1.0", "eslint-plugin-jest-formatting": "^3.1.0", "eslint-plugin-react": "^7.33.2", - "eslint-plugin-testing-library": "^6.0.1", + "eslint-plugin-testing-library": "^6.0.2", "espree": "^9.6.1", "fake-indexeddb": "^4.0.2", "fetch-mock-jest": "^1.5.1", @@ -156,7 +156,7 @@ "postcss-loader": "^7.3.3", "prettier": "^3.0.3", "raw-loader": "^4.0.2", - "rimraf": "^5.0.1", + "rimraf": "^5.0.5", "style-loader": "^3.3.3", "stylelint": "^15.10.3", "stylelint-config-idiomatic-order": "^9.0.0", diff --git a/yarn.lock b/yarn.lock index db2165377e..d3e4e8df83 100644 --- a/yarn.lock +++ b/yarn.lock @@ -37,14 +37,14 @@ jsonpointer "^5.0.0" leven "^3.1.0" -"@babel/cli@^7.22.15": - version "7.22.15" - resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.22.15.tgz#22ed82d76745a43caa60a89917bedb7c9b5bd145" - integrity sha512-prtg5f6zCERIaECeTZzd2fMtVjlfjhUcO+fBLQ6DXXdq5FljN+excVitJ2nogsusdf31LeqkjAfXZ7Xq+HmN8g== +"@babel/cli@^7.23.0": + version "7.23.0" + resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.23.0.tgz#1d7f37c44d4117c67df46749e0c86e11a58cc64b" + integrity sha512-17E1oSkGk2IwNILM4jtfAvgjt+ohmpfBky8aLerUfYZhiPNg7ca+CRCxZn8QDxwNhV/upsc2VHBCqGFIR+iBfA== dependencies: "@jridgewell/trace-mapping" "^0.3.17" commander "^4.0.1" - convert-source-map "^1.1.0" + convert-source-map "^2.0.0" fs-readdir-recursive "^1.1.0" glob "^7.2.0" make-dir "^2.1.0" @@ -61,10 +61,10 @@ "@babel/highlight" "^7.22.13" chalk "^2.4.2" -"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9": - version "7.22.9" - resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.9.tgz#71cdb00a1ce3a329ce4cbec3a44f9fef35669730" - integrity sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ== +"@babel/compat-data@^7.22.20", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9": + version "7.22.20" + resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.20.tgz#8df6e96661209623f1975d66c35ffca66f3306d0" + integrity sha512-BQYjKbpXjoXwFW5jGqiizJQQT/aC7pFm9Ok1OWssonuguICi264lbgMzRp2ZMmRSlfkX6DsWDDcsrctK8Rwfiw== "@babel/core@^7.0.0", "@babel/core@^7.11.1", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.22.17": version "7.22.17" @@ -274,10 +274,10 @@ resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f" integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw== -"@babel/helper-validator-identifier@^7.22.15", "@babel/helper-validator-identifier@^7.22.5": - version "7.22.15" - resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.15.tgz#601fa28e4cc06786c18912dca138cec73b882044" - integrity sha512-4E/F9IIEi8WR94324mbDUMo074YTheJmd7eZF5vITTeYchqAi6sYXRLHUVsmkdmY4QjfKTcB2jB7dVP3NaBElQ== +"@babel/helper-validator-identifier@^7.22.15", "@babel/helper-validator-identifier@^7.22.20", "@babel/helper-validator-identifier@^7.22.5": + version "7.22.20" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0" + integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A== "@babel/helper-validator-option@^7.22.15": version "7.22.15" @@ -929,12 +929,12 @@ "@babel/helper-create-regexp-features-plugin" "^7.22.5" "@babel/helper-plugin-utils" "^7.22.5" -"@babel/preset-env@^7.11.0", "@babel/preset-env@^7.22.15": - version "7.22.15" - resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.22.15.tgz#142716f8e00bc030dae5b2ac6a46fbd8b3e18ff8" - integrity sha512-tZFHr54GBkHk6hQuVA8w4Fmq+MSPsfvMG0vPnOYyTnJpyfMqybL8/MbNCPRT9zc2KBO2pe4tq15g6Uno4Jpoag== +"@babel/preset-env@^7.11.0", "@babel/preset-env@^7.22.20": + version "7.22.20" + resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.22.20.tgz#de9e9b57e1127ce0a2f580831717f7fb677ceedb" + integrity sha512-11MY04gGC4kSzlPHRfvVkNAZhUxOvm7DCJ37hPDnUENwe06npjIRAfInEMTGSb4LZK5ZgDFkv5hw0lGebHeTyg== dependencies: - "@babel/compat-data" "^7.22.9" + "@babel/compat-data" "^7.22.20" "@babel/helper-compilation-targets" "^7.22.15" "@babel/helper-plugin-utils" "^7.22.5" "@babel/helper-validator-option" "^7.22.15" @@ -1008,7 +1008,7 @@ "@babel/plugin-transform-unicode-regex" "^7.22.5" "@babel/plugin-transform-unicode-sets-regex" "^7.22.5" "@babel/preset-modules" "0.1.6-no-external-plugins" - "@babel/types" "^7.22.15" + "@babel/types" "^7.22.19" babel-plugin-polyfill-corejs2 "^0.4.5" babel-plugin-polyfill-corejs3 "^0.8.3" babel-plugin-polyfill-regenerator "^0.5.2" @@ -1082,13 +1082,13 @@ debug "^4.1.0" globals "^11.1.0" -"@babel/types@^7.0.0", "@babel/types@^7.22.10", "@babel/types@^7.22.15", "@babel/types@^7.22.17", "@babel/types@^7.22.5", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0": - version "7.22.17" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.17.tgz#f753352c4610ffddf9c8bc6823f9ff03e2303eee" - integrity sha512-YSQPHLFtQNE5xN9tHuZnzu8vPr61wVTBZdfv1meex1NBosa4iT05k/Jw06ddJugi4bk7The/oSwQGFcksmEJQg== +"@babel/types@^7.0.0", "@babel/types@^7.22.10", "@babel/types@^7.22.15", "@babel/types@^7.22.17", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0": + version "7.23.0" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb" + integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg== dependencies: "@babel/helper-string-parser" "^7.22.5" - "@babel/helper-validator-identifier" "^7.22.15" + "@babel/helper-validator-identifier" "^7.22.20" to-fast-properties "^2.0.0" "@bcoe/v8-coverage@^0.2.3": @@ -1135,14 +1135,14 @@ "@codemirror/language" "^6.0.0" "@lezer/rust" "^1.0.0" -"@codemirror/language@^6.0.0", "@codemirror/language@^6.6.0", "@codemirror/language@^6.9.0": - version "6.9.0" - resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.9.0.tgz#c471ce1fdb9b1577f312bb68ef54fb4b76f7a420" - integrity sha512-nFu311/0ne/qGuGCL3oKuktBgzVOaxCHZPZv1tLSZkNjPYxxvkjSbzno3MlErG2tgw1Yw1yF8BxMCegeMXqpiw== +"@codemirror/language@^6.0.0", "@codemirror/language@^6.6.0", "@codemirror/language@^6.9.1": + version "6.9.1" + resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.9.1.tgz#97e2c3e44cf4ff152add865ed7ecec73868446a4" + integrity sha512-lWRP3Y9IUdOms6DXuBpoWwjkR7yRmnS0hKYCbSfPz9v6Em1A1UCRujAkDiCrdYfs1Z0Eu4dGtwovNPStIfkgNA== dependencies: "@codemirror/state" "^6.0.0" "@codemirror/view" "^6.0.0" - "@lezer/common" "^1.0.0" + "@lezer/common" "^1.1.0" "@lezer/highlight" "^1.0.0" "@lezer/lr" "^1.0.0" style-mod "^4.0.0" @@ -1277,6 +1277,18 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45" integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== +"@isaacs/cliui@^8.0.2": + version "8.0.2" + resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550" + integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA== + dependencies: + string-width "^5.1.2" + string-width-cjs "npm:string-width@^4.2.0" + strip-ansi "^7.0.1" + strip-ansi-cjs "npm:strip-ansi@^6.0.1" + wrap-ansi "^8.1.0" + wrap-ansi-cjs "npm:wrap-ansi@^7.0.0" + "@istanbuljs/load-nyc-config@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.0.0.tgz#10602de5570baea82f8afbfa2630b24e7a8cfe5b" @@ -1544,10 +1556,10 @@ resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b" integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A== -"@lezer/common@^1.0.0": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.0.0.tgz#1c95ae53ec17706aa3cbcc88b52c23f22ed56096" - integrity sha512-ohydQe+Hb+w4oMDvXzs8uuJd2NoA3D8YDcLiuDsLqH+yflDTPEpgCsWI3/6rH5C3BAedtH1/R51dxENldQceEA== +"@lezer/common@^1.0.0", "@lezer/common@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.1.0.tgz#2e5bfe01d7a2ada6056d93c677bba4f1495e098a" + integrity sha512-XPIN3cYDXsoJI/oDWoR2tD++juVrhgIago9xyKhZ7IhGlzdDM9QgC8D8saKNCz5pindGcznFr2HBSsEQSWnSjw== "@lezer/cpp@^1.0.0": version "1.0.0" @@ -2995,14 +3007,14 @@ at-least-node@^1.0.0: resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2" integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg== -autoprefixer@^10.4.15: - version "10.4.15" - resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.15.tgz#a1230f4aeb3636b89120b34a1f513e2f6834d530" - integrity sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew== +autoprefixer@^10.4.16: + version "10.4.16" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.16.tgz#fad1411024d8670880bdece3970aa72e3572feb8" + integrity sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ== dependencies: browserslist "^4.21.10" - caniuse-lite "^1.0.30001520" - fraction.js "^4.2.0" + caniuse-lite "^1.0.30001538" + fraction.js "^4.3.6" normalize-range "^0.1.2" picocolors "^1.0.0" postcss-value-parser "^4.2.0" @@ -3260,15 +3272,15 @@ browser-process-hrtime@^1.0.0: resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626" integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow== -browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.21.10, browserslist@^4.21.4, browserslist@^4.21.9: - version "4.21.10" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.10.tgz#dbbac576628c13d3b2231332cb2ec5a46e015bb0" - integrity sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ== +browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.21.10, browserslist@^4.21.4, browserslist@^4.21.9, browserslist@^4.22.1: + version "4.22.1" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.1.tgz#ba91958d1a59b87dab6fed8dfbcb3da5e2e9c619" + integrity sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ== dependencies: - caniuse-lite "^1.0.30001517" - electron-to-chromium "^1.4.477" + caniuse-lite "^1.0.30001541" + electron-to-chromium "^1.4.535" node-releases "^2.0.13" - update-browserslist-db "^1.0.11" + update-browserslist-db "^1.0.13" bser@2.1.1: version "2.1.1" @@ -3442,10 +3454,10 @@ caniuse-api@^3.0.0: lodash.memoize "^4.1.2" lodash.uniq "^4.5.0" -caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001517, caniuse-lite@^1.0.30001520, caniuse-lite@^1.0.30001538: - version "1.0.30001538" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001538.tgz#9dbc6b9af1ff06b5eb12350c2012b3af56744f3f" - integrity sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw== +caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541: + version "1.0.30001543" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001543.tgz#478a3e9dddbb353c5ab214b0ecb0dbed529ed1d8" + integrity sha512-qxdO8KPWPQ+Zk6bvNpPeQIOH47qZSYdFZd6dXQzb2KzhnSXju4Kd7H1PkSJx6NICSMgo/IhRZRhhfPTHYpJUCA== ccount@^2.0.0: version "2.0.1" @@ -3616,7 +3628,7 @@ cliui@^6.0.0: strip-ansi "^6.0.0" wrap-ansi "^6.2.0" -cliui@^7.0.2, cliui@^7.0.4: +cliui@^7.0.2: version "7.0.4" resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f" integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ== @@ -3882,7 +3894,7 @@ content-type@^1.0.4, content-type@~1.0.4: resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b" integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA== -convert-source-map@^1.1.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0: +convert-source-map@^1.6.0, convert-source-map@^1.7.0: version "1.7.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442" integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA== @@ -4697,10 +4709,10 @@ ejs@^3.1.6: dependencies: jake "^10.8.5" -electron-to-chromium@^1.4.477: - version "1.4.488" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.488.tgz#442b1855f8c84fb1ed79f518985c65db94f64cc9" - integrity sha512-Dv4sTjiW7t/UWGL+H8ZkgIjtUAVZDgb/PwGWvMsCT7jipzUV/u5skbLXPFKb6iV0tiddVi/bcS2/kUrczeWgIQ== +electron-to-chromium@^1.4.535: + version "1.4.540" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.540.tgz#c685f2f035e93eb21dd6a9cfe2c735bad8f77401" + integrity sha512-aoCqgU6r9+o9/S7wkcSbmPRFi7OWZWiXS9rtjEd+Ouyu/Xyw5RSq2XN8s5Qp8IaFOLiRrhQCphCIjAxgG3eCAg== emittery@^0.13.1: version "0.13.1" @@ -5030,10 +5042,10 @@ eslint-plugin-react@^7.33.2: semver "^6.3.1" string.prototype.matchall "^4.0.8" -eslint-plugin-testing-library@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-6.0.1.tgz#c92325341f01fb2f76a3ab1c70d3c0c968c70b11" - integrity sha512-CEYtjpcF3hAaQtYsTZqciR7s5z+T0LCMTwJeW+pz6kBnGtc866wAKmhaiK2Gsjc2jWNP7Gt6zhNr2DE1ZW4e+g== +eslint-plugin-testing-library@^6.0.2: + version "6.0.2" + resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-6.0.2.tgz#a0884f603d8744695919413e7cf2adfb42223e2c" + integrity sha512-3BV6FWtLbpKFb4Y1obSdt8PC9xSqz6T+7EHB/6pSCXqVjKPoS67ck903feKMKQphd5VhrX+N51yHuVaPa7elsw== dependencies: "@typescript-eslint/utils" "^5.58.0" @@ -5742,10 +5754,10 @@ forwarded@0.2.0: resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811" integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow== -fraction.js@^4.2.0: - version "4.2.0" - resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950" - integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA== +fraction.js@^4.3.6: + version "4.3.6" + resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.6.tgz#e9e3acec6c9a28cf7bc36cbe35eea4ceb2c5c92d" + integrity sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg== fresh@0.5.2, fresh@~0.5.2: version "0.5.2" @@ -5920,13 +5932,13 @@ glob@7.1.6: once "^1.3.0" path-is-absolute "^1.0.0" -glob@^10.2.5, glob@^10.3.4: - version "10.3.4" - resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.4.tgz#c85c9c7ab98669102b6defda76d35c5b1ef9766f" - integrity sha512-6LFElP3A+i/Q8XQKEvZjkEWEOTgAIALR9AO2rwT8bgPhDd1anmqDJDZ6lLddI4ehxxxR1S5RIqKe1uapMQfYaQ== +glob@^10.3.4, glob@^10.3.7: + version "10.3.10" + resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.10.tgz#0351ebb809fd187fe421ab96af83d3a70715df4b" + integrity sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g== dependencies: foreground-child "^3.1.0" - jackspeak "^2.0.3" + jackspeak "^2.3.5" minimatch "^9.0.1" minipass "^5.0.0 || ^6.0.2 || ^7.0.0" path-scurry "^1.10.1" @@ -7172,12 +7184,12 @@ iterator.prototype@^1.1.0: has-symbols "^1.0.3" reflect.getprototypeof "^1.0.3" -jackspeak@^2.0.3: - version "2.1.0" - resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.1.0.tgz#69831fe5346532888f279102f39fc4452ebbe6c2" - integrity sha512-DiEwVPqsieUzZBNxQ2cxznmFzfg/AMgJUjYw5xl6rSmCxAQXECcbSdwcLM6Ds6T09+SBfSNCGPhYUoQ96P4h7A== +jackspeak@^2.3.5: + version "2.3.6" + resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8" + integrity sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ== dependencies: - cliui "^7.0.4" + "@isaacs/cliui" "^8.0.2" optionalDependencies: "@pkgjs/parseargs" "^0.11.0" @@ -11233,12 +11245,12 @@ rimraf@^3.0.2: dependencies: glob "^7.1.3" -rimraf@^5.0.1: - version "5.0.1" - resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-5.0.1.tgz#0881323ab94ad45fec7c0221f27ea1a142f3f0d0" - integrity sha512-OfFZdwtd3lZ+XZzYP/6gTACubwFcHdLRqS9UX3UwpU2dnGQYkPFISRwvM3w9IiB2w7bW5qGo/uAwE4SmXXSKvg== +rimraf@^5.0.5: + version "5.0.5" + resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-5.0.5.tgz#9be65d2d6e683447d2e9013da2bf451139a61ccf" + integrity sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A== dependencies: - glob "^10.2.5" + glob "^10.3.7" rollup-plugin-terser@^7.0.0: version "7.0.2" @@ -11849,6 +11861,15 @@ string-natural-compare@^3.0.1: resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4" integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw== +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + string-width@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961" @@ -11858,15 +11879,6 @@ string-width@^3.0.0: is-fullwidth-code-point "^2.0.0" strip-ansi "^5.1.0" -string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - string-width@^5.0.0, string-width@^5.0.1, string-width@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794" @@ -11961,6 +11973,13 @@ stringify-object@^3.3.0: is-obj "^1.0.1" is-regexp "^1.0.0" +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + strip-ansi@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-0.3.0.tgz#25f48ea22ca79187f3174a4db8759347bb126220" @@ -11975,13 +11994,6 @@ strip-ansi@^5.1.0, strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" -strip-ansi@^6.0.0, strip-ansi@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - strip-ansi@^7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2" @@ -12911,10 +12923,10 @@ upath@^1.2.0: resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894" integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg== -update-browserslist-db@^1.0.11: - version "1.0.11" - resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940" - integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA== +update-browserslist-db@^1.0.13: + version "1.0.13" + resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4" + integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg== dependencies: escalade "^3.1.1" picocolors "^1.0.0" @@ -13628,28 +13640,28 @@ workbox-window@7.0.0, workbox-window@^7.0.0: "@types/trusted-types" "^2.0.2" workbox-core "7.0.0" -wrap-ansi@^6.2.0: - version "6.2.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53" - integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA== +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== dependencies: ansi-styles "^4.0.0" string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== +wrap-ansi@^6.2.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53" + integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA== dependencies: ansi-styles "^4.0.0" string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^8.0.1: - version "8.0.1" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.0.1.tgz#2101e861777fec527d0ea90c57c6b03aac56a5b3" - integrity sha512-QFF+ufAqhoYHvoHdajT/Po7KoXVBPXS2bgjIam5isfWJPfIOnQZ50JtUiVvCv/sjgacf3yRrt2ZKUZ/V4itN4g== +wrap-ansi@^8.0.1, wrap-ansi@^8.1.0: + version "8.1.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" + integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ== dependencies: ansi-styles "^6.1.0" string-width "^5.0.1" From b1c4852d4e0c79ac6d357587de008c3c67b62aef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Qu=C3=A8ze?= Date: Thu, 5 Oct 2023 20:05:06 +0200 Subject: [PATCH 2/6] Support colored power tracks. (PR #4760) --- src/app-logic/constants.js | 2 + .../timeline/TrackCustomMarkerGraph.js | 95 ++----------------- src/components/timeline/TrackMemoryGraph.js | 10 +- src/components/timeline/TrackPower.css | 1 - src/components/timeline/TrackPowerGraph.js | 26 ++++- src/profile-logic/graph-color.js | 88 +++++++++++++++++ .../__snapshots__/TrackPower.test.js.snap | 2 +- src/types/markers.js | 15 +-- src/types/profile.js | 13 +++ 9 files changed, 143 insertions(+), 109 deletions(-) create mode 100644 src/profile-logic/graph-color.js diff --git a/src/app-logic/constants.js b/src/app-logic/constants.js index bb9971798c..8fb8a59b68 100644 --- a/src/app-logic/constants.js +++ b/src/app-logic/constants.js @@ -39,6 +39,7 @@ export const TRACK_MEMORY_MARKERS_HEIGHT = 15; export const TRACK_MEMORY_HEIGHT = TRACK_MEMORY_GRAPH_HEIGHT + TRACK_MEMORY_MARKERS_HEIGHT; export const TRACK_MEMORY_LINE_WIDTH = 2; +export const TRACK_MEMORY_COLOR = 'orange'; // The following values are for experimental event delay track. export const TRACK_EVENT_DELAY_HEIGHT = 40; @@ -62,6 +63,7 @@ export const TIMELINE_RULER_HEIGHT = 20; // Height of the power track. export const TRACK_POWER_HEIGHT = 25; export const TRACK_POWER_LINE_WIDTH = 2; +export const TRACK_POWER_DEFAULT_COLOR = 'grey'; // Height of the process cpu track. export const TRACK_PROCESS_CPU_HEIGHT = 25; diff --git a/src/components/timeline/TrackCustomMarkerGraph.js b/src/components/timeline/TrackCustomMarkerGraph.js index e97ec3736a..efb8cfc328 100644 --- a/src/components/timeline/TrackCustomMarkerGraph.js +++ b/src/components/timeline/TrackCustomMarkerGraph.js @@ -7,6 +7,11 @@ import * as React from 'react'; import { InView } from 'react-intersection-observer'; import { withSize } from 'firefox-profiler/components/shared/WithSize'; +import { + getStrokeColor, + getFillColor, + getDotColor, +} from 'firefox-profiler/profile-logic/graph-color'; import explicitConnect from 'firefox-profiler/utils/connect'; import { bisectionRight } from 'firefox-profiler/utils/bisect'; import { getCommittedRange } from 'firefox-profiler/selectors/profile'; @@ -17,28 +22,6 @@ import { TRACK_MARKER_DEFAULT_COLOR, TRACK_MARKER_LINE_WIDTH, } from 'firefox-profiler/app-logic/constants'; -import { - BLUE_50, - BLUE_60, - GREEN_50, - GREEN_60, - GREY_50, - GREY_60, - INK_50, - INK_60, - MAGENTA_50, - MAGENTA_60, - ORANGE_50, - ORANGE_60, - PURPLE_50, - PURPLE_60, - RED_50, - RED_60, - TEAL_50, - TEAL_60, - YELLOW_50, - YELLOW_60, -} from 'photon-colors'; import type { ThreadIndex, @@ -48,7 +31,6 @@ import type { IndexIntoStringTable, MarkerSchema, CollectedCustomMarkerSamples, - MarkerGraphColor, MarkerGraphType, MarkerIndex, Marker, @@ -101,65 +83,6 @@ function _calculateUnitValue( return scaled * 0.85; } -function _getStrokeColor(color: MarkerGraphColor) { - switch (color) { - case 'magenta': - return MAGENTA_50; - case 'purple': - return PURPLE_50; - case 'blue': - return BLUE_50; - case 'teal': - return TEAL_50; - case 'green': - return GREEN_50; - case 'yellow': - return YELLOW_50; - case 'red': - return RED_50; - case 'orange': - return ORANGE_50; - case 'grey': - return GREY_50; - case 'ink': - return INK_50; - default: - throw new Error('Unexpected marker track stroke color: ' + color); - } -} - -function _getFillColor(color: MarkerGraphColor) { - // Same as stroke color with transparency. - return _getStrokeColor(color) + '88'; -} - -function _getDotColor(color: MarkerGraphColor) { - switch (color) { - case 'magenta': - return MAGENTA_60; - case 'purple': - return PURPLE_60; - case 'blue': - return BLUE_60; - case 'teal': - return TEAL_60; - case 'green': - return GREEN_60; - case 'yellow': - return YELLOW_60; - case 'red': - return RED_60; - case 'orange': - return ORANGE_60; - case 'grey': - return GREY_60; - case 'ink': - return INK_60; - default: - throw new Error('Unexpected marker track stroke color: ' + color); - } -} - /** * This component controls the rendering of the canvas. Every render call through * React triggers a new canvas render. Because of this, it's important to only pass @@ -225,7 +148,7 @@ class TrackCustomMarkerCanvas extends React.PureComponent { const samples = collectedSamples.numbersPerLine[graphIndex]; // Draw the chart. // - ctx.strokeStyle = _getStrokeColor(color || TRACK_MARKER_DEFAULT_COLOR); + ctx.strokeStyle = getStrokeColor(color || TRACK_MARKER_DEFAULT_COLOR); const getX = (time) => Math.round((time - rangeStart) * millisecondWidth); @@ -297,9 +220,7 @@ class TrackCustomMarkerCanvas extends React.PureComponent { ctx.lineTo(firstX, deviceHeight); // The line from 4 to 1 will be implicitly filled in. - ctx.fillStyle = _getFillColor( - color || TRACK_MARKER_DEFAULT_COLOR - ); + ctx.fillStyle = getFillColor(color || TRACK_MARKER_DEFAULT_COLOR); ctx.fill(); ctx.closePath(); } @@ -606,7 +527,7 @@ class TrackCustomMarkerGraphImpl extends React.PureComponent { innerTrackHeight - unitValue * innerTrackHeight - halfLineWidth; // eslint-disable-next-line flowtype/no-weak-types const style: Object = { left, top }; - style.backgroundColor = _getDotColor(color || TRACK_MARKER_DEFAULT_COLOR); + style.backgroundColor = getDotColor(color || TRACK_MARKER_DEFAULT_COLOR); if (marker.end) { let screenWidth = (width * (marker.end - marker.start)) / rangeLength; diff --git a/src/components/timeline/TrackMemoryGraph.js b/src/components/timeline/TrackMemoryGraph.js index 4b077769ab..62bffc95c2 100644 --- a/src/components/timeline/TrackMemoryGraph.js +++ b/src/components/timeline/TrackMemoryGraph.js @@ -8,6 +8,10 @@ import * as React from 'react'; import { InView } from 'react-intersection-observer'; import { Localized } from '@fluent/react'; import { withSize } from 'firefox-profiler/components/shared/WithSize'; +import { + getStrokeColor, + getFillColor, +} from 'firefox-profiler/profile-logic/graph-color'; import explicitConnect from 'firefox-profiler/utils/connect'; import { formatBytes, @@ -20,9 +24,9 @@ import { getProfileInterval, } from 'firefox-profiler/selectors/profile'; import { getThreadSelectors } from 'firefox-profiler/selectors/per-thread'; -import { ORANGE_50 } from 'photon-colors'; import { Tooltip } from 'firefox-profiler/components/tooltip/Tooltip'; import { EmptyThreadIndicator } from './EmptyThreadIndicator'; +import { TRACK_MEMORY_COLOR } from 'firefox-profiler/app-logic/constants'; import type { CounterIndex, @@ -139,8 +143,8 @@ class TrackMemoryCanvas extends React.PureComponent { ctx.lineWidth = deviceLineWidth; ctx.lineJoin = 'bevel'; - ctx.strokeStyle = ORANGE_50; - ctx.fillStyle = '#ff940088'; // Orange 50 with transparency. + ctx.strokeStyle = getStrokeColor(TRACK_MEMORY_COLOR); + ctx.fillStyle = getFillColor(TRACK_MEMORY_COLOR); ctx.beginPath(); // The x and y are used after the loop. diff --git a/src/components/timeline/TrackPower.css b/src/components/timeline/TrackPower.css index 7ecd677585..09f616a1c2 100644 --- a/src/components/timeline/TrackPower.css +++ b/src/components/timeline/TrackPower.css @@ -21,6 +21,5 @@ border-radius: 3px; margin-top: -3px; margin-left: -3px; - background-color: var(--grey-50); pointer-events: none; } diff --git a/src/components/timeline/TrackPowerGraph.js b/src/components/timeline/TrackPowerGraph.js index 2a8576c9ec..40845eda11 100644 --- a/src/components/timeline/TrackPowerGraph.js +++ b/src/components/timeline/TrackPowerGraph.js @@ -7,6 +7,11 @@ import * as React from 'react'; import { InView } from 'react-intersection-observer'; import { withSize } from 'firefox-profiler/components/shared/WithSize'; +import { + getStrokeColor, + getFillColor, + getDotColor, +} from 'firefox-profiler/profile-logic/graph-color'; import explicitConnect from 'firefox-profiler/utils/connect'; import { bisectionRight } from 'firefox-profiler/utils/bisect'; import { @@ -15,10 +20,10 @@ import { getProfileInterval, } from 'firefox-profiler/selectors/profile'; import { getThreadSelectors } from 'firefox-profiler/selectors/per-thread'; -import { GREY_50 } from 'photon-colors'; import { Tooltip } from 'firefox-profiler/components/tooltip/Tooltip'; import { TooltipTrackPower } from 'firefox-profiler/components/tooltip/TrackPower'; import { EmptyThreadIndicator } from './EmptyThreadIndicator'; +import { TRACK_POWER_DEFAULT_COLOR } from 'firefox-profiler/app-logic/constants'; import type { CounterIndex, @@ -126,8 +131,10 @@ class TrackPowerCanvas extends React.PureComponent { ctx.lineWidth = deviceLineWidth; ctx.lineJoin = 'bevel'; - ctx.strokeStyle = GREY_50; - ctx.fillStyle = '#73737388'; // Grey 50 with transparency. + ctx.strokeStyle = getStrokeColor( + counter.color || TRACK_POWER_DEFAULT_COLOR + ); + ctx.fillStyle = getFillColor(counter.color || TRACK_POWER_DEFAULT_COLOR); ctx.beginPath(); const getX = (i) => @@ -488,7 +495,18 @@ class TrackPowerGraphImpl extends React.PureComponent { const top = innerTrackHeight - unitSampleCount * innerTrackHeight + lineWidth / 2; - return
; + return ( +
+ ); } render() { diff --git a/src/profile-logic/graph-color.js b/src/profile-logic/graph-color.js new file mode 100644 index 0000000000..74b40785f8 --- /dev/null +++ b/src/profile-logic/graph-color.js @@ -0,0 +1,88 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +// @flow + +import { + BLUE_50, + BLUE_60, + GREEN_50, + GREEN_60, + GREY_50, + GREY_60, + INK_50, + INK_60, + MAGENTA_50, + MAGENTA_60, + ORANGE_50, + ORANGE_60, + PURPLE_50, + PURPLE_60, + RED_50, + RED_60, + TEAL_50, + TEAL_60, + YELLOW_50, + YELLOW_60, +} from 'photon-colors'; + +import type { GraphColor } from 'firefox-profiler/types'; + +export function getStrokeColor(color: GraphColor) { + switch (color) { + case 'magenta': + return MAGENTA_50; + case 'purple': + return PURPLE_50; + case 'blue': + return BLUE_50; + case 'teal': + return TEAL_50; + case 'green': + return GREEN_50; + case 'yellow': + return YELLOW_50; + case 'red': + return RED_50; + case 'orange': + return ORANGE_50; + case 'grey': + return GREY_50; + case 'ink': + return INK_50; + default: + throw new Error('Unexpected track color: ' + color); + } +} + +export function getFillColor(color: GraphColor) { + // Same as stroke color with transparency. + return getStrokeColor(color) + '88'; +} + +export function getDotColor(color: GraphColor) { + switch (color) { + case 'magenta': + return MAGENTA_60; + case 'purple': + return PURPLE_60; + case 'blue': + return BLUE_60; + case 'teal': + return TEAL_60; + case 'green': + return GREEN_60; + case 'yellow': + return YELLOW_60; + case 'red': + return RED_60; + case 'orange': + return ORANGE_60; + case 'grey': + return GREY_60; + case 'ink': + return INK_60; + default: + throw new Error('Unexpected track color: ' + color); + } +} diff --git a/src/test/components/__snapshots__/TrackPower.test.js.snap b/src/test/components/__snapshots__/TrackPower.test.js.snap index cf0ff48b6b..a48d77c4f5 100644 --- a/src/test/components/__snapshots__/TrackPower.test.js.snap +++ b/src/test/components/__snapshots__/TrackPower.test.js.snap @@ -3,7 +3,7 @@ exports[`TrackPower draws a dot that matches the snapshot 1`] = `
`; diff --git a/src/types/markers.js b/src/types/markers.js index 2593fbe609..9d3aae7e5f 100644 --- a/src/types/markers.js +++ b/src/types/markers.js @@ -10,6 +10,7 @@ import type { IndexIntoStringTable, Tid, Pid, + GraphColor, } from './profile'; import type { ObjectMap } from './utils'; @@ -89,23 +90,11 @@ export type MarkerDisplayLocation = // TODO - This is not supported yet. | 'stack-chart'; -export type MarkerGraphColor = - | 'blue' - | 'green' - | 'grey' - | 'ink' - | 'magenta' - | 'orange' - | 'purple' - | 'red' - | 'teal' - | 'yellow'; - export type MarkerGraphType = 'bar' | 'line' | 'line-filled'; export type MarkerGraph = {| key: string, type: MarkerGraphType, - color?: MarkerGraphColor, + color?: GraphColor, |}; export type MarkerSchema = {| diff --git a/src/types/profile.js b/src/types/profile.js index 034880a1c5..bcb3c6e18b 100644 --- a/src/types/profile.js +++ b/src/types/profile.js @@ -514,10 +514,23 @@ export type CounterSamplesTable = {| length: number, |}; +export type GraphColor = + | 'blue' + | 'green' + | 'grey' + | 'ink' + | 'magenta' + | 'orange' + | 'purple' + | 'red' + | 'teal' + | 'yellow'; + export type Counter = {| name: string, category: string, description: string, + color?: GraphColor, pid: Pid, mainThreadIndex: ThreadIndex, sampleGroups: $ReadOnlyArray<{| From e3647d0f854bfa8eb2967b4af4163c091acfcede Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Qu=C3=A8ze?= Date: Thu, 12 Oct 2023 22:59:28 +0200 Subject: [PATCH 3/6] Display nicer time units in the timeline ruler for values that are better expressed in minutes or hours. (PR #4774) --- src/components/timeline/Ruler.js | 52 +++++++++++++------ .../ActiveTabTimeline.test.js.snap | 6 +-- .../__snapshots__/Timeline.test.js.snap | 12 ++--- src/test/unit/marker-schema.test.js | 18 +++---- src/utils/format-numbers.js | 16 +++--- 5 files changed, 65 insertions(+), 39 deletions(-) diff --git a/src/components/timeline/Ruler.js b/src/components/timeline/Ruler.js index ff49536d70..b8135c2447 100644 --- a/src/components/timeline/Ruler.js +++ b/src/components/timeline/Ruler.js @@ -6,6 +6,7 @@ import React, { PureComponent } from 'react'; import { TIMELINE_RULER_HEIGHT } from 'firefox-profiler/app-logic/constants'; +import { formatTimestamp } from 'firefox-profiler/utils/format-numbers'; import './Ruler.css'; @@ -19,45 +20,66 @@ type Props = {| |}; export class TimelineRuler extends PureComponent { - _findNiceNumberGreaterOrEqualTo(uglyNumber: number) { + _findNiceNumberGreaterOrEqualTo(uglyNumber: Milliseconds) { + // Special case numbers in the seconds, minutes or hour ranges. + if (uglyNumber > 10000 && uglyNumber <= 48 * 3600 * 1000) { + for (const seconds of [15, 20, 30]) { + const number = seconds * 1000; + if (uglyNumber <= number) { + return number; + } + } + for (const minutes of [1, 2, 5, 10, 15, 20, 30]) { + const number = minutes * 60 * 1000; + if (uglyNumber <= number) { + return number; + } + } + for (const hours of [1, 2, 3, 4, 6, 8, 12, 24, 48]) { + const number = hours * 3600 * 1000; + if (uglyNumber <= number) { + return number; + } + } + } + // Write uglyNumber as a * 10^b, with 1 <= a < 10. // Return the lowest of 2 * 10^b, 5 * 10^b, 10 * 10^b that is greater or equal to uglyNumber. const b = Math.floor(Math.log10(uglyNumber)); if (uglyNumber <= 2 * Math.pow(10, b)) { - return { number: 2 * Math.pow(10, b), exponent: b }; + return 2 * Math.pow(10, b); } if (uglyNumber <= 5 * Math.pow(10, b)) { - return { number: 5 * Math.pow(10, b), exponent: b }; + return 5 * Math.pow(10, b); } - return { number: Math.pow(10, b + 1), exponent: b + 1 }; + return Math.pow(10, b + 1); } _getNotches() { if (this.props.width === 0) { - return { notches: [], decimalPlaces: 0 }; + return { notches: [], notchTime: 0 }; } const { zeroAt, rangeStart, rangeEnd, width } = this.props; const pixelsPerMilliSecond = width / (rangeEnd - rangeStart); const minimumNotchWidth = 55; // pixels - const { number: notchTime, exponent } = - this._findNiceNumberGreaterOrEqualTo( - minimumNotchWidth / pixelsPerMilliSecond - ); + const notchTime = this._findNiceNumberGreaterOrEqualTo( + minimumNotchWidth / pixelsPerMilliSecond + ); const firstNotchIndex = Math.ceil((rangeStart - zeroAt) / notchTime); const lastNotchIndex = Math.floor((rangeEnd - zeroAt) / notchTime); const notches = []; for (let i = firstNotchIndex; i <= lastNotchIndex; i++) { notches.push({ - time: (i * notchTime) / 1000, + time: i * notchTime, pos: (i * notchTime - (rangeStart - zeroAt)) * pixelsPerMilliSecond, }); } - return { notches, decimalPlaces: Math.max(0, -(exponent - 3)) }; + return { notches, notchTime }; } render() { - const { notches, decimalPlaces } = this._getNotches(); + const { notches, notchTime } = this._getNotches(); return (
{ key={i} style={{ left: `${pos}px` }} > - {`${time.toFixed( - decimalPlaces - )}s`} + + {formatTimestamp(time, 2, 2, notchTime)} + ))} diff --git a/src/test/components/__snapshots__/ActiveTabTimeline.test.js.snap b/src/test/components/__snapshots__/ActiveTabTimeline.test.js.snap index 097fc11f8c..55822df1a7 100644 --- a/src/test/components/__snapshots__/ActiveTabTimeline.test.js.snap +++ b/src/test/components/__snapshots__/ActiveTabTimeline.test.js.snap @@ -357,7 +357,7 @@ exports[`ActiveTabTimeline should be rendered properly from the Timeline compone - 0.0000s + 0s
  • - 0.0005s + 500μs
  • - 0.0010s + 1ms
  • diff --git a/src/test/components/__snapshots__/Timeline.test.js.snap b/src/test/components/__snapshots__/Timeline.test.js.snap index ea86c5e0a9..c3fb07efb4 100644 --- a/src/test/components/__snapshots__/Timeline.test.js.snap +++ b/src/test/components/__snapshots__/Timeline.test.js.snap @@ -40,7 +40,7 @@ exports[`TimelineSelection renders the vertical line indicating the time positio - 0.000s + 0s
  • - 0.002s + 2ms
  • - 0.004s + 4ms
  • - 0.006s + 6ms
  • - 0.008s + 8ms
  • - 0.010s + 10ms
  • diff --git a/src/test/unit/marker-schema.test.js b/src/test/unit/marker-schema.test.js index a3ddcb3b39..1de3a09964 100644 --- a/src/test/unit/marker-schema.test.js +++ b/src/test/unit/marker-schema.test.js @@ -299,21 +299,21 @@ describe('marker schema formatting', function () { "duration - 0s", "duration - 10ms", "duration - 12.346ms", - "duration - 2min3s", - "duration - 6h31min", + "duration - 2m3s", + "duration - 6h31m", "duration - 50s", - "duration - 33min20s", - "duration - 13h53min", + "duration - 33m20s", + "duration - 13h53m", "duration - 1d10h", "duration - 123.46ns", "duration - 59.499s", - "duration - 1min", - "duration - 1min", - "duration - 13min", - "duration - 59min59s", + "duration - 1m", + "duration - 1m", + "duration - 13m", + "duration - 59m59s", "duration - 1h", "duration - 1h", - "duration - 23h59min", + "duration - 23h59m", "duration - 1d", "duration - 1d", "time - 12.346ms", diff --git a/src/utils/format-numbers.js b/src/utils/format-numbers.js index f284158581..af0606ec56 100644 --- a/src/utils/format-numbers.js +++ b/src/utils/format-numbers.js @@ -243,7 +243,7 @@ export function formatSeconds( const msPerSecond = 1000; const timeInSeconds = time / msPerSecond; let result = ''; - if (precision !== 0 && precision < msPerSecond) { + if (precision < msPerSecond) { const exponent = Math.floor(Math.log10(precision / msPerSecond)); const digits = Math.max(0, -exponent); result = timeInSeconds.toFixed(digits); @@ -271,8 +271,8 @@ export function formatMinutes( const seconds = time % msPerMinute; return ( formatNumber((time - seconds) / msPerMinute, significantDigits, 0) + - 'min' + - (seconds > 0 && (maxFractionalDigits > 0 || precision < msPerMinute) + 'm' + + ((seconds > 0 && maxFractionalDigits > 0) || precision < msPerMinute ? formatSeconds(seconds, significantDigits, 0, precision) : '') ); @@ -293,7 +293,7 @@ export function formatHours( return ( formatNumber((time - minutes) / msPerHour, significantDigits, 0) + 'h' + - (minutes > 0 && (maxFractionalDigits > 0 || precision < msPerHour) + ((minutes > 0 && maxFractionalDigits > 0) || precision < msPerHour ? formatMinutes(minutes, significantDigits, 0, precision) : '') ); @@ -314,7 +314,7 @@ export function formatDays( return ( formatNumber((time - hours) / msPerDay, significantDigits, 0) + 'd' + - (hours > 0 && (maxFractionalDigits > 0 || precision < msPerDay) + ((hours > 0 && maxFractionalDigits > 0) || precision < msPerDay ? formatHours(hours, significantDigits, 0, precision) : '') ); @@ -330,7 +330,11 @@ export function formatTimestamp( if (precision !== Infinity) { // Round the values to display nicer numbers when the extra precision // isn't useful. (eg. show 3h52min10s instead of 3h52min14s) - precision = 10 ** Math.floor(Math.log10(precision)); + // Only do this for values < 10s as after that we use time units that are + // not decimal. + if (precision < 10000) { + precision = 10 ** Math.floor(Math.log10(precision)); + } if (time > precision) { time = Math.round(time / precision) * precision; } From cc94f1035cccb50983f2815278d043a0ac576e13 Mon Sep 17 00:00:00 2001 From: Markus Stange Date: Fri, 13 Oct 2023 11:10:05 -0400 Subject: [PATCH 4/6] Remove unused callNodeTable prop. --- src/components/sidebar/CallTreeSidebar.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/sidebar/CallTreeSidebar.js b/src/components/sidebar/CallTreeSidebar.js index 62be508c20..56fa52d85b 100644 --- a/src/components/sidebar/CallTreeSidebar.js +++ b/src/components/sidebar/CallTreeSidebar.js @@ -29,7 +29,6 @@ import type { ConnectedProps } from 'firefox-profiler/utils/connect'; import type { ThreadsKey, CategoryList, - CallNodeTable, IndexIntoCallNodeTable, TracedTiming, Milliseconds, @@ -286,7 +285,6 @@ export const CategoryBreakdown = explicitConnect< type StateProps = {| +selectedNodeIndex: IndexIntoCallNodeTable | null, - +callNodeTable: CallNodeTable, +selectedThreadsKey: ThreadsKey, +name: string, +lib: string, @@ -503,7 +501,6 @@ class CallTreeSidebarImpl extends React.PureComponent { export const CallTreeSidebar = explicitConnect<{||}, StateProps, {||}>({ mapStateToProps: (state) => ({ selectedNodeIndex: selectedThreadSelectors.getSelectedCallNodeIndex(state), - callNodeTable: selectedThreadSelectors.getCallNodeInfo(state).callNodeTable, selectedThreadsKey: getSelectedThreadsKey(state), name: getFunctionName(selectedNodeSelectors.getName(state)), lib: selectedNodeSelectors.getLib(state), From 502cab11528ae1a99dd23473368f3220a0fe0234 Mon Sep 17 00:00:00 2001 From: Markus Stange Date: Fri, 13 Oct 2023 11:12:50 -0400 Subject: [PATCH 5/6] Remove unused maxDepth computation from ThreadSampleGraph. --- src/components/shared/thread/SampleGraph.js | 10 ---------- src/components/timeline/TrackThread.js | 1 - 2 files changed, 11 deletions(-) diff --git a/src/components/shared/thread/SampleGraph.js b/src/components/shared/thread/SampleGraph.js index c0da06a9e7..e4d658d965 100644 --- a/src/components/shared/thread/SampleGraph.js +++ b/src/components/shared/thread/SampleGraph.js @@ -20,7 +20,6 @@ import type { CategoryList, IndexIntoSamplesTable, Milliseconds, - CallNodeInfo, IndexIntoCallNodeTable, SelectedState, } from 'firefox-profiler/types'; @@ -34,7 +33,6 @@ type Props = {| +interval: Milliseconds, +rangeStart: Milliseconds, +rangeEnd: Milliseconds, - +callNodeInfo: CallNodeInfo, +categories: CategoryList, +onSampleClick: ( event: SyntheticMouseEvent<>, @@ -96,7 +94,6 @@ export class ThreadSampleGraphImpl extends PureComponent { interval, rangeStart, rangeEnd, - callNodeInfo, samplesSelectedStates, sampleCallNodes, categories, @@ -110,13 +107,6 @@ export class ThreadSampleGraphImpl extends PureComponent { canvas.width = Math.round(width * devicePixelRatio); canvas.height = Math.round(height * devicePixelRatio); const ctx = canvas.getContext('2d'); - let maxDepth = 0; - const { callNodeTable } = callNodeInfo; - for (let i = 0; i < callNodeTable.depth.length; i++) { - if (callNodeTable.depth[i] > maxDepth) { - maxDepth = callNodeTable.depth[i]; - } - } const range = [rangeStart, rangeEnd]; const rangeLength = range[1] - range[0]; const xPixelsPerMs = canvas.width / rangeLength; diff --git a/src/components/timeline/TrackThread.js b/src/components/timeline/TrackThread.js index 8ec74d88b0..f8113c075c 100644 --- a/src/components/timeline/TrackThread.js +++ b/src/components/timeline/TrackThread.js @@ -285,7 +285,6 @@ class TimelineTrackThreadImpl extends PureComponent { thread={filteredThread} rangeStart={rangeStart} rangeEnd={rangeEnd} - callNodeInfo={callNodeInfo} sampleCallNodes={sampleCallNodes} samplesSelectedStates={samplesSelectedStates} categories={categories} From 8d4a1f4d70ce1d83ce7626ea938e2ffd5edf102a Mon Sep 17 00:00:00 2001 From: Markus Stange Date: Fri, 13 Oct 2023 11:13:45 -0400 Subject: [PATCH 6/6] Remove unused thread argument. --- src/profile-logic/transforms.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/profile-logic/transforms.js b/src/profile-logic/transforms.js index 2643fe720a..3934daba2f 100644 --- a/src/profile-logic/transforms.js +++ b/src/profile-logic/transforms.js @@ -507,7 +507,6 @@ export function applyTransformToCallNodePath( return _startCallNodePathWithFunction(transform.funcIndex, callNodePath); case 'focus-category': return _removeOtherCategoryFunctionsInNodePathWithFunction( - transformedThread, transform.category, callNodePath, callNodeTable @@ -597,7 +596,6 @@ function _dropFunctionInCallNodePath( // removes all functions that are not in the category from the callNodePath function _removeOtherCategoryFunctionsInNodePathWithFunction( - thread: Thread, category: IndexIntoCategoryList, callNodePath: CallNodePath, callNodeTable: CallNodeTable