npm - ember-native-devtools - Versions diffs - 1.0.2 - Mend

ember-native-devtools 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (468) hide show

package/download/googlechrome.github.io/lighthouse/scorecalc/index.html ADDED Viewed

@@ -0,0 +1,78 @@
+<!DOCTYPE html><html><head>
+    <title>Lighthouse Scoring calculator</title>
+    <meta charset="utf-8">
+<!--     ToDO
+features:
+- store values together in localStorage?
+bugs:
+- when values are set in beginning (random or localstorage restored), the metric value can shift a little bit thanks to the observer on the score values. it only happens in this case. why? we dont know. but its dumb.
+- set a fixed explodey palette per each metric'
+-->
+    <meta name="viewport" content="width=device-width, initial-scale=0.6">
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body><h1>
+    <svg class="lh-topbar__logo" viewBox="0 0 24 24">
+      <defs>
+        <linearGradient x1="57.456%" y1="13.086%" x2="18.259%" y2="72.322%" id="lh-topbar__logo--a">
+          <stop stop-color="#262626" stop-opacity=".1" offset="0%"></stop>
+          <stop stop-color="#262626" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="lh-topbar__logo--b">
+          <stop stop-color="#262626" stop-opacity=".1" offset="0%"></stop>
+          <stop stop-color="#262626" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="58.764%" y1="65.756%" x2="36.939%" y2="50.14%" id="lh-topbar__logo--c">
+          <stop stop-color="#262626" stop-opacity=".1" offset="0%"></stop>
+          <stop stop-color="#262626" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="41.635%" y1="20.358%" x2="72.863%" y2="85.424%" id="lh-topbar__logo--d">
+          <stop stop-color="#FFF" stop-opacity=".1" offset="0%"></stop>
+          <stop stop-color="#FFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+      </defs>
+      <g fill="none" fill-rule="evenodd">
+        <path d="M12 3l4.125 2.625v3.75H18v2.25h-1.688l1.5 9.375H6.188l1.5-9.375H6v-2.25h1.875V5.648L12 3zm2.201 9.938L9.54 14.633 9 18.028l5.625-2.062-.424-3.028zM12.005 5.67l-1.88 1.207v2.498h3.75V6.86l-1.87-1.19z" fill="#F44B21"></path>
+        <path fill="#FFF" d="M14.201 12.938L9.54 14.633 9 18.028l5.625-2.062z"></path>
+        <path d="M6 18c-2.042 0-3.95-.01-5.813 0l1.5-9.375h4.326L6 18z" fill="url(#lh-topbar__logo--a)" fill-rule="nonzero" transform="translate(6 3)"></path>
+        <path fill="#FFF176" fill-rule="nonzero" d="M13.875 9.375v-2.56l-1.87-1.19-1.88 1.207v2.543z"></path>
+        <path fill="url(#lh-topbar__logo--b)" fill-rule="nonzero" d="M0 6.375h6v2.25H0z" transform="translate(6 3)"></path>
+        <path fill="url(#lh-topbar__logo--c)" fill-rule="nonzero" d="M6 6.375H1.875v-3.75L6 0z" transform="translate(6 3)"></path>
+        <path fill="url(#lh-topbar__logo--d)" fill-rule="nonzero" d="M6 0l4.125 2.625v3.75H12v2.25h-1.688l1.5 9.375H.188l1.5-9.375H0v-2.25h1.875V2.648z" transform="translate(6 3)"></path>
+      </g>
+    </svg>
+    Lighthouse Scoring Calculator
+  </h1>
+  <div id="container"></div>
+  <footer class="wrapper">
+    Learn more about scoring at <a href="https://web.dev/performance-scoring/">web.dev/performance-scoring</a>.
+    <br>
+    <details>
+      <summary>Scores under 5/100 are not supported by this UI. <abbr>Why?</abbr>
+      </summary>
+      <a href="https://www.desmos.com/calculator/dufar5rf4g">Lighthouse uses log-normal curves</a>, which have extremely long tails. If this UI supported them then 50% of the "Value" slider's width would be devoted to scores under 8, which significantly reduces the usability of the slider.
+    </details>
+  </footer>
+  <script defer="" type="module" src="calc.js"></script>
+  <script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+  ga('create', 'UA-85519014-7', 'auto');
+  ga('send', 'pageview');
+</script>
+</body></html>

package/download/googlechrome.github.io/lighthouse/scorecalc/style.css ADDED Viewed

@@ -0,0 +1,554 @@
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  background-color: hsla(225, 68%, 25%, 1);
+  height: 100%;
+  padding: 0;
+  /* lighthouse css */
+  font-family: var(--report-font-family);
+  font-size: var(--report-font-size);
+  margin: 0;
+  line-height: var(--report-line-height);
+  background: var(--report-background-color);
+  scroll-behavior: smooth;
+  color: var(--report-text-color);
+}
+[hidden] {
+  display: none !important;
+}
+body {
+  padding: 20px 0;
+}
+table {
+  table-layout: fixed;
+  /* this is some amazing shit. https://kennethormandy.com/journal/flipping-on-tabular-numbers/ */
+  -webkit-font-feature-settings: "tnum";
+  font-feature-settings: "tnum";
+  font-variant-numeric: tabular-nums;
+  margin: 0 auto;
+}
+th, .controls {
+  font-weight: normal;
+  color: var(--color-gray-600);
+  word-break: normal;
+  border-bottom: 1px solid var(--color-gray-200);
+}
+tr:first-child td {
+  border-top: 8px solid transparent;
+}
+td {
+  vertical-align: top;
+}
+/* icon */
+tbody td:nth-child(1) {
+    width: 16px;
+}
+/* metric value */
+tbody td:nth-child(3) {
+  text-align: right;
+}
+input.metric-value, tbody td:nth-child(3) {
+  max-width: 210px;
+  width: 18vw;
+}
+tbody td:nth-child(4) {
+  width: 30px;
+}
+/* metric score */
+tbody td:nth-child(5) {
+  text-align: right;
+  font-size: 11px;
+}
+/* weighting */
+tbody td:nth-child(6) {
+  width: 40px;
+  text-align: right;
+}
+input.metric-score {
+  opacity: 0.85;
+}
+output {
+  display: block;
+  line-height: 16px;
+  margin-bottom: 8px;
+}
+section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+h1 {
+  font-size: var(--gauge-label-font-size-big);
+  line-height: var(--gauge-label-line-height-big);
+  font-weight: normal;
+  text-align: center;
+}
+h1 svg {
+  height: var(--gauge-label-font-size-big);
+  vertical-align: text-top;
+}
+h2 i {
+  font-size: 60%;
+}
+footer {
+  font-size: 80%;
+  display: block !important;
+}
+@media screen and (max-width: 1040px) {
+  footer {
+    padding: 0 20px;
+  }
+}
+.wrapper {
+  max-width: 1020px;
+  margin: 60px auto;
+  min-width: 380px;
+  display: flex;
+  align-items: center;
+}
+.controls {
+  margin: 30px auto;
+  justify-content: center;
+  border: 0;
+}
+select {
+  color: var(--color-gray-600);
+}
+label {
+  margin: 0 10px;
+}
+/* the SVG pretty big so we'll subtract some of its whitespace */
+.perfscore {
+  margin-left: -20px;
+}
+/* keep the table on top tho. */
+table {
+  position: relative;
+  z-index: 10;
+}
+@media screen and (max-width: 890px) {
+  .wrapper {
+    flex-direction: column;
+  }
+  .perfscore {
+    margin-left: 0;
+    margin-top: -20px;
+  }
+  tbody td:nth-child(4) {
+    width: 3px
+  }
+}
+h2 {
+  font-weight: 200;
+  font-size: 21px;
+  margin: 0;
+  text-align: center;
+  width: 70px;
+}
+form {
+  overflow: hidden;
+}
+.weight-text {
+  color: var(--color-gray-500);
+}
+/* Lighthouse styles */
+/* no idea which of these variables i dont need.. */
+:root {
+  --palette-0: #1de9b6;
+  --palette-1: #7c4dff;
+  --palette-2: #ffb200;
+  --palette-3: #00affe;
+  --palette-4: #ff4181;
+  --palette-5: #a1a1a1;
+   /* Palette using Material Design Colors
+   * https://www.materialui.co/colors */
+  --color-amber-50: #FFF8E1;
+  --color-blue-200: #90CAF9;
+  --color-blue-900: #0D47A1;
+  --color-blue-A700: #2962FF;
+  --color-cyan-500: #00BCD4;
+  --color-gray-100: #F5F5F5;
+  --color-gray-200: #E0E0E0;
+  --color-gray-400: #BDBDBD;
+  --color-gray-50: #FAFAFA;
+  --color-gray-500: #9E9E9E;
+  --color-gray-600: #757575;
+  --color-gray-700: #616161;
+  --color-gray-800: #424242;
+  --color-gray-900: #212121;
+  --color-gray: #000000;
+  --color-green-700: #018642;
+  --color-green: #0CCE6B;
+  --color-orange-700: #D04900;
+  --color-orange: #FFA400;
+  --color-red-700: #EB0F00;
+  --color-red: #FF4E42;
+  --color-teal-600: #00897B;
+  --color-white: #FFFFFF;
+  /* Context-specific colors */
+  --color-average-secondary: var(--color-orange-700);
+  --color-average: var(--color-orange);
+  --color-fail-secondary: var(--color-red-700);
+  --color-fail: var(--color-red);
+  --color-informative: var(--color-blue-900);
+  --color-pass-secondary: var(--color-green-700);
+  --color-pass: var(--color-green);
+  --color-hover: var(--color-gray-50);
+  /* Component variables */
+  --audit-description-padding-left: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right));
+  --audit-explanation-line-height: 16px;
+  --audit-group-margin-bottom: 40px;
+  --audit-group-padding-vertical: 8px;
+  --audit-margin-horizontal: 5px;
+  --audit-padding-vertical: 8px;
+  --category-header-font-size: 20px;
+  --category-padding: 40px;
+  --chevron-line-stroke: var(--color-gray-600);
+  --chevron-size: 12px;
+  --default-padding: 12px;
+  --env-item-background-color: var(--color-gray-100);
+  --env-item-font-size: 28px;
+  --env-item-line-height: 36px;
+  --env-item-padding: 10px 0px;
+  --env-name-min-width: 220px;
+  --footer-padding-vertical: 16px;
+  --gauge-circle-size-big: 112px;
+  --gauge-circle-size: 120px;
+  --gauge-label-font-size-big: 28px;
+  --gauge-label-font-size: 20px;
+  --gauge-label-line-height-big: 36px;
+  --gauge-label-line-height: 26px;
+  --gauge-percentage-font-size-big: 38px;
+  --gauge-percentage-font-size: 28px;
+  --gauge-wrapper-width: 148px;
+  --header-line-height: 24px;
+  --highlighter-background-color: var(--report-text-color);
+  --icon-square-size: calc(var(--score-icon-size) * 0.88);
+  --image-preview-size: 48px;
+  --metric-toggle-lines-fill: #7F7F7F;
+  --metrics-toggle-background-color: var(--color-gray-200);
+  --plugin-badge-background-color: var(--color-white);
+  --plugin-badge-size-big: calc(var(--gauge-circle-size-big) / 2.7);
+  --plugin-badge-size: calc(var(--gauge-circle-size) / 2.7);
+  --plugin-icon-size: 65%;
+  --pwa-icon-margin: 0 6px 0 -2px;
+  --pwa-icon-size: var(--topbar-logo-size);
+  --report-background-color: #fff;
+  --report-border-color-secondary: #ebebeb;
+  --report-font-family-monospace: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
+  --report-font-family: Roboto, Helvetica, Arial, sans-serif;
+  --report-font-size: 16px;
+  --report-line-height: 24px;
+  --report-min-width: 400px;
+  --report-text-color-secondary: var(--color-gray-800);
+  --report-text-color: var(--color-gray-900);
+  --report-width: calc(60 * var(--report-font-size));
+  --score-container-padding: 8px;
+  --score-icon-background-size: 24px;
+  --score-icon-margin-left: 4px;
+  --score-icon-margin-right: 12px;
+  --score-icon-margin: 0 var(--score-icon-margin-right) 0 var(--score-icon-margin-left);
+  --score-icon-size: 12px;
+  --scores-container-padding: 20px 0 20px 0;
+  --scorescale-height: 6px;
+  --scorescale-width: 18px;
+  --section-padding-vertical: 12px;
+  --snippet-background-color: var(--color-gray-50);
+  --snippet-color: var(--color-gray-800);
+  --sparkline-height: 5px;
+  --stackpack-padding-horizontal: 10px;
+  --sticky-header-background-color: var(--report-background-color);
+  --table-higlight-background-color: hsla(0, 0%, 75%, 0.1);
+  --tools-icon-color: var(--color-gray-600);
+  --tools-icon-size: var(--score-icon-background-size);
+  --topbar-background-color: var(--color-gray-100);
+  --topbar-height: 32px;
+  --topbar-logo-size: 24px;
+  --topbar-padding: 0 8px;
+  --toplevel-warning-padding: 22px;
+}
+/* score icon */
+.lh-metric__score-icon {
+  width: var(--score-icon-size);
+  height: var(--score-icon-size);
+  display: inline-block;
+}
+.lh-metric--pass .lh-metric__display-text {
+  color: var(--color-pass-secondary);
+}
+.lh-metric--pass .lh-metric__score-icon {
+  border-radius: 100%;
+  background: var(--color-pass);
+}
+.lh-metric--average .lh-metric__display-text {
+  color: var(--color-average-secondary);
+}
+.lh-metric--average .lh-metric__score-icon {
+  background: var(--color-average);
+  width: var(--icon-square-size);
+  height: var(--icon-square-size);
+}
+.lh-metric--fail .lh-metric__display-text {
+  color: var(--color-fail-secondary);
+}
+.lh-metric--fail .lh-metric__score-icon,
+.lh-metric--error .lh-metric__score-icon {
+  border-left: calc(var(--score-icon-size) / 2) solid transparent;
+  border-right: calc(var(--score-icon-size) / 2) solid transparent;
+  border-bottom: var(--score-icon-size) solid var(--color-fail);
+}
+/*  the gauge! */
+circle {
+  stroke: currentcolor;
+  r: var(--radius);
+}
+text {
+  font-size: calc(var(--radius) * 0.2);
+}
+.lh-gauge {
+  margin: 0 auto;
+  width: 225px;
+  stroke-width: var(--stroke-width);
+  stroke-linecap: round;
+}
+.lh-gauge--faded {
+  opacity: 0.1;
+}
+.lh-gauge__wrapper {
+  font-family: var(--report-font-family-monospace);
+  text-align: center;
+  text-decoration: none;
+  transition: .3s;
+  cursor:default;
+}
+.lh-gauge__wrapper--pass {
+  color: var(--color-pass);
+}
+.lh-gauge__wrapper--average {
+  color: var(--color-average);
+}
+.lh-gauge__wrapper--fail {
+  color: var(--color-fail);
+}
+.state--expanded {
+  /* color: var(--color-gray-600); */
+  transition: color .3s;
+}
+.state--highlight {
+  color: var(--color-highlight);
+}
+.lh-gauge__svg-wrapper {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.lh-gauge__cutout {
+  opacity: .999;
+  transition: opacity .3s;
+}
+.state--highlight .lh-gauge__cutout {
+  opacity: 0;
+}
+.lh-gauge__inner {
+  color: inherit;
+}
+.lh-gauge__base {
+  fill: currentcolor;
+}
+.lh-gauge__arc {
+  fill: none;
+  transition: opacity .3s;
+}
+.lh-gauge__arc--metric {
+  color: var(--metric-color);
+  stroke-dashoffset: var(--metric-offset);
+}
+.lh-gauge-hover {
+  color: currentcolor;
+  opacity: 0.001;
+  stroke-linecap: butt;
+  stroke-width: 24;
+  /* hack. move the hover target out of the center. ideally i tweak the r instead but that rquires considerably more math. */
+  transform: scale(1.15);
+  /* I'll remove it when someone goes 'eh' */
+  cursor: help;
+}
+.lh-gauge__arc--metric.lh-gauge--miniarc {
+  opacity: 0;
+  stroke-dasharray: 0 calc(var(--circle-meas) * var(--radius));
+  transition: 0s .005s;
+}
+.state--expanded .lh-gauge__arc--metric.lh-gauge--miniarc {
+  opacity: .999;
+  stroke-dasharray: var(--metric-array);
+  transition: 0.3s; /*  calc(.005s + var(--i)*.05s); entrace animation */
+}
+.state--expanded .lh-gauge__base {
+  fill: var(--color-gray-600);
+  stroke: var(--color-gray-600);
+}
+.state--expanded .lh-gauge__inner .lh-gauge__arc {
+  opacity: 0;
+}
+.lh-gauge__percentage {
+  text-anchor: middle;
+  dominant-baseline: middle;
+  fill: currentcolor;
+  opacity: .999;
+  font-size: calc(var(--radius) * 0.625);
+  transition: opacity .3s ease-in;
+}
+.state--highlight .lh-gauge__percentage {
+  opacity: 0;
+}
+.cover {
+  fill: none;
+  opacity: .001;
+  pointer-events: none;
+}
+.state--expanded .cover {
+  pointer-events: auto;
+}
+.metric {
+  transform: scale(var(--scale-initial));
+  opacity: 0;
+  transition: transform .1s .2s ease-out,  opacity .3s ease-out;
+  pointer-events: none;
+}
+.metric text {
+  pointer-events: none;
+}
+.metric__value {
+  fill: currentcolor;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.state--expanded .metric {
+  transform: scale(1);
+  opacity: .999;
+  transition: transform .3s ease-out,  opacity .3s ease-in,  stroke-width .1s ease-out;
+  transition-delay: calc(var(--i)*.05s);
+  pointer-events: auto;
+}
+.state--highlight .metric {
+  opacity: .3;
+}
+.state--highlight .metric--highlight {
+  opacity: .999;
+  stroke-width: calc(1.5*var(--stroke-width));
+}
+.state--highlight .metric--highlight .metric__value {
+  opacity: 0.999;
+}
+/*
+ the initial first load peek
+*/
+.lh-gauge__bg {  /* needed for the use zindex stacking w/ transparency */
+  fill: var(--report-background-color);
+  stroke: var(--report-background-color);
+}
+.state--peek .metric {
+  transition-delay: 0ms;
+  animation: peek var(--peek-dur) cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  animation-fill-mode: forwards;
+}
+.state--peek .lh-gauge__inner .lh-gauge__arc {
+  opacity: 1;
+}
+.state--peek .lh-gauge__arc.lh-gauge--faded:not(.lh-gauge-hover) {
+  opacity: 0.3; /* just a tad stronger cuz its fighting with a big solid arg */
+}
+/* do i need to set expanded and override this? */
+.state--peek .lh-gauge__arc--metric.lh-gauge--miniarc {
+  transition: opacity 0.3s;
+}
+.state--peek {
+  color: unset;
+}
+.state--peek .metric__label {
+  display: none;
+}
+@keyframes peek {
+  /* biggest it should go is 0.92. smallest is 0.8 */
+   0% { transform: scale(0.8); opacity: 0.8; }
+   50% {  transform: scale(0.92); opacity: 1; }
+   100% { transform: scale(0.8); opacity: 0.8; }
+ }