[SITES-41320] improve imagev2 performance (#3024)

* [SITES-41320] improve imagev2 perfromance

* [SITES-41279] improve imagev3 perfromance

* [SITES-41279] image v3 perfromance improvment

* [SITES-41279] image v3 perfromance improvment

* [SITES-41279] image v3 perfromance improvment

* [SITES-41279] image v3 perfromance improvment

* [SITES-41279] image v3 perfromance improvment

* [SITES-41279] image v3 perfromance improvment

* [SITES-41320] image v2 perfromance improve

* [SITES-41320] image v2 perfromance improve

* [SITES-41320] image v2 perfromance improve

* [SITES-41320] image v2 perfromance improve

* [SITES-41320] image v2 perfromance improve

* [SITES-41320] image v2 perfromance improve

---------

Co-authored-by: Yahor Chaptsou <yahorchaptsou@Yahors-MacBook-Pro.local>
Co-authored-by: Yahor Chaptsou <yahorchaptsou@Yahors-MBP.home>

Author: 3 people

content/karma.conf.js

@@ -43,6 +43,7 @@ module.exports = function(config) {
             },
             'src/content/jcr_root/apps/core/wcm/components/commons/editor/clientlibs/htmlidvalidator/js/*.js',
             'src/content/jcr_root/apps/core/wcm/components/commons/editor/clientlibs/authoringutils/js/*.js',
+            'src/content/jcr_root/apps/core/wcm/components/image/v2/image/clientlibs/editor/js/image.js',
             'src/content/jcr_root/apps/core/wcm/components/image/v3/image/clientlibs/editor/js/image.js',
             'test/**/*Test.js',
             'test/**/*Test.html'

content/src/content/jcr_root/apps/core/wcm/components/image/v2/image/clientlibs/editor/.content.xml

@@ -2,4 +2,4 @@
 <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
     jcr:primaryType="cq:ClientLibraryFolder"
     categories="[core.wcm.components.image.v2.editor]"
-    dependencies="[jquery,core.wcm.components.commons.v1.editor.checkboxTextfieldTuple]"/>
+    dependencies="[jquery,core.wcm.components.commons.v1.editor.checkboxTextfieldTuple,core.wcm.components.commons.editor.authoringutils]"/>

content/src/content/jcr_root/apps/core/wcm/components/image/v2/image/clientlibs/editor/js/image.js

@@ -43,6 +43,73 @@
     var smartCropRenditionFromJcr;
     var smartCropRenditionsDropDown;
 
+    var CT_SITES_41320 = "CT_SITES-41320";
+    /*
+     * Granite feature toggle CT_SITES_41320 gates Coral label preparation and Dynamic Media request URL checks
+     * in the Image v2 author dialog. When Granite or the toggle API is missing, helpers behave as enabled; set the
+     * toggle to false only to restore the previous Image v2 dialog behaviour.
+     */
+
+    /**
+     * Whether Coral smart-crop labels and Dynamic Media URL handling use commons authoring helpers.
+     * When Granite reports CT_SITES_41320 as disabled, the dialog matches earlier Image v2 behaviour.
+     *
+     * @returns {Boolean} true when helpers apply, false when the toggle explicitly disables them
+     */
+    function isImageV2AuthoringMarkupHelpersEnabled() {
+        if (!Granite || !Granite.Toggles || typeof Granite.Toggles.isEnabled !== "function") {
+            return true;
+        }
+        return Granite.Toggles.isEnabled(CT_SITES_41320) !== false;
+    }
+
+    function getImageAuthoringUtils() {
+        return window.CQ && window.CQ.CoreComponents && window.CQ.CoreComponents.AuthoringEditorUtils && window.CQ.CoreComponents.AuthoringEditorUtils.image;
+    }
+
+    /**
+     * Label HTML for smart crop dropdown items; with CT_SITES_41320, values are prepared for Coral innerHTML rendering.
+     *
+     * @param {*} value smart crop label or related value
+     * @returns {String} label text or HTML-safe markup suitable for Coral rendering when CT_SITES_41320 applies
+     */
+    function formatSmartCropOptionLabel(value) {
+        if (isImageV2AuthoringMarkupHelpersEnabled()) {
+            var utils = getImageAuthoringUtils();
+            if (!utils) {
+                return String(value == null ? "" : value);
+            }
+            if (typeof utils.formatPlainTextForMarkup !== "function") {
+                return String(value == null ? "" : value);
+            }
+            return utils.formatPlainTextForMarkup(value);
+        }
+        if (value === undefined || value === null) {
+            return "";
+        }
+        return String(value);
+    }
+
+    /**
+     * Whether dam:scene7File can drive image service requests; with CT_SITES_41320, repository path rules from commons apply.
+     *
+     * @param {*} path dam:scene7File or equivalent metadata path
+     * @returns {Boolean} whether the path is allowed for scene7-style requests when CT_SITES_41320 applies
+     */
+    function isDamScene7FileEligible(path) {
+        if (isImageV2AuthoringMarkupHelpersEnabled()) {
+            var utils = getImageAuthoringUtils();
+            if (!utils) {
+                return true;
+            }
+            if (typeof utils.isDamScene7PathEligible !== "function") {
+                return true;
+            }
+            return utils.isDamScene7PathEligible(path);
+        }
+        return true;
+    }
+
     $(document).on("dialog-loaded", function(e) {
         var $dialog        = e.dialog;
         var $dialogContent = $dialog.find(dialogContentSelector);
@@ -220,7 +287,12 @@
                     $dynamicMediaGroup.hide();
                 } else {
                     $dynamicMediaGroup.show();
-                    getSmartCropRenditions(data["dam:scene7File"]);
+                    if (isDamScene7FileEligible(data["dam:scene7File"])) {
+                        getSmartCropRenditions(data["dam:scene7File"]);
+                    } else {
+                        $dynamicMediaGroup.find(presetTypeSelector).parent().hide();
+                        selectPresetType($(presetTypeSelector), "imagePreset");
+                    }
                 }
             }
         });
@@ -247,11 +319,23 @@
      * @param {String} imageUrl The link to image asset
      */
     function getSmartCropRenditions(imageUrl) {
+        if (!isDamScene7FileEligible(imageUrl)) {
+            return;
+        }
         if (imagePropertiesRequest) {
             imagePropertiesRequest.abort();
         }
         imagePropertiesRequest = new XMLHttpRequest();
         var url = window.location.origin + "/is/image/" + imageUrl + "?req=set,json";
+        if (isImageV2AuthoringMarkupHelpersEnabled()) {
+            try {
+                if (new URL(url).origin !== window.location.origin) {
+                    return;
+                }
+            } catch (err) {
+                return;
+            }
+        }
         imagePropertiesRequest.open("GET", url, true);
         imagePropertiesRequest.onload = function() {
             if (imagePropertiesRequest.status >= 200 && imagePropertiesRequest.status < 400) {
@@ -278,12 +362,14 @@
                     // "AUTO" would trigger automatic smart crop operation; also we need to check "AUTO" was chosed in previous session
                     addSmartCropDropDownItem("Auto", "SmartCrop:Auto", (smartCropRenditionFromJcr === "SmartCrop:Auto"));
                     for (var i = 0; i < payload.set.relation.length; i++) {
+                        var userdata = payload.set.relation[i].userdata || {};
+                        var smartCropDef = userdata.SmartCropDef;
                         smartCropRenditionsDropDown.items.add({
                             content: {
-                                innerHTML: payload.set.relation[i].userdata.SmartCropDef
+                                innerHTML: formatSmartCropOptionLabel(smartCropDef)
                             },
                             disabled: false,
-                            selected: (smartCropRenditionFromJcr === payload.set.relation[i].userdata.SmartCropDef)
+                            selected: (smartCropRenditionFromJcr === smartCropDef)
                         });
                     }
                     $dynamicMediaGroup.find(presetTypeSelector).parent().show();
@@ -308,7 +394,7 @@
     function addSmartCropDropDownItem(label, value, selected) {
         smartCropRenditionsDropDown.items.add({
             content: {
-                innerHTML: label,
+                innerHTML: formatSmartCropOptionLabel(label),
                 value: value
             },
             disabled: false,
@@ -441,4 +527,14 @@
         }
     }
 
+    var imageV2EditorTestApiHost = typeof globalThis === "undefined" ? window : globalThis;
+
+    /* Karma (mocks.js) sets globalThis.__IMAGE_V2_EDITOR_TEST_API; AEM runtime leaves it undefined. */
+    if (imageV2EditorTestApiHost.__IMAGE_V2_EDITOR_TEST_API) {
+        imageV2EditorTestApiHost.__IMAGE_V2_EDITOR_TEST_API.formatSmartCropOptionLabel = formatSmartCropOptionLabel;
+        imageV2EditorTestApiHost.__IMAGE_V2_EDITOR_TEST_API.isDamScene7FileEligible = isDamScene7FileEligible;
+        imageV2EditorTestApiHost.__IMAGE_V2_EDITOR_TEST_API.isImageV2AuthoringMarkupHelpersEnabled = isImageV2AuthoringMarkupHelpersEnabled;
+        imageV2EditorTestApiHost.__IMAGE_V2_EDITOR_TEST_API.getImageAuthoringUtils = getImageAuthoringUtils;
+    }
+
 })(jQuery, Granite);

content/src/content/jcr_root/apps/core/wcm/components/image/v3/image/clientlibs/editor/js/image.js

@@ -66,9 +66,9 @@
     var remoteFileReference;
     var dataSeededValueAttr = "data-seeded-value";
 
-    var FT_SITES_41279 = "FT_SITES-41279";
+    var CT_SITES_41279 = "CT_SITES-41279";
     /*
-     * Granite feature toggle FT_SITES-41279 gates Image v3 editor markup helpers (Coral crop labels, Dynamic Media path checks,
+     * Granite feature toggle CT_SITES-41279 gates Image v3 editor markup helpers (Coral crop labels, Dynamic Media path checks,
      * page-image thumbnail shell import). Helpers stay on unless the toggle is explicitly false—use false only as a short
      * operator rollback while investigating regressions; Cloud environments should ship with this enabled.
      */
@@ -77,18 +77,18 @@
         if (!Granite || !Granite.Toggles || typeof Granite.Toggles.isEnabled !== "function") {
             return true;
         }
-        return Granite.Toggles.isEnabled(FT_SITES_41279) !== false;
+        return Granite.Toggles.isEnabled(CT_SITES_41279) !== false;
     }
 
     function getImageAuthoringUtils() {
         return window.CQ && window.CQ.CoreComponents && window.CQ.CoreComponents.AuthoringEditorUtils && window.CQ.CoreComponents.AuthoringEditorUtils.image;
     }
 
     /**
-     * Label HTML for smart crop dropdown items; with FT_SITES-41279, values are prepared for Coral innerHTML rendering.
+     * Label HTML for smart crop dropdown items; with CT_SITES-41279, values are prepared for Coral innerHTML rendering.
      *
      * @param {*} value smart crop label or related value
-     * @returns {String} label text or HTML-safe markup suitable for Coral rendering when FT_SITES-41279 applies
+     * @returns {String} label text or HTML-safe markup suitable for Coral rendering when CT_SITES-41279 applies
      */
     function formatSmartCropOptionLabel(value) {
         if (isImageV3AuthoringMarkupHelpersEnabled()) {
@@ -108,10 +108,10 @@
     }
 
     /**
-     * Whether dam:scene7File can drive image service requests; with FT_SITES-41279, repository path rules from commons apply.
+     * Whether dam:scene7File can drive image service requests; with CT_SITES-41279, repository path rules from commons apply.
      *
      * @param {*} path dam:scene7File or equivalent metadata path
-     * @returns {Boolean} whether the path is allowed for scene7-style requests when FT_SITES-41279 applies
+     * @returns {Boolean} whether the path is allowed for scene7-style requests when CT_SITES-41279 applies
      */
     function isDamScene7FileEligible(path) {
         if (isImageV3AuthoringMarkupHelpersEnabled()) {

content/test/clientlibs/authoringutils/imageV2EditorImageTest.js

@@ -0,0 +1,167 @@
+/*******************************************************************************
+ * Copyright 2026 Adobe
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ******************************************************************************/
+/**
+ * Covers Image v2 editor {@code image.js} (CT_SITES-41320) and related {@code AuthoringEditorUtils.image} checks
+ * wired through {@code globalThis.__IMAGE_V2_EDITOR_TEST_API}. Karma loads {@code image/v2/.../image.js} after {@code authoringutils}.
+ */
+function imageV2EditorImageTestFtOn() {
+    globalThis.Granite.Toggles.isEnabled = function() {
+        return true;
+    };
+}
+
+function imageV2EditorImageTestFtOff() {
+    globalThis.Granite.Toggles.isEnabled = function(key) {
+        return key !== "CT_SITES-41320";
+    };
+}
+
+describe("Image v2 editor image.js (Karma-loaded)", function() {
+    let api;
+    let imageUtils;
+    let togglesIsEnabled;
+
+    beforeAll(function() {
+        api = globalThis.__IMAGE_V2_EDITOR_TEST_API;
+        imageUtils = globalThis.CQ.CoreComponents.AuthoringEditorUtils.image;
+        togglesIsEnabled = globalThis.Granite.Toggles.isEnabled;
+    });
+
+    afterEach(function() {
+        globalThis.Granite.Toggles.isEnabled = togglesIsEnabled;
+        globalThis.CQ.CoreComponents.AuthoringEditorUtils.image = imageUtils;
+    });
+
+    describe("__IMAGE_V2_EDITOR_TEST_API", function() {
+        it("exposes helpers used by the smart crop and Dynamic Media dialog paths", function() {
+            expect(api).toBeDefined();
+            expect(typeof api.formatSmartCropOptionLabel).toBe("function");
+            expect(typeof api.isDamScene7FileEligible).toBe("function");
+            expect(typeof api.isImageV2AuthoringMarkupHelpersEnabled).toBe("function");
+            expect(typeof api.getImageAuthoringUtils).toBe("function");
+        });
+
+        it("getImageAuthoringUtils returns AuthoringEditorUtils.image when loaded", function() {
+            expect(api.getImageAuthoringUtils()).toBe(globalThis.CQ.CoreComponents.AuthoringEditorUtils.image);
+        });
+    });
+
+    describe("isImageV2AuthoringMarkupHelpersEnabled (Granite toggle)", function() {
+        it("treats missing Granite.Toggles as enabled", function() {
+            const saved = globalThis.Granite.Toggles;
+            globalThis.Granite.Toggles = undefined;
+            expect(api.isImageV2AuthoringMarkupHelpersEnabled()).toBe(true);
+            globalThis.Granite.Toggles = saved;
+        });
+
+        it("returns false when CT_SITES-41320 is explicitly disabled", function() {
+            globalThis.Granite.Toggles.isEnabled = function(key) {
+                return key !== "CT_SITES-41320";
+            };
+            expect(api.isImageV2AuthoringMarkupHelpersEnabled()).toBe(false);
+        });
+
+        it("returns true when CT_SITES-41320 is enabled", function() {
+            imageV2EditorImageTestFtOn();
+            expect(api.isImageV2AuthoringMarkupHelpersEnabled()).toBe(true);
+        });
+    });
+
+    describe("formatSmartCropOptionLabel", function() {
+        it("keeps legacy string behaviour when FT is off", function() {
+            imageV2EditorImageTestFtOff();
+            expect(api.formatSmartCropOptionLabel("a<b>c")).toBe("a<b>c");
+            expect(api.formatSmartCropOptionLabel(null)).toBe("");
+            expect(api.formatSmartCropOptionLabel(undefined)).toBe("");
+        });
+
+        it("delegates to AuthoringEditorUtils.image when FT is on", function() {
+            imageV2EditorImageTestFtOn();
+            const html = api.formatSmartCropOptionLabel("x < y");
+            expect(html.indexOf("<")).toBe(-1);
+        });
+
+        it("encodes crop names that contain script-like markup when FT is on", function() {
+            imageV2EditorImageTestFtOn();
+            const encoded = api.formatSmartCropOptionLabel('SmartCrop<script>alert(1)</script>');
+            expect(encoded.indexOf("<script>")).toBe(-1);
+            expect(encoded.indexOf("SmartCrop")).not.toBe(-1);
+        });
+
+        it("encodes angle brackets for arbitrary label strings when FT is on", function() {
+            imageV2EditorImageTestFtOn();
+            const html = api.formatSmartCropOptionLabel("16:9 <extra>");
+            expect(html.indexOf("<")).toBe(-1);
+            expect(html.indexOf("16:9")).not.toBe(-1);
+        });
+
+        it("falls back when FT is on but image utils are missing", function() {
+            imageV2EditorImageTestFtOn();
+            globalThis.CQ.CoreComponents.AuthoringEditorUtils.image = undefined;
+            expect(api.formatSmartCropOptionLabel("plain")).toBe("plain");
+            expect(api.formatSmartCropOptionLabel(null)).toBe("");
+            globalThis.CQ.CoreComponents.AuthoringEditorUtils.image = imageUtils;
+        });
+
+        it("falls back when FT is on but formatPlainTextForMarkup is not a function", function() {
+            imageV2EditorImageTestFtOn();
+            globalThis.CQ.CoreComponents.AuthoringEditorUtils.image = { isDamScene7PathEligible: imageUtils.isDamScene7PathEligible };
+            expect(api.formatSmartCropOptionLabel("x")).toBe("x");
+            globalThis.CQ.CoreComponents.AuthoringEditorUtils.image = imageUtils;
+        });
+    });
+
+    describe("isDamScene7FileEligible", function() {
+        it("is permissive when FT is off", function() {
+            imageV2EditorImageTestFtOff();
+            expect(api.isDamScene7FileEligible("javascript:alert(1)")).toBe(true);
+            expect(api.isDamScene7FileEligible("data:text/html,x")).toBe(true);
+        });
+
+        it("delegates when FT is on", function() {
+            imageV2EditorImageTestFtOn();
+            expect(api.isDamScene7FileEligible("/content/dam/x")).toBe(true);
+            expect(api.isDamScene7FileEligible("javascript:alert(1)")).toBe(false);
+            expect(api.isDamScene7FileEligible("data:text/html,<x>")).toBe(false);
+            expect(api.isDamScene7FileEligible("JaVaScRiPt:x")).toBe(false);
+        });
+
+        it("rejects unstable path segments when FT is on", function() {
+            imageV2EditorImageTestFtOn();
+            expect(api.isDamScene7FileEligible("../../etc/passwd")).toBe(false);
+        });
+
+        it("returns true when FT is on but image utils are missing", function() {
+            imageV2EditorImageTestFtOn();
+            globalThis.CQ.CoreComponents.AuthoringEditorUtils.image = undefined;
+            expect(api.isDamScene7FileEligible("javascript:x")).toBe(true);
+            globalThis.CQ.CoreComponents.AuthoringEditorUtils.image = imageUtils;
+        });
+
+        it("returns true when FT is on but isDamScene7PathEligible is not a function", function() {
+            imageV2EditorImageTestFtOn();
+            globalThis.CQ.CoreComponents.AuthoringEditorUtils.image = { formatPlainTextForMarkup: imageUtils.formatPlainTextForMarkup };
+            expect(api.isDamScene7FileEligible("/content/dam/x")).toBe(true);
+            globalThis.CQ.CoreComponents.AuthoringEditorUtils.image = imageUtils;
+        });
+    });
+
+    describe("AuthoringEditorUtils.image path rules (metadata-style references)", function() {
+        it("returns false when a value walks outside a stable repository path", function() {
+            expect(imageUtils.isDamScene7PathEligible("../../content/usergenerated/demo/payload/asset.json?")).toBe(false);
+        });
+    });
+});