Skip to content

Commit 2a8a8ba

Browse files
dermatzcode-factor
dermatz
and
code-factor
authored
feat: add MageForge Toolbar with basic audits (#167)
* feat: add MageForge Toolbar with basic audits * feat: add new audits for images without dimensions, lazy load, and inputs without labels * style: update SVG icons for various audits in MageForge Toolbar * feat: add toggle all functionality and enable inspector by default * feat: enhance image audits to exclude hidden elements * feat: add inspector button to toolbar and remove unused inspector code * feat: add credit section to toolbar menu with link to MageForge * feat: add toggle background colors and update font size in toolbar * fix: improve note formatting for disabled inspector message * fix: handle outside click event for toolbar menu closure * feat: enhance inspector functionality with event handlers and caching * refactor: remove inspector button creation from toolbar UI * feat: update audit run methods to accept active state parameter * feat: implement collapsible menu groups in toolbar UI * feat: update toolbar burger label to include 'MageForge' * [CodeFactor] Apply fixes to commit 55f4597 * feat: add option to show/hide button labels in toolbar settings * style: update description for images without alt attributes * fix: update color parsing to use a sentinel value for transparency check * fix: improve aria-labelledby check for inputs without labels * fix: ensure overlay re-renders for live DOM changes on resize/scroll * fix: re-initialize skipped mageforgeToolbar elements on Alpine init * refactor: remove toggle inspector event handler from MageForge Inspector * feat: persist collapsed groups state in localStorage * refactor: simplify inspector button attachment logic in toolbar * fix: handle potential errors when retrieving collapsed groups from localStorage * feat: add aria-pressed attribute for menu item accessibility * fix: correct opacity check for image visibility in audit * docs: add third-party library credits to README * fix: handle potential null value for aria-labelledby text content --------- Co-authored-by: codefactor-io <support@codefactor.io>
1 parent a1dba6a commit 2a8a8ba

23 files changed

Lines changed: 1917 additions & 82 deletions

‎LICENSE‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -685,3 +685,12 @@ may consider it more useful to permit linking proprietary applications with
685685
the library. If this is what you want to do, use the GNU Lesser General
686686
Public License instead of this License. But first, please read
687687
<https://www.gnu.org/licenses/why-not-lgpl.html>.
688+
689+
690+
-------------------------------------------------------------------------------
691+
Third-Party Notices
692+
-------------------------------------------------------------------------------
693+
694+
This project includes icons from Tabler Icons (https://tabler.io/icons).
695+
Copyright (c) 2020-2024 Paweł Kuna (codecalm)
696+
Licensed under the MIT License (https://github.com/tabler/tabler-icons/blob/main/LICENSE)

‎README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,14 @@ bin/magento mageforge:theme:inspector disable
145145
- **License**: [LICENSE](LICENSE)
146146
- **Changelog**: [CHANGELOG](CHANGELOG.md)
147147

148+
## Credits
149+
150+
MageForge uses the following third-party libraries:
151+
152+
| Library | Author | License |
153+
| ------- | ------ | ------- |
154+
| [Tabler Icons](https://tabler.io/icons) | codecalm | [MIT](https://github.com/tabler/tabler-icons/blob/main/LICENSE) |
155+
148156
---
149157

150158
Thank you for using MageForge!

‎src/Block/Inspector.php‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
class Inspector extends Template
1919
{
2020
private const XML_PATH_INSPECTOR_ENABLED = 'dev/mageforge_inspector/enabled';
21+
private const XML_PATH_SHOW_BUTTON_LABELS = 'mageforge/inspector/show_button_labels';
2122

2223
/**
2324
* @param Context $context
@@ -72,6 +73,16 @@ public function getCssUrl(): string
7273
return $this->getViewFileUrl('OpenForgeProject_MageForge::css/inspector.css');
7374
}
7475

76+
/**
77+
* Get Toolbar CSS file URL
78+
*
79+
* @return string
80+
*/
81+
public function getToolbarCssUrl(): string
82+
{
83+
return $this->getViewFileUrl('OpenForgeProject_MageForge::css/toolbar.css');
84+
}
85+
7586
/**
7687
* Get JS file URL
7788
*
@@ -82,6 +93,28 @@ public function getJsUrl(): string
8293
return $this->getViewFileUrl('OpenForgeProject_MageForge::js/inspector.js');
8394
}
8495

96+
/**
97+
* Get Toolbar JS file URL
98+
*
99+
* @return string
100+
*/
101+
public function getToolbarJsUrl(): string
102+
{
103+
return $this->getViewFileUrl('OpenForgeProject_MageForge::js/toolbar.js');
104+
}
105+
106+
/**
107+
* Whether button labels should be displayed in the toolbar
108+
*
109+
* @return bool
110+
*/
111+
public function getShowButtonLabels(): bool
112+
{
113+
$value = $this->scopeConfig->getValue(self::XML_PATH_SHOW_BUTTON_LABELS);
114+
// Default to true when not explicitly set to '0'
115+
return $value !== '0';
116+
}
117+
85118
/**
86119
* Get configured theme
87120
*

‎src/Console/Command/Dev/InspectorCommand.php‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,9 @@ private function showStatus(): int
175175
]);
176176
} elseif (!$isEnabled) {
177177
$this->io->newLine();
178-
$this->io->note('Run "bin/magento mageforge:theme:inspector enable" to activate the inspector.');
178+
$this->io->note(
179+
'Inspector is disabled. Run "bin/magento mageforge:theme:inspector enable" to activate it.'
180+
);
179181
} else {
180182
$this->io->newLine();
181183
$this->io->writeln('<info>✓</info> Inspector is active and ready to use!');

‎src/etc/adminhtml/system.xml‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,29 @@
55
<label>MageForge</label>
66
</tab>
77
<section id="mageforge_inspector" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
8-
<label>Inspector</label>
8+
<label>Toolbar</label>
99
<tab>mageforge</tab>
1010
<resource>OpenForgeProject_MageForge::config_inspector</resource>
1111
<group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
12-
<label>General Settings</label>
12+
<label>General Toolbar Settings</label>
1313
<field id="enabled" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
14-
<label>Enabled</label>
14+
<label>Show Toolbar</label>
1515
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
1616
<config_path>dev/mageforge_inspector/enabled</config_path>
17+
<comment>Enable or disable the MageForge Toolbar. Default: Yes.</comment>
1718
</field>
1819
<field id="theme" translate="label" type="select" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
1920
<label>Theme</label>
2021
<source_model>OpenForgeProject\MageForge\Model\Config\Source\InspectorTheme</source_model>
2122
<config_path>mageforge/inspector/theme</config_path>
2223
<comment>Choose between Dark, Light, or Auto (System Preference) theme.</comment>
2324
</field>
25+
<field id="show_button_labels" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
26+
<label>Show Button Labels</label>
27+
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
28+
<config_path>mageforge/inspector/show_button_labels</config_path>
29+
<comment>Show text labels on the Toolbar and Inspector buttons. Default: Yes.</comment>
30+
</field>
2431
</group>
2532
</section>
2633
</system>

‎src/etc/config.xml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@
44
<default>
55
<dev>
66
<mageforge_inspector>
7-
<enabled>0</enabled>
7+
<enabled>1</enabled>
88
</mageforge_inspector>
99
</dev>
1010
<mageforge>
1111
<inspector>
1212
<theme>dark</theme>
13+
<show_button_labels>1</show_button_labels>
1314
</inspector>
1415
</mageforge>
1516
</default>

‎src/view/frontend/templates/inspector.phtml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
*/
1313
?>
1414
<!-- MageForge Inspector Assets -->
15+
<link rel="stylesheet" type="text/css" href="<?= $escaper->escapeUrl($block->getToolbarCssUrl()) ?>" />
1516
<link rel="stylesheet" type="text/css" href="<?= $escaper->escapeUrl($block->getCssUrl()) ?>" />
1617

1718
<!-- Alpine.js Bootstrap (load only if not already present) -->
@@ -60,8 +61,15 @@ JS;
6061
?>
6162
<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $alpineBootstrap, false) ?>
6263

64+
<script type="module" src="<?= $escaper->escapeUrl($block->getToolbarJsUrl()) ?>"></script>
6365
<script type="module" src="<?= $escaper->escapeUrl($block->getJsUrl()) ?>"></script>
6466

67+
<!-- MageForge Toolbar Component -->
68+
<div class="mageforge-toolbar-root"
69+
x-data="mageforgeToolbar"
70+
data-theme="<?= $escaper->escapeHtmlAttr($block->getTheme()) ?>"
71+
data-show-labels="<?= $block->getShowButtonLabels() ? '1' : '0' ?>"></div>
72+
6573
<!-- MageForge Inspector Component Wrapper -->
6674
<div class="mageforge-inspector"
6775
x-data="mageforgeInspector"

‎src/view/frontend/web/css/audits/tab-order.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/**
2+
* MageForge Toolbar Audit – Tab Order
3+
*
4+
* Injected on-demand by the tab-order audit.
5+
* Relies on CSS custom properties defined in toolbar.css :root.
6+
*/
7+
8+
.mageforge-tab-order-overlay {
9+
position: fixed;
10+
top: 0;
11+
left: 0;
12+
width: 100%;
13+
height: 100%;
14+
pointer-events: none;
15+
z-index: 9999997;
16+
overflow: visible;
17+
}
18+
19+
.mageforge-tab-order-svg {
20+
position: absolute;
21+
top: 0;
22+
left: 0;
23+
width: 100%;
24+
height: 100%;
25+
overflow: visible;
26+
}
27+
28+
.mageforge-tab-order-line {
29+
stroke: var(--mageforge-color-blue);
30+
stroke-width: 1.5;
31+
stroke-opacity: 0.5;
32+
stroke-dasharray: 4 3;
33+
fill: none;
34+
}
35+
36+
.mageforge-tab-order-line--negative {
37+
stroke: var(--mageforge-color-red);
38+
}
39+
40+
.mageforge-tab-order-badge {
41+
position: absolute;
42+
width: 20px;
43+
height: 20px;
44+
border-radius: 50%;
45+
background: var(--mageforge-color-blue);
46+
color: var(--mageforge-color-white);
47+
font-family: var(--mageforge-font-family);
48+
font-size: 10px;
49+
font-weight: 700;
50+
line-height: 1;
51+
display: flex;
52+
align-items: center;
53+
justify-content: center;
54+
transform: translate(-50%, -50%);
55+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
56+
}
57+
58+
.mageforge-tab-order-badge--negative {
59+
background: var(--mageforge-color-red);
60+
}

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

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -77,30 +77,25 @@
7777
}
7878

7979
/* ============================================================================
80-
Floating Button
80+
Inspector Float Button
8181
========================================================================== */
8282

8383
.mageforge-inspector-float-button {
84-
position: fixed;
85-
bottom: 20px;
86-
left: 20px;
8784
height: 36px;
8885
padding: 0 14px;
8986
background: linear-gradient(135deg, var(--mageforge-color-blue) 0%, var(--mageforge-color-blue-dark) 100%);
9087
color: white;
9188
border: none;
92-
border-radius: 10px;
89+
border-radius: 5px;
9390
cursor: pointer;
94-
z-index: 9999998;
9591
display: flex;
9692
align-items: center;
9793
gap: 8px;
9894
font-family: var(--mageforge-font-family);
99-
font-size: 14px;
95+
font-size: 0.75rem;
10096
font-weight: 600;
10197
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
10298
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
103-
pointer-events: auto;
10499
backdrop-filter: blur(8px);
105100
letter-spacing: 0.025em;
106101
}
@@ -114,7 +109,6 @@
114109
transform: translateY(0);
115110
}
116111

117-
/* Active state (inspector open) */
118112
.mageforge-inspector-float-button.mageforge-active {
119113
background: linear-gradient(135deg, var(--mageforge-color-green) 0%, var(--mageforge-color-green-dark) 100%);
120114
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 8px 20px rgba(16, 185, 129, 0.5);
@@ -292,14 +286,6 @@
292286
max-width: calc(100vw - 40px);
293287
font-size: 10px;
294288
}
295-
296-
.mageforge-inspector-float-button {
297-
bottom: 10px;
298-
left: 10px;
299-
font-size: 11px;
300-
height: 32px;
301-
padding: 0 12px;
302-
}
303289
}
304290

305291
@media (max-width: 480px) {

0 commit comments

Comments
 (0)