-
Notifications
You must be signed in to change notification settings - Fork 9.4k

Description
This issue is automatically created based on existing pull request: #28400: Load color picker dependencies only when it is actually used
Preconditions (*)
This is just another performance PR, which focuses on loading only the needed dependencies. This time I am optimizing color picker component and its spectrum
and tinycolor
dependencies.
Loading mentioned modules dynamically saves us 2 JavaScript requests and 123,6kB (28,3kB gzipped) from downloading and parsing.
This change is covered by unit tests that had to be adjusted to take asynchronous dependencies loading into account.
Steps to reproduce (*)
- Verify that
spectrum.js
andtinycolor.js
are no longer loaded by default. - Verify that above modules are loaded and color picker works as expected when used (see comment above to find out how to add it).
Actual Result: ✖️ spectrum.js
and tinycolor.js
are loaded by default
Expected Result: ✔️ spectrum.js
and tinycolor.js
should no loaded by default.
Questions or comments
While making sure this change doesn't break anything I found out that colorPicker
binding is not used anywhere in Magento. The easiest way to get it is to for example add it to app/code/Magento/Catalog/view/adminhtml/ui_component/category_form.xml
:
<field name="color_picker_test">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/color-picker</item>
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/color-picker</item>
<item name="label" xsi:type="string">Background Color (hex)</item>
<item name="labelVisible" xsi:type="boolean">true</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">category_form</item>
</item>
</argument>
</field>
and test it in category edit form.
Contribution checklist (*)
- Pull request has a meaningful description of its purpose
- All commits are accompanied by meaningful commit messages
- All new or changed code is covered with unit/integration tests (if applicable)
- All automated tests passed successfully (all builds are green)