Skip to content

Commit 11d3c45

Browse files
dermatzcode-factor
dermatz
and
code-factor
authored
fix: remove metric icons and rename metric titles for better ux (#129)
* fix: remove emojis from section titles in inspector for better ux * style: update tab button background and add transition effects * fix: rename render time to PHP render time and add description * [CodeFactor] Apply fixes --------- Co-authored-by: codefactor-io <support@codefactor.io>
1 parent eea755d commit 11d3c45

2 files changed

Lines changed: 56 additions & 47 deletions

File tree

‎src/view/frontend/web/css/inspector.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -425,26 +425,26 @@
425425

426426
.mageforge-tab-button {
427427
padding: 8px 12px;
428-
background: transparent;
428+
background: color-mix(in srgb, var(--mageforge-color-slate-400) 10%, transparent);
429429
color: var(--mageforge-color-slate-400);
430430
border: none;
431431
border-bottom: 2px solid transparent;
432432
cursor: pointer;
433433
font-size: 11px;
434434
font-weight: 600;
435435
letter-spacing: 0.025em;
436-
transition: all 0.2s ease;
437436
border-radius: 6px 6px 0 0;
438437
font-family: inherit;
439438
white-space: nowrap;
440439
position: relative; /* For badge positioning */
441440
display: flex;
442441
align-items: center;
443442
gap: 6px;
443+
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
444444
}
445445

446446
.mageforge-tab-button:hover {
447-
background: rgba(255, 255, 255, 0.05);
447+
background: color-mix(in srgb, var(--mageforge-color-slate-400) 20%, transparent);
448448
color: var(--mageforge-color-slate-300);
449449
}
450450

‎src/view/frontend/web/js/inspector.js‎

Lines changed: 53 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -868,24 +868,24 @@ document.addEventListener('alpine:init', () => {
868868
*/
869869
renderStructureSections(data, container) {
870870
// Template section
871-
container.appendChild(this.createInfoSection('📄 Template', data.template, '#60a5fa'));
871+
container.appendChild(this.createInfoSection('Template', data.template, '#60a5fa'));
872872

873873
// Block section
874-
container.appendChild(this.createInfoSection('📦 Block', data.blockClass, '#a78bfa'));
874+
container.appendChild(this.createInfoSection('Block', data.blockClass, '#a78bfa'));
875875

876876
// Optional sections
877877
if (data.blockAlias) {
878-
container.appendChild(this.createInfoSection('🏷️ Block Name', data.blockAlias, '#34d399'));
878+
container.appendChild(this.createInfoSection('Block Name', data.blockAlias, '#34d399'));
879879
}
880880
if (data.parentBlock) {
881-
container.appendChild(this.createInfoSection('⬆️ Parent Block', data.parentBlock, '#fb923c'));
881+
container.appendChild(this.createInfoSection('Parent Block', data.parentBlock, '#fb923c'));
882882
}
883883
if (data.viewModel) {
884-
container.appendChild(this.createInfoSection('⚡ ViewModel', data.viewModel, '#22d3ee'));
884+
container.appendChild(this.createInfoSection('ViewModel', data.viewModel, '#22d3ee'));
885885
}
886886

887887
// Module section
888-
container.appendChild(this.createInfoSection('📍 Module', data.module, '#fbbf24'));
888+
container.appendChild(this.createInfoSection('Module', data.module, '#fbbf24'));
889889
},
890890

891891
/**
@@ -897,60 +897,60 @@ document.addEventListener('alpine:init', () => {
897897
const a11yData = this.analyzeAccessibility(element);
898898

899899
// Semantic Element
900-
container.appendChild(this.createInfoSection('🏷️ Element Type', a11yData.tagName, '#60a5fa'));
900+
container.appendChild(this.createInfoSection('Element Type', a11yData.tagName, '#60a5fa'));
901901

902902
// ARIA Role
903903
if (a11yData.role) {
904-
container.appendChild(this.createInfoSection('👤 ARIA Role', a11yData.role, '#a78bfa'));
904+
container.appendChild(this.createInfoSection('ARIA Role', a11yData.role, '#a78bfa'));
905905
}
906906

907907
// Accessible Name
908908
if (a11yData.accessibleName) {
909-
container.appendChild(this.createInfoSection('🗣️ Accessible Name', a11yData.accessibleName, '#34d399'));
909+
container.appendChild(this.createInfoSection('Accessible Name', a11yData.accessibleName, '#34d399'));
910910
}
911911

912912
// ARIA Label
913913
if (a11yData.ariaLabel) {
914-
container.appendChild(this.createInfoSection('🏷️ ARIA Label', a11yData.ariaLabel, '#22d3ee'));
914+
container.appendChild(this.createInfoSection('ARIA Label', a11yData.ariaLabel, '#22d3ee'));
915915
}
916916

917917
// ARIA Described By
918918
if (a11yData.ariaDescribedBy) {
919-
container.appendChild(this.createInfoSection('📝 ARIA Described By', a11yData.ariaDescribedBy, '#fbbf24'));
919+
container.appendChild(this.createInfoSection('ARIA Described By', a11yData.ariaDescribedBy, '#fbbf24'));
920920
}
921921

922922
// Alt Text (for images)
923923
if (a11yData.altText !== null) {
924924
const altStatus = a11yData.altText ? a11yData.altText : '⚠️ Missing';
925925
const altColor = a11yData.altText ? '#34d399' : '#ef4444';
926-
container.appendChild(this.createInfoSection('🖼️ Alt Text', altStatus, altColor));
926+
container.appendChild(this.createInfoSection('Alt Text', altStatus, altColor));
927927
}
928928

929929
// Lazy Loading (for images)
930930
if (a11yData.lazyLoading !== null) {
931931
const { lazyIcon, lazyColor } = this.getLazyLoadingStyle(a11yData.lazyLoading);
932-
container.appendChild(this.createInfoSection(`${lazyIcon} Lazy Loading`, a11yData.lazyLoading, lazyColor));
932+
container.appendChild(this.createInfoSection('Lazy Loading', a11yData.lazyLoading, lazyColor));
933933
}
934934

935935
// Tabindex
936936
if (a11yData.tabindex !== null) {
937-
container.appendChild(this.createInfoSection('⌨️ Tab Index', a11yData.tabindex.toString(), '#fb923c'));
937+
container.appendChild(this.createInfoSection('Tab Index', a11yData.tabindex.toString(), '#fb923c'));
938938
}
939939

940940
// Focusable State
941941
const focusableText = a11yData.isFocusable ? '✅ Yes' : '❌ No';
942942
const focusableColor = a11yData.isFocusable ? '#34d399' : '#94a3b8';
943-
container.appendChild(this.createInfoSection('🎯 Focusable', focusableText, focusableColor));
943+
container.appendChild(this.createInfoSection('Focusable', focusableText, focusableColor));
944944

945945
// ARIA Hidden
946946
if (a11yData.ariaHidden) {
947-
container.appendChild(this.createInfoSection('👻 ARIA Hidden', a11yData.ariaHidden, '#ef4444'));
947+
container.appendChild(this.createInfoSection('ARIA Hidden', a11yData.ariaHidden, '#ef4444'));
948948
}
949949

950950
// Interactive Element
951951
const interactiveText = a11yData.isInteractive ? '✅ Yes' : '❌ No';
952952
const interactiveColor = a11yData.isInteractive ? '#34d399' : '#94a3b8';
953-
container.appendChild(this.createInfoSection('🖱️ Interactive', interactiveText, interactiveColor));
953+
container.appendChild(this.createInfoSection('Interactive', interactiveText, interactiveColor));
954954
},
955955

956956
/**
@@ -1008,7 +1008,16 @@ document.addEventListener('alpine:init', () => {
10081008
const renderTime = parseFloat(blockData.performance.renderTime);
10091009
const color = this.getRenderTimeColor(renderTime);
10101010
const formattedTime = `${blockData.performance.renderTime} ms`;
1011-
container.appendChild(this.createInfoSection('⏱️ Render Time', formattedTime, color));
1011+
container.appendChild(this.createInfoSection('PHP Render Time', formattedTime, color));
1012+
1013+
const desc = document.createElement('div');
1014+
desc.style.fontSize = '10px';
1015+
desc.style.color = '#94a3b8';
1016+
desc.style.marginTop = '-8px';
1017+
desc.style.marginBottom = '12px';
1018+
desc.textContent = 'Server-side processing time for this block';
1019+
container.appendChild(desc);
1020+
10121021
return true;
10131022
}
10141023
return false;
@@ -1021,10 +1030,10 @@ document.addEventListener('alpine:init', () => {
10211030
const lcpValue = this.webVitals.lcp.value.toFixed(0);
10221031
const lcpColor = lcpValue < 2500 ? '#34d399' : (lcpValue < 4000 ? '#f59e0b' : '#ef4444');
10231032
container.appendChild(
1024-
this.createInfoSection('🎯 LCP (Largest Contentful Paint)', `${lcpValue} ms`, lcpColor)
1033+
this.createInfoSection('LCP (Largest Contentful Paint)', `${lcpValue} ms`, lcpColor)
10251034
);
10261035
container.appendChild(
1027-
this.createInfoSection('⚡ LCP Element', '✅ This element is critical for LCP!', '#ef4444')
1036+
this.createInfoSection('LCP Element', '✅ This element is critical for LCP!', '#ef4444')
10281037
);
10291038
return true;
10301039
}
@@ -1037,12 +1046,12 @@ document.addEventListener('alpine:init', () => {
10371046
if (elementCLS > 0) {
10381047
const clsColor = elementCLS < 0.1 ? '#34d399' : (elementCLS < 0.25 ? '#f59e0b' : '#ef4444');
10391048
container.appendChild(
1040-
this.createInfoSection('📐 CLS (Layout Shift)', elementCLS.toFixed(3), clsColor)
1049+
this.createInfoSection('CLS (Layout Shift)', elementCLS.toFixed(3), clsColor)
10411050
);
10421051
const stabilityScore = Math.max(0, (1 - elementCLS * 4)).toFixed(2);
10431052
const stabilityColor = stabilityScore > 0.75 ? '#34d399' : (stabilityScore > 0.5 ? '#f59e0b' : '#ef4444');
10441053
container.appendChild(
1045-
this.createInfoSection('⚖️ Layout Stability Score', stabilityScore, stabilityColor)
1054+
this.createInfoSection('Layout Stability Score', stabilityScore, stabilityColor)
10461055
);
10471056
return true;
10481057
}
@@ -1055,7 +1064,7 @@ document.addEventListener('alpine:init', () => {
10551064
const inpValue = this.webVitals.inp.duration.toFixed(0);
10561065
const inpColor = inpValue < 200 ? '#34d399' : (inpValue < 500 ? '#f59e0b' : '#ef4444');
10571066
container.appendChild(
1058-
this.createInfoSection('⌨️ INP (Interaction)', `${inpValue} ms`, inpColor)
1067+
this.createInfoSection('INP (Interaction)', `${inpValue} ms`, inpColor)
10591068
);
10601069
return true;
10611070
}
@@ -1068,7 +1077,7 @@ document.addEventListener('alpine:init', () => {
10681077
const timingValue = (elementTiming.renderTime || elementTiming.loadTime).toFixed(0);
10691078
const timingColor = timingValue < 2500 ? '#34d399' : (timingValue < 4000 ? '#f59e0b' : '#ef4444');
10701079
container.appendChild(
1071-
this.createInfoSection('⏰ Element Timing', `${timingValue} ms (${elementTiming.identifier})`, timingColor)
1080+
this.createInfoSection('Element Timing', `${timingValue} ms (${elementTiming.identifier})`, timingColor)
10721081
);
10731082
return true;
10741083
}
@@ -1083,7 +1092,7 @@ document.addEventListener('alpine:init', () => {
10831092
: 0;
10841093
const modernColor = modernScore > 75 ? '#34d399' : (modernScore > 25 ? '#f59e0b' : '#ef4444');
10851094
container.appendChild(
1086-
this.createInfoSection('🖼️ Modern Image Formats', `${modernScore}% (${imageAnalysis.modernFormats}/${imageAnalysis.totalImages})`, modernColor)
1095+
this.createInfoSection('Modern Image Formats', `${modernScore}% (${imageAnalysis.modernFormats}/${imageAnalysis.totalImages})`, modernColor)
10871096
);
10881097

10891098
const responsiveScore = imageAnalysis.totalImages > 0
@@ -1092,20 +1101,20 @@ document.addEventListener('alpine:init', () => {
10921101
const responsiveColor = responsiveScore > 75 ? '#34d399' : (responsiveScore > 25 ? '#f59e0b' : '#ef4444');
10931102
const responsiveText = `${imageAnalysis.hasResponsive} of ${imageAnalysis.totalImages} ${imageAnalysis.totalImages === 1 ? 'image uses' : 'images use'} srcset`;
10941103
container.appendChild(
1095-
this.createInfoSection('📱 Adaptive Images (srcset)', responsiveText, responsiveColor)
1104+
this.createInfoSection('Adaptive Images (srcset)', responsiveText, responsiveColor)
10961105
);
10971106

10981107
if (imageAnalysis.oversized > 0) {
10991108
container.appendChild(
1100-
this.createInfoSection('⚠️ Oversized Images', `${imageAnalysis.oversized} oversized`, '#ef4444')
1109+
this.createInfoSection('Oversized Images', `${imageAnalysis.oversized} oversized`, '#ef4444')
11011110
);
11021111
}
11031112

11041113
if (imageAnalysis.issues.length > 0) {
11051114
const issuesText = imageAnalysis.issues.slice(0, 3).join(' • ');
11061115
const moreText = imageAnalysis.issues.length > 3 ? ` (+${imageAnalysis.issues.length - 3} more)` : '';
11071116
container.appendChild(
1108-
this.createInfoSection('💡 Optimization Tips', issuesText + moreText, '#f59e0b')
1117+
this.createInfoSection('Optimization Tips', issuesText + moreText, '#f59e0b')
11091118
);
11101119
}
11111120
return true;
@@ -1261,7 +1270,7 @@ document.addEventListener('alpine:init', () => {
12611270
const resourceLabel = this.determineResourceLabel(resourceData);
12621271

12631272
container.appendChild(
1264-
this.createInfoSection('📦 Element Resources', `${resourceData.count} ${resourceLabel} (${sizeText})`, '#60a5fa')
1273+
this.createInfoSection('Element Resources', `${resourceData.count} ${resourceLabel} (${sizeText})`, '#60a5fa')
12651274
);
12661275

12671276
this.renderResourceBreakdown(container, resourceData);
@@ -1318,7 +1327,7 @@ document.addEventListener('alpine:init', () => {
13181327
.join(', ');
13191328

13201329
container.appendChild(
1321-
this.createInfoSection('📑 Resource Types', typesText, '#a78bfa')
1330+
this.createInfoSection('Resource Types', typesText, '#a78bfa')
13221331
);
13231332
}
13241333
},
@@ -1372,7 +1381,7 @@ document.addEventListener('alpine:init', () => {
13721381
const color = this.getRenderTimeColor(renderTime);
13731382
const formattedTime = `${performanceData.renderTime} ms`;
13741383

1375-
container.appendChild(this.createInfoSection('⏱️ Render Time', formattedTime, color));
1384+
container.appendChild(this.createInfoSection('PHP Render Time', formattedTime, color));
13761385
},
13771386

13781387
/**
@@ -1397,26 +1406,26 @@ document.addEventListener('alpine:init', () => {
13971406
// Block-level cacheable status
13981407
const cacheableText = cacheData.cacheable ? '✅ Yes' : '❌ No';
13991408
const cacheableColor = cacheData.cacheable ? '#34d399' : '#94a3b8';
1400-
const cacheableLabel = cacheData.pageCacheable === false ? '💾 Block Cacheable (ignored)' : '💾 Block Cacheable';
1409+
const cacheableLabel = cacheData.pageCacheable === false ? 'Block Cacheable (ignored)' : 'Block Cacheable';
14011410
container.appendChild(this.createInfoSection(cacheableLabel, cacheableText, cacheableColor));
14021411

14031412
// Cache lifetime (show for all cacheable blocks)
14041413
if (cacheData.cacheable) {
14051414
const lifetimeText = (cacheData.lifetime === null || cacheData.lifetime === 0)
14061415
? 'Unlimited'
14071416
: `${cacheData.lifetime}s`;
1408-
container.appendChild(this.createInfoSection('⏳ Cache Lifetime', lifetimeText, '#60a5fa'));
1417+
container.appendChild(this.createInfoSection('Cache Lifetime', lifetimeText, '#60a5fa'));
14091418
}
14101419

14111420
// Cache key
14121421
if (cacheData.key && cacheData.key !== '') {
1413-
container.appendChild(this.createInfoSection('🔑 Cache Key', cacheData.key, '#a78bfa'));
1422+
container.appendChild(this.createInfoSection('Cache Key', cacheData.key, '#a78bfa'));
14141423
}
14151424

14161425
// Cache tags
14171426
if (cacheData.tags && cacheData.tags.length > 0) {
14181427
const tagsText = cacheData.tags.join(', ');
1419-
container.appendChild(this.createInfoSection('🏷️ Cache Tags', tagsText, '#22d3ee'));
1428+
container.appendChild(this.createInfoSection('Cache Tags', tagsText, '#22d3ee'));
14201429
}
14211430
},
14221431

@@ -1429,26 +1438,26 @@ document.addEventListener('alpine:init', () => {
14291438

14301439
// Child count
14311440
container.appendChild(
1432-
this.createInfoSection('📊 Child Nodes', complexity.childCount.toString(), '#60a5fa')
1441+
this.createInfoSection('Child Nodes', complexity.childCount.toString(), '#60a5fa')
14331442
);
14341443

14351444
// Tree depth
14361445
const depthColor = complexity.depth > this.PERF_DOM_DEPTH_WARNING ? '#f59e0b' : '#34d399';
14371446
container.appendChild(
1438-
this.createInfoSection('🌳 Tree Depth', complexity.depth.toString(), depthColor)
1447+
this.createInfoSection('Tree Depth', complexity.depth.toString(), depthColor)
14391448
);
14401449

14411450
// Total nodes
14421451
const totalColor = rating === 'high' ? '#ef4444' : (rating === 'medium' ? '#f59e0b' : '#34d399');
14431452
container.appendChild(
1444-
this.createInfoSection('🔢 Total Nodes', complexity.totalNodes.toString(), totalColor)
1453+
this.createInfoSection('Total Nodes', complexity.totalNodes.toString(), totalColor)
14451454
);
14461455

14471456
// Complexity rating
14481457
const ratingEmoji = rating === 'low' ? '✅' : (rating === 'medium' ? '⚠️' : '❌');
14491458
const ratingText = `${ratingEmoji} ${rating.toUpperCase()}`;
14501459
container.appendChild(
1451-
this.createInfoSection('📈 Complexity', ratingText, totalColor)
1460+
this.createInfoSection('Complexity', ratingText, totalColor)
14521461
);
14531462
},
14541463

@@ -1460,19 +1469,19 @@ document.addEventListener('alpine:init', () => {
14601469

14611470
if (vitalsInfo.isLCP) {
14621471
container.appendChild(
1463-
this.createInfoSection('🎯 LCP Element', '✅ Yes - Performance Critical!', '#ef4444')
1472+
this.createInfoSection('LCP Element', '✅ Yes - Performance Critical!', '#ef4444')
14641473
);
14651474
}
14661475

14671476
if (vitalsInfo.contributesCLS && vitalsInfo.contributesCLS > 0) {
14681477
container.appendChild(
1469-
this.createInfoSection('📐 CLS Impact', `${vitalsInfo.contributesCLS.toFixed(3)}`, '#f59e0b')
1478+
this.createInfoSection('CLS Impact', `${vitalsInfo.contributesCLS.toFixed(3)}`, '#f59e0b')
14701479
);
14711480
}
14721481

14731482
if (!vitalsInfo.isLCP && !vitalsInfo.contributesCLS) {
14741483
container.appendChild(
1475-
this.createInfoSection('✨ Web Vitals', 'Not Critical', '#94a3b8')
1484+
this.createInfoSection('Web Vitals', 'Not Critical', '#94a3b8')
14761485
);
14771486
}
14781487
},
@@ -1486,11 +1495,11 @@ document.addEventListener('alpine:init', () => {
14861495
}
14871496

14881497
container.appendChild(
1489-
this.createInfoSection('📄 DOMContentLoaded', `${this.pageTimings.domContentLoaded} ms`, '#60a5fa')
1498+
this.createInfoSection('DOMContentLoaded', `${this.pageTimings.domContentLoaded} ms`, '#60a5fa')
14901499
);
14911500

14921501
container.appendChild(
1493-
this.createInfoSection('🌐 Page Load', `${this.pageTimings.loadComplete} ms`, '#a78bfa')
1502+
this.createInfoSection('Page Load', `${this.pageTimings.loadComplete} ms`, '#a78bfa')
14941503
);
14951504
},
14961505

0 commit comments

Comments
 (0)