ENGCOM-8018: Initialize inline translations module only when they are enabled #27696

 - Merge Pull Request #27696 from krzksz/magento2:performance-inline-translations
 - Merged commits:
   1. 28d1af5
   2. b842083
   3. fe00511
   4. d64eaf4
   5. 1861c47
   6. d7305bc
   7. 52432e5
   8. d3c9a49
   9. 52cb062
   10. d2883ed
   11. 217e993
   12. 703add1
   13. cbc6cc0

Author: magento-engcom-team

app/code/Magento/Catalog/Test/Mftf/Section/AdminCategorySidebarTreeSection.xml

@@ -12,7 +12,7 @@
         <element name="collapseAll" type="button" selector=".tree-actions a:first-child"/>
         <element name="expandAll" type="button" selector=".tree-actions a:last-child"/>
         <element name="categoryHighlighted" type="text" selector="//div[@id='store.menu']//span[contains(text(),'{{name}}')]/ancestor::li" parameterized="true" timeout="30"/>
-        <element name="categoryNotHighlighted" type="text" selector="ul[id=\'ui-id-2\'] li[class~=\'active\']" timeout="30"/>
+        <element name="categoryNotHighlighted" type="text" selector="[id=\'store.menu\'] ul li.active" timeout="30"/>
         <element name="categoryTreeRoot" type="text" selector="div.x-tree-root-node>li.x-tree-node:first-of-type>div.x-tree-node-el:first-of-type" timeout="30"/>
         <element name="categoryInTree" type="text" selector="//a/span[contains(text(), '{{name}}')]" parameterized="true" timeout="30"/>
         <element name="categoryInTreeUnderRoot" type="text" selector="//li/ul/li[@class='x-tree-node']/div/a/span[contains(text(), '{{name}}')]" parameterized="true"/>

app/code/Magento/Translation/view/frontend/requirejs-config.js

@@ -10,8 +10,5 @@ var config = {
             addClass: 'Magento_Translation/js/add-class',
             'Magento_Translation/add-class': 'Magento_Translation/js/add-class'
         }
-    },
-    deps: [
-        'mage/translate-inline'
-    ]
+    }
 };

lib/web/mage/translate-inline.js

@@ -6,9 +6,10 @@
 define([
     'jquery',
     'mage/template',
-    'jquery-ui-modules/dialog',
-    'mage/translate'
-], function ($, mageTemplate) {
+    'mage/utils/misc',
+    'mage/translate',
+    'jquery-ui-modules/dialog'
+], function ($, mageTemplate, miscUtils) {
     'use strict';
 
     $.widget('mage.translateInline', $.ui.dialog, {
@@ -59,11 +60,12 @@ define([
              * Open.
              */
             open: function () {
-                var topMargin;
+                var $uiDialog = $(this).closest('.ui-dialog'),
+                    topMargin = $uiDialog.children('.ui-dialog-titlebar').outerHeight() + 45;
 
-                $(this).closest('.ui-dialog').addClass('ui-dialog-active');
-                topMargin = jQuery(this).closest('.ui-dialog').children('.ui-dialog-titlebar').outerHeight() + 45;
-                jQuery(this).closest('.ui-dialog').css('margin-top', topMargin);
+                $uiDialog
+                    .addClass('ui-dialog-active')
+                    .css('margin-top', topMargin);
             },
 
             /**
@@ -79,11 +81,15 @@ define([
          * @protected
          */
         _create: function () {
+            var $translateArea = $(this.options.translateArea);
+
+            if (!$translateArea.length) {
+                $translateArea = $('body');
+            }
+            $translateArea.on('edit.editTrigger', $.proxy(this._onEdit, this));
+
             this.tmpl = mageTemplate(this.options.translateForm.template);
-            (this.options.translateArea && $(this.options.translateArea).length ?
-                $(this.options.translateArea) :
-                this.element.closest('body'))
-                    .on('edit.editTrigger', $.proxy(this._onEdit, this));
+
             this._super();
         },
 
@@ -95,7 +101,7 @@ define([
         _prepareContent: function (templateData) {
             var data = $.extend({
                 items: templateData,
-                escape: $.mage.escapeHTML
+                escape: miscUtils.escape
             }, this.options.translateForm.data);
 
             this.data = data;
@@ -131,12 +137,11 @@ define([
          * @protected
          */
         _formSubmit: function () {
-            var parameters;
+            var parameters = $.param({
+                    area: this.options.area
+                }) + '&' + $('#' + this.options.translateForm.data.id).serialize();
 
             this.formIsSubmitted = true;
-            parameters = $.param({
-                area: this.options.area
-            }) + '&' + $('#' + this.options.translateForm.data.id).serialize();
 
             $.ajax({
                 url: this.options.ajaxUrl,
@@ -162,11 +167,13 @@ define([
          * @private
          */
         _updatePlaceholder: function (newValue) {
-            var target = jQuery(this.target);
+            var $target = $(this.target),
+                translateObject = $target.data('translate')[0];
+
+            translateObject.shown = newValue;
+            translateObject.translated = newValue;
 
-            target.data('translate')[0].shown = newValue;
-            target.data('translate')[0].translated = newValue;
-            target.html(newValue);
+            $target.html(newValue);
         },
 
         /**
@@ -177,20 +184,6 @@ define([
             this._super();
         }
     });
-    // @TODO move the "escapeHTML" method into the file with global utility functions
-    $.extend(true, $, {
-        mage: {
-            /**
-             * @param {String} str
-             * @return {Boolean}
-             */
-            escapeHTML: function (str) {
-                return str ?
-                    jQuery('<div/>').text(str).html().replace(/"/g, '&quot;') :
-                    false;
-            }
-        }
-    });
 
     return $.mage.translateInline;
 });

lib/web/mage/utils/misc.js

@@ -6,8 +6,8 @@
 define([
     'underscore',
     'jquery',
-    'FormData'
-], function (_, $) {
+    'mage/utils/objects'
+], function (_, $, utils) {
     'use strict';
 
     var defaultAttributes,
@@ -120,7 +120,7 @@ define([
          */
         submit: function (options, attrs) {
             var form        = document.createElement('form'),
-                data        = this.serialize(options.data),
+                data        = utils.serialize(options.data),
                 attributes  = _.extend({}, defaultAttributes, attrs || {});
 
             if (!attributes.action) {
@@ -205,11 +205,11 @@ define([
 
             if (type === 'default') {
                 formData = new FormData();
-                _.each(this.serialize(data), function (val, name) {
+                _.each(utils.serialize(data), function (val, name) {
                     formData.append(name, val);
                 });
             } else if (type === 'simple') {
-                formData = this.serialize(data);
+                formData = utils.serialize(data);
             }
 
             return formData;
@@ -242,6 +242,16 @@ define([
             return data;
         },
 
+        /**
+         * Replaces special characters with their corresponding HTML entities.
+         *
+         * @param {String} string - Text to escape.
+         * @returns {String} Escaped text.
+         */
+        escape: function (string) {
+            return string ? $('<p/>').text(string).html().replace(/"/g, '&quot;') : string;
+        },
+
         /**
          * Replaces symbol codes with their unescaped counterparts.
          *

lib/web/mage/utils/objects.js

@@ -5,8 +5,9 @@
 define([
     'ko',
     'jquery',
-    'underscore'
-], function (ko, $, _) {
+    'underscore',
+    'mage/utils/strings'
+], function (ko, $, _, stringUtils) {
     'use strict';
 
     var primitives = [
@@ -217,7 +218,7 @@ define([
             data = this.flatten(data);
 
             _.each(data, function (value, keys) {
-                keys = this.serializeName(keys);
+                keys = stringUtils.serializeName(keys);
                 value = _.isUndefined(value) ? '' : value;
 
                 result[keys] = value;