report: make gauge font size and positioning dynamic (#9057)

Author: paulirish

lighthouse-core/report/html/report-styles.css

@@ -1111,14 +1111,13 @@
 
 .lh-gauge__percentage {
   width: 100%;
-  height: var(--inset-size);
+  height: var(--gauge-circle-size);
   position: absolute;
-  border-radius: inherit;
   font-family: var(--monospace-font-family);
-  font-size: var(--score-number-font-size);
-  line-height: var(--score-number-font-size);
+  font-size: calc(var(--gauge-circle-size) * 0.34 + 1.3px);
+  line-height: 0;
   text-align: center;
-  top: calc(var(--score-container-padding) + var(--gauge-circle-size) / 3);
+  top: calc(var(--score-container-padding) + var(--gauge-circle-size) / 2);
 }
 
 .lh-category .lh-gauge__percentage {

lighthouse-core/scripts/roll-to-devtools.sh

@@ -49,4 +49,4 @@ cp -r dist/dt-report-resources/ $fe_lh_dir
 VERSION=$(node -e "console.log(require('./package.json').version)")
 sed -i '' -e "s/Version:.*/Version: $VERSION/g" "$tests_dir"/*-expected.txt
 
-echo "Done. To rebase the test expectations, run: ~/chromium/src/third_party/blink/tools/run_web_tests.py --no-retry 'http/tests/devtools/audits2/*' --reset-results"
+echo "Done. To rebase the test expectations, run: yarn --cwd ~/chromium/src/third_party/blink/renderer/devtools test 'http/tests/devtools/audits2/*' --reset-results"