diff --git a/tools/rum/elements/list-facet.js b/tools/rum/elements/list-facet.js
index b0a66c66..25a3c693 100644
--- a/tools/rum/elements/list-facet.js
+++ b/tools/rum/elements/list-facet.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-unresolved
import { utils, stats } from '@adobe/rum-distiller';
import {
escapeHTML, toHumanReadable,
@@ -131,6 +132,7 @@ export default class ListFacet extends HTMLElement {
const fieldSet = this.querySelector('fieldset') || document.createElement('fieldset');
fieldSet.classList.add(`facet-${facetName}`);
const legendText = this.querySelector('legend')?.textContent || facetName;
+ const extraElements = Array.from(this.querySelectorAll(':scope > a, legend > a.icon') || []);
fieldSet.textContent = '';
@@ -142,6 +144,8 @@ export default class ListFacet extends HTMLElement {
clipboard.title = 'Copy facet rows to clipboard';
legend.append(clipboard);
+ extraElements.forEach((el) => el.classList.add('icon'));
+ legend.append(...extraElements);
fieldSet.append(legend);
const filterKeys = facetName === 'checkpoint' && mode !== 'all';
diff --git a/tools/rum/explorer.html b/tools/rum/explorer.html
index 8c709c60..97f3e717 100644
--- a/tools/rum/explorer.html
+++ b/tools/rum/explorer.html
@@ -114,6 +114,8 @@
TTFB
+
- desktop
- All Desktop
@@ -147,9 +149,13 @@ TTFB
+
+
- enter
- Visit Entry
@@ -175,21 +181,33 @@ TTFB
+
+
+
+
+
+
- (direct)
- Direct Entry (or via App)
@@ -197,6 +215,8 @@ TTFB
+
diff --git a/tools/rum/rum-slicer.css b/tools/rum/rum-slicer.css
index d6483323..41615165 100644
--- a/tools/rum/rum-slicer.css
+++ b/tools/rum/rum-slicer.css
@@ -1,4 +1,4 @@
-@import url('colors.css');
+@import url("colors.css");
/* stylelint-disable no-descending-specificity */
/* stylelint-disable selector-class-pattern */
@@ -32,7 +32,6 @@
--gray-500: #8f8f8f;
--gray-600: #717171;
--gray-700: #505050;
-
}
body {
@@ -50,19 +49,45 @@ body main > .section {
padding-top: 0;
}
+a.icon.help {
+ overflow: visible;
+ font-size: 16px;
+ display: inline-block;
+ font-weight: 900;
+ text-decoration: none;
+ text-align: center;
+ bottom: auto;
+ line-height: 12px;
+ border: 2px solid;
+ border-radius: 2px;
+ box-sizing: border-box;
+ cursor: pointer;
+ transform: scale(1);
+ width: 18px;
+ height: 18px;
+ margin-top: 3px;
+}
+
+a.icon.help::after {
+ content: "?";
+}
+
/* general performance */
-main li.score-good, vitals-facet div[data-value^="good"] label {
+main li.score-good,
+vitals-facet div[data-value^="good"] label {
color: var(--dark-green);
background-color: var(--light-green);
}
-main li.score-ni, vitals-facet div[data-value^="ni"] label {
+main li.score-ni,
+vitals-facet div[data-value^="ni"] label {
color: var(--dark-orange);
background-color: var(--light-orange);
}
-main li.score-poor, vitals-facet div[data-value^="poor"] label {
+main li.score-poor,
+vitals-facet div[data-value^="poor"] label {
color: var(--dark-red);
background-color: var(--light-red);
}
@@ -154,7 +179,7 @@ main .key-metrics ul > * button {
}
main .key-metrics ul > * h2::before {
- content: ' ';
+ content: " ";
background-color: currentcolor;
width: 8px;
height: 8px;
@@ -175,19 +200,19 @@ main .key-metrics ul > * p span.extra {
}
main .key-metrics ul > * p span.extra::before {
- content: ' (';
+ content: " (";
}
main .key-metrics ul > #pageviews p span.extra::after {
- content: ' per visit)';
+ content: " per visit)";
}
main .key-metrics ul > #conversions p span.extra::after {
- content: '%)';
+ content: "%)";
}
main .key-metrics ul > #visits p span.extra::after {
- content: '% bounces)';
+ content: "% bounces)";
}
.key-metrics > ul > * {
@@ -214,8 +239,6 @@ figure {
margin-bottom: 16px;
}
-
-
figure .chart-container {
position: relative;
min-height: 100px;
@@ -236,7 +259,7 @@ figure .chart-container.sankey {
}
#timezone::before {
- content: 'Timezone: ';
+ content: "Timezone: ";
}
.danger-icon {
@@ -293,7 +316,7 @@ figcaption span.lab {
flex-grow: 1;
}
-#low-data-warning[aria-hidden=true] {
+#low-data-warning[aria-hidden="true"] {
display: none;
}
@@ -361,7 +384,7 @@ fieldset a:any-link {
color: currentcolor;
}
-list-facet[facet="userAgent" ] fieldset {
+list-facet[facet="userAgent"] fieldset {
color: var(--dark-fuchsia);
--background-color: var(--light-fuchsia);
@@ -373,7 +396,9 @@ list-facet[facet="url"] fieldset {
--background-color: var(--light-purple);
}
-*[facet] > legend, *[facet] > dl, #facets > [mode="hidden"] {
+*[facet] > legend,
+*[facet] > dl,
+#facets > [mode="hidden"] {
display: none;
}
@@ -415,7 +440,7 @@ fieldset li.significant {
fieldset li::after,
vitals-facet label::before {
- content: ' ';
+ content: " ";
background-color: currentcolor;
width: 10px;
height: 10px;
@@ -435,7 +460,7 @@ vitals-facet label::before {
#facets fieldset div {
display: grid;
- grid-template-areas: 'check lab' ' - cwv';
+ grid-template-areas: "check lab" " - cwv";
grid-template-columns: 20px 1fr;
align-items: center;
grid-gap: 0 16px;
@@ -444,11 +469,11 @@ vitals-facet label::before {
#facets fieldset div ~ div.more-container:last-of-type,
#facets .more fieldset div ~ div.more-container:last-of-type,
#facets .more-more fieldset div ~ div.more-container:last-of-type,
-#facets .more-more-more fieldset div ~ div.more-container:last-of-type {
+#facets .more-more-more fieldset div ~ div.more-container:last-of-type {
display: grid;
}
-#facets fieldset input[type=checkbox] {
+#facets fieldset input[type="checkbox"] {
grid-area: check;
height: 20px;
width: 20px;
@@ -473,23 +498,24 @@ vitals-facet label::before {
#facets fieldset label span.count::before,
#facets fieldset label span.value::before {
- content: ' (';
+ content: " (";
}
#facets literal-facet label span.value::before {
- content: '';
+ content: "";
}
-#facets fieldset label span.count::after, #facets fieldset label span.value::after {
- content: ') ';
+#facets fieldset label span.count::after,
+#facets fieldset label span.value::after {
+ content: ") ";
}
#facets fieldset label span.extra::after {
- content: '% conversion rate';
+ content: "% conversion rate";
}
#facets literal-facet label span.value::after {
- content: '';
+ content: "";
}
#facets literal-facet label span.value {
@@ -571,9 +597,9 @@ file-facet label span.count {
vitals-facet fieldset {
display: grid;
grid-template-areas:
- '. lcp-good cls-good inp-good'
- '. lcp-ni cls-ni inp-ni'
- '. lcp-poor cls-poor inp-poor';
+ ". lcp-good cls-good inp-good"
+ ". lcp-ni cls-ni inp-ni"
+ ". lcp-poor cls-poor inp-poor";
grid-template-columns: 0fr minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr);
gap: 4pt;
padding: 4pt;
@@ -584,7 +610,7 @@ vitals-facet fieldset label {
word-break: normal;
}
-#facets vitals-facet fieldset input[type=checkbox] {
+#facets vitals-facet fieldset input[type="checkbox"] {
width: 0;
height: 0;
}
@@ -595,7 +621,7 @@ vitals-facet fieldset label {
#facets vitals-facet fieldset div {
display: grid;
- grid-template-areas: 'check lab';
+ grid-template-areas: "check lab";
grid-template-columns: 0 1fr;
grid-gap: 0;
}
@@ -604,14 +630,14 @@ vitals-facet fieldset label {
text-align: start;
}
-#facets vitals-facet fieldset input[type=checkbox] + label::before {
+#facets vitals-facet fieldset input[type="checkbox"] + label::before {
border: 2px solid currentcolor;
background-color: transparent;
width: 8px;
height: 8px;
}
-#facets vitals-facet fieldset input[type=checkbox]:checked + label::before {
+#facets vitals-facet fieldset input[type="checkbox"]:checked + label::before {
border: 2px solid currentcolor;
background-color: currentcolor;
}
@@ -656,8 +682,8 @@ vitals-facet fieldset label {
grid-area: cwv;
}
-#facets div[aria-selected=true] {
- background-color: var(--light-blue)
+#facets div[aria-selected="true"] {
+ background-color: var(--light-blue);
}
#facets div[aria-selected]:hover {
@@ -669,15 +695,15 @@ vitals-facet fieldset label {
}
#facets link-facet a .protocol::after {
- content: '//';
+ content: "//";
}
-/* don't worry, we'll show this when there is enough space */
-#facets link-facet a .protocol {
+/* don't worry, we will show this when there is enough space */
+#facets link-facet a .protocol {
display: none;
}
-#facets link-facet a .hostname {
+#facets link-facet a .hostname {
display: none;
}
@@ -723,7 +749,8 @@ vitals-facet fieldset label {
padding-right: 50px;
}
-.clipboard, .icon {
+.clipboard,
+.icon {
margin-left: 8px;
box-sizing: border-box;
position: relative;
@@ -805,7 +832,7 @@ vitals-facet fieldset label {
margin-top: -20px;
}
-facet-sidebar[aria-disabled="true"] fieldset input[type=checkbox] {
+facet-sidebar[aria-disabled="true"] fieldset input[type="checkbox"] {
display: none;
}
@@ -849,7 +876,8 @@ facet-sidebar[aria-disabled="true"] div.quick-filter {
height: 32px;
}
- main .key-metrics ul > * h2, main .key-metrics ul > * button {
+ main .key-metrics ul > * h2,
+ main .key-metrics ul > * button {
font-size: 14px;
}
@@ -874,7 +902,7 @@ facet-sidebar[aria-disabled="true"] div.quick-filter {
}
#facets fieldset div {
- grid-template-areas: 'check lab cwv';
+ grid-template-areas: "check lab cwv";
grid-template-columns: 20px 1fr 350px;
}
@@ -892,9 +920,7 @@ facet-sidebar[aria-disabled="true"] div.quick-filter {
}
}
-
/* split mode */
-
@media (min-width: 1600px) {
#deepmain {
display: flex;
@@ -906,7 +932,8 @@ facet-sidebar[aria-disabled="true"] div.quick-filter {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
- #deepmain > div, #deepmain > facet-sidebar {
+ #deepmain > div,
+ #deepmain > facet-sidebar {
width: 50%;
}
@@ -930,8 +957,8 @@ facet-sidebar[aria-disabled="true"] div.quick-filter {
main .key-metrics ul {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
-}
-footer.footer-wrapper.appear {
- display: none;
+ footer.footer-wrapper.appear {
+ display: none;
+ }
}