debugging tools - LTR (#751)

* debugging tools - LTR 1. added predefined css class in http handler. 2. removed jQuery from debugging tools, and made use of predefined css * add textDirection=LTR to sideNavigation items * chartjs first implementation * fix name * Update src/02/z2ui5_cl_cc_chartjs.clas.abap Co-authored-by: abaplint[bot] <24845621+abaplint[bot]@users.noreply.github.com> * update chartjs properties --------- Co-authored-by: abaplint[bot] <24845621+abaplint[bot]@users.noreply.github.com>
2025-04-29 22:04:38 +08:00 · 2023-12-31 05:09:40 +02:00 · 2023-12-31 05:09:40 +02:00 · 7c3f65c498
commit 7c3f65c498
parent ce7a95728d
5 changed files with 321 additions and 43 deletions
--- a/src/01/01/z2ui5_cl_fw_http_handler.clas.abap
+++ b/src/01/01/z2ui5_cl_fw_http_handler.clas.abap
@ -468,6 +468,9 @@ CLASS Z2UI5_CL_FW_HTTP_HANDLER IMPLEMENTATION.
               `        html, body, body > div, #container, #container-uiarea {` && |\n| &&
               `            height: 100%;` && |\n| &&
               `        }` && |\n| &&
+               `        .dbg-ltr {` && |\n| &&
+               `            direction: ltr !important;` && |\n| &&
+               `        }` && |\n| &&
               `    </style> ` &&
               `    <script id="sap-ui-bootstrap"`.

--- a/src/01/03/z2ui5_cl_fw_cc_debugging_tools.clas.abap
+++ b/src/01/03/z2ui5_cl_fw_cc_debugging_tools.clas.abap
@ -66,11 +66,11 @@ CLASS Z2UI5_CL_FW_CC_DEBUGGING_TOOLS IMPLEMENTATION.
              `                    let selItem = oEvent.getSource().getSelectedItem();` && |\n|  &&
              |\n|  &&
              `                    if (selItem == 'MODEL') {` && |\n|  &&
-              `                       debugger; this.displayEditor( oEvent, JSON.stringify( sap?.z2ui5?.oView?.getModel()?.getData(), null, 3) , 'json' );` && |\n|  &&
+              `                       this.displayEditor( oEvent, JSON.stringify( sap?.z2ui5?.oView?.getModel()?.getData(), null, 3) , 'json' );` && |\n|  &&
              `                        return;` && |\n|  &&
              `                    }` && |\n|  &&
              `                    if (selItem == 'VIEW') {` && |\n|  &&
-              `                       debugger; this.displayEditor( oEvent, this.prettifyXml( sap?.z2ui5?.oView?.mProperties?.viewContent ) , 'xml' );` && |\n|  &&
+              `                       this.displayEditor( oEvent, this.prettifyXml( sap?.z2ui5?.oView?.mProperties?.viewContent ) , 'xml' );` && |\n|  &&
              `                        return;` && |\n|  &&
              `                    }` && |\n|  &&
              `                    if (selItem == 'PLAIN') {` && |\n|  &&
@ -140,21 +140,21 @@ CLASS Z2UI5_CL_FW_CC_DEBUGGING_TOOLS IMPLEMENTATION.
 *              `                  <HBox>` && |\n|  &&
 *              `                <tnt:SideNavigation id="sideNavigation" selectedKey="PLAIN" itemSelect="onItemSelect">` && |\n|  &&
 *              `                    <tnt:NavigationList>` && |\n|  &&
-*              `                        <tnt:NavigationListItem text="Communication" icon="sap-icon://employee">` && |\n|  &&
-*              `                            <tnt:NavigationListItem text="Previous Request" id="REQUEST" key="REQUEST" />` && |\n|  &&
-*              `                            <tnt:NavigationListItem text="Response"                id="PLAIN"         key="PLAIN"/>` && |\n|  &&
+*              `                        <tnt:NavigationListItem text="Communication" icon="sap-icon://employee" textDirection="LTR">` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Previous Request" id="REQUEST" key="REQUEST"             textDirection="LTR"/>` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Response"                id="PLAIN"         key="PLAIN"  textDirection="LTR" />` && |\n|  &&
 *              `                        </tnt:NavigationListItem>` && |\n|  &&
-*              `                        <tnt:NavigationListItem text="View" icon="sap-icon://employee">` && |\n|  &&
-*              `                            <tnt:NavigationListItem text="View (XML)"           id="VIEW"          key="VIEW"/>` && |\n|  &&
-*              `                            <tnt:NavigationListItem text="View Model (JSON)"    id="MODEL"         key="MODEL"  />` && |\n|  &&
-*              `                            <tnt:NavigationListItem text="Popup (XML)"          id="POPUP"         key="POPUP"          enabled="{/activePopup}"/>` && |\n|  &&
-*              `                            <tnt:NavigationListItem text="Popup Model (JSON)"   id="POPUP_MODEL"   key="POPUP_MODEL"    enabled="{/activePopup}"/>` && |\n|  &&
-*              `                            <tnt:NavigationListItem text="Popover (XML)"        id="POPOVER"       key="POPOVER"        enabled="{/activePopover}"/>` && |\n|  &&
-*              `                            <tnt:NavigationListItem text="Popover Model (JSON)" id="POPOVER_MODEL" key="POPOVER_MODEL"  enabled="{/activePopover}"/>` && |\n|  &&
-*              `                            <tnt:NavigationListItem text="Nest1 (XML)"          id="NEST1"         key="NEST1"          enabled="{/activeNest1}"/>` && |\n|  &&
-*              `                            <tnt:NavigationListItem text="Nest1 Model (JSON)"   id="NEST1_MODEL"   key="NEST1_MODEL"    enabled="{/activeNest1}"/>` && |\n|  &&
-*              `                            <tnt:NavigationListItem text="Nest2 (XML)"          id="NEST2"         key="NEST2"          enabled="{/activeNest2}"/>` && |\n|  &&
-*              `                            <tnt:NavigationListItem text="Nest2 Model (JSON)"   id="NEST2_MODEL"   key="NEST2_MODEL"    enabled="{/activeNest2}"/>` && |\n|  &&
+*              `                        <tnt:NavigationListItem text="View" icon="sap-icon://employee"  textDirection="LTR" >` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="View (XML)"           id="VIEW"          key="VIEW"                                      textDirection="LTR"/>` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="View Model (JSON)"    id="MODEL"         key="MODEL"                                     textDirection="LTR"/>` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Popup (XML)"          id="POPUP"         key="POPUP"          enabled="{/activePopup}"   textDirection="LTR"/>` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Popup Model (JSON)"   id="POPUP_MODEL"   key="POPUP_MODEL"    enabled="{/activePopup}"   textDirection="LTR"/>` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Popover (XML)"        id="POPOVER"       key="POPOVER"        enabled="{/activePopover}" textDirection="LTR"/>` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Popover Model (JSON)" id="POPOVER_MODEL" key="POPOVER_MODEL"  enabled="{/activePopover}" textDirection="LTR"/>` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Nest1 (XML)"          id="NEST1"         key="NEST1"          enabled="{/activeNest1}"   textDirection="LTR"/>` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Nest1 Model (JSON)"   id="NEST1_MODEL"   key="NEST1_MODEL"    enabled="{/activeNest1}"   textDirection="LTR"/>` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Nest2 (XML)"          id="NEST2"         key="NEST2"          enabled="{/activeNest2}"   textDirection="LTR"/>` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Nest2 Model (JSON)"   id="NEST2_MODEL"   key="NEST2_MODEL"    enabled="{/activeNest2}"   textDirection="LTR"/>` && |\n|  &&
 *              `                        </tnt:NavigationListItem>` && |\n|  &&
 *              `                    </tnt:NavigationList>` && |\n|  &&
 *              `                </tnt:SideNavigation>` && |\n|  &&
@ -163,25 +163,27 @@ CLASS Z2UI5_CL_FW_CC_DEBUGGING_TOOLS IMPLEMENTATION.
 *              `                    value='{/value}'` && |\n|  &&
 *              `                height="800px" width="1200px"/> </HBox>` && |\n|  &&
 *              `               <footer><Toolbar><ToolbarSpacer/><Button text="Close" press="onClose"/></Toolbar></footer>` && |\n|  &&
-**              `               <core:HTML content="&lt;script&gt;debugger; $(sap.ui.getCore().byId(&#39;debug-dialog&#39;).getDomRef()).css(&quot;direction&quot;,&quot;LTR&quot;)&lt;/script&gt;"></core:HTML>` && |\n| &&
 *              `               </Dialog>` && |\n|  &&
 *              `            </core:FragmentDefinition>``;` && |\n|  &&
-              `          let  XMLDef = ` && `"PGNvcmU6RnJhZ21lbnREZWZpbml0aW9uCiAgICAgICAgICAgIHhtbG5zPSJzYXAubSIKICAgICAgICAgICAgICAgIHhtbG5zOm12Yz0ic2FwLnVpLmNvcmUubXZjIgogICAgICAgICAgICAgICAgeG1sbnM6Y29yZT0ic2FwLnVpLmNvcmUiCiAgICAgICAgICAgICAgICB4` &&
-`bWxuczp0bnQ9InNhcC50bnQiCiAgICAgICAgICAgICAgICB4bWxuczplZGl0b3I9InNhcC51aS5jb2RlZWRpdG9yIj4KICAgICAgICAgICAgICAgICAgPERpYWxvZyB0aXRsZT0iYWJhcDJVSTUgLSBEZWJ1Z2dpbmcgVG9vbHMiIHN0cmV0Y2g9InRydWUiIGlkPSJkZWJ1Zy1kaWFsb2ciPgogICAgICAgICAgICAgICAgICA8SEJv` &&
-`eD4KICAgICAgICAgICAgICAgIDx0bnQ6U2lkZU5hdmlnYXRpb24gaWQ9InNpZGVOYXZpZ2F0aW9uIiBzZWxlY3RlZEtleT0iUExBSU4iIGl0ZW1TZWxlY3Q9Im9uSXRlbVNlbGVjdCI+CiAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9u` &&
-`TGlzdEl0ZW0gdGV4dD0iQ29tbXVuaWNhdGlvbiIgaWNvbj0ic2FwLWljb246Ly9lbXBsb3llZSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJQcmV2aW91cyBSZXF1ZXN0IiBpZD0iUkVRVUVTVCIga2V5PSJSRVFVRVNUIiAvPgogICAgICAgICAgICAgICAgICAgICAg` &&
-`ICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0iUmVzcG9uc2UiICAgICAgICAgICAgICAgIGlkPSJQTEFJTiIgICAgICAgICBrZXk9IlBMQUlOIi8+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvdG50Ok5hdmlnYXRpb25MaXN0SXRlbT4KICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlz` &&
-`dEl0ZW0gdGV4dD0iVmlldyIgaWNvbj0ic2FwLWljb246Ly9lbXBsb3llZSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJWaWV3IChYTUwpIiAgICAgICAgICAgaWQ9IlZJRVciICAgICAgICAgIGtleT0iVklFVyIvPgogICAgICAgICAgICAgICAgICAgICAgICAgICAg` &&
-`PHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0iVmlldyBNb2RlbCAoSlNPTikiICAgIGlkPSJNT0RFTCIgICAgICAgICBrZXk9Ik1PREVMIiAgLz4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0bnQ6TmF2aWdhdGlvbkxpc3RJdGVtIHRleHQ9IlBvcHVwIChYTUwpIiAgICAgICAgICBpZD0iUE9QVVAiICAgICAgICAg` &&
-`a2V5PSJQT1BVUCIgICAgICAgICAgZW5hYmxlZD0iey9hY3RpdmVQb3B1cH0iLz4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0bnQ6TmF2aWdhdGlvbkxpc3RJdGVtIHRleHQ9IlBvcHVwIE1vZGVsIChKU09OKSIgICBpZD0iUE9QVVBfTU9ERUwiICAga2V5PSJQT1BVUF9NT0RFTCIgICAgZW5hYmxlZD0iey9hY3RpdmVQ` &&
-`b3B1cH0iLz4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0bnQ6TmF2aWdhdGlvbkxpc3RJdGVtIHRleHQ9IlBvcG92ZXIgKFhNTCkiICAgICAgICBpZD0iUE9QT1ZFUiIgICAgICAga2V5PSJQT1BPVkVSIiAgICAgICAgZW5hYmxlZD0iey9hY3RpdmVQb3BvdmVyfSIvPgogICAgICAgICAgICAgICAgICAgICAgICAgICAg` &&
-`PHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0iUG9wb3ZlciBNb2RlbCAoSlNPTikiIGlkPSJQT1BPVkVSX01PREVMIiBrZXk9IlBPUE9WRVJfTU9ERUwiICBlbmFibGVkPSJ7L2FjdGl2ZVBvcG92ZXJ9Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJOZXN0MSAo` &&
-`WE1MKSIgICAgICAgICAgaWQ9Ik5FU1QxIiAgICAgICAgIGtleT0iTkVTVDEiICAgICAgICAgIGVuYWJsZWQ9InsvYWN0aXZlTmVzdDF9Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJOZXN0MSBNb2RlbCAoSlNPTikiICAgaWQ9Ik5FU1QxX01PREVMIiAgIGtleT0i` &&
-`TkVTVDFfTU9ERUwiICAgIGVuYWJsZWQ9InsvYWN0aXZlTmVzdDF9Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJOZXN0MiAoWE1MKSIgICAgICAgICAgaWQ9Ik5FU1QyIiAgICAgICAgIGtleT0iTkVTVDIiICAgICAgICAgIGVuYWJsZWQ9InsvYWN0aXZlTmVzdDJ9` &&
-`Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJOZXN0MiBNb2RlbCAoSlNPTikiICAgaWQ9Ik5FU1QyX01PREVMIiAgIGtleT0iTkVTVDJfTU9ERUwiICAgIGVuYWJsZWQ9InsvYWN0aXZlTmVzdDJ9Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvdG50Ok5hdmln` &&
-`YXRpb25MaXN0SXRlbT4KICAgICAgICAgICAgICAgICAgICA8L3RudDpOYXZpZ2F0aW9uTGlzdD4KICAgICAgICAgICAgICAgIDwvdG50OlNpZGVOYXZpZ2F0aW9uPgogICAgICAgICAgICAgICAgICAgIDxlZGl0b3I6Q29kZUVkaXRvcgogICAgICAgICAgICAgICAgICAgIHR5cGU9InsvdHlwZX0iCiAgICAgICAgICAgICAgICAg` &&
-`ICAgdmFsdWU9J3svdmFsdWV9JwogICAgICAgICAgICAgICAgaGVpZ2h0PSI4MDBweCIgd2lkdGg9IjEyMDBweCIvPiA8L0hCb3g+CiAgICAgICAgICAgICAgIDxmb290ZXI+PFRvb2xiYXI+PFRvb2xiYXJTcGFjZXIvPjxCdXR0b24gdGV4dD0iQ2xvc2UiIHByZXNzPSJvbkNsb3NlIi8+PC9Ub29sYmFyPjwvZm9vdGVyPgogICAg` &&
-`ICAgICAgICAgICA8L0RpYWxvZz4KICAgICAgICAgICAgPC9jb3JlOkZyYWdtZW50RGVmaW5pdGlvbj4=";` &&
+              `          let  XMLDef = ` && `"PGNvcmU6RnJhZ21lbnREZWZpbml0aW9uCiAgICAgICAgICAgIHhtbG5zPSJzYXAubSIKICAgICAgICAgICAgICAgIHhtbG5zOm12Yz0ic2FwLnVpLmNvcmUubXZjIgogICAgIC` &&
+`AgICAgICAgICAgeG1sbnM6Y29yZT0ic2FwLnVpLmNvcmUiCiAgICAgICAgICAgICAgICB4bWxuczp0bnQ9InNhcC50bnQiCiAgICAgICAg` &&
+`ICAgICAgICB4bWxuczplZGl0b3I9InNhcC51aS5jb2RlZWRpdG9yIj4KICAgICAgICAgICAgICAgICAgPERpYWxvZyB0aXRsZT0iYWJhcDJVSTUgLSBEZWJ1Z2dpbmcgVG9vbHMiIHN0cmV0Y2g9InRydWUiIGlkPSJkZWJ1Zy1kaWFsb2ciPgogICAgICAgICAgICAgICAgICA8SEJveD4KICAgICAgICAgICAgICAgIDx0` &&
+`bnQ6U2lkZU5hdmlnYXRpb24gaWQ9InNpZGVOYXZpZ2F0aW9uIiBzZWxlY3RlZEtleT0iUExBSU4iIGl0ZW1TZWxlY3Q9Im9uSXRlbVNlbGVjdCI+CiAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0i` &&
+`Q29tbXVuaWNhdGlvbiIgaWNvbj0ic2FwLWljb246Ly9lbXBsb3llZSIgIHRleHREaXJlY3Rpb249IkxUUiI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJQcmV2aW91cyBSZXF1ZXN0IiBpZD0iUkVRVUVTVCIga2V5PSJSRVFVRVNUIiAgdGV4dERpcmVjdGlv` &&
+`bj0iTFRSIi8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJSZXNwb25zZSIgICAgICAgICAgICAgICAgaWQ9IlBMQUlOIiAgICAgICAgIGtleT0iUExBSU4iICB0ZXh0RGlyZWN0aW9uPSJMVFIiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC90bnQ6TmF2` &&
+`aWdhdGlvbkxpc3RJdGVtPgogICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJWaWV3IiBpY29uPSJzYXAtaWNvbjovL2VtcGxveWVlIiAgdGV4dERpcmVjdGlvbj0iTFRSIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0bnQ6TmF2aWdhdGlvbkxpc3RJdGVtIHRl` &&
+`eHQ9IlZpZXcgKFhNTCkiICAgICAgICAgICBpZD0iVklFVyIgICAgICAgICAga2V5PSJWSUVXIiAgdGV4dERpcmVjdGlvbj0iTFRSIi8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJWaWV3IE1vZGVsIChKU09OKSIgICAgaWQ9Ik1PREVMIiAgICAgICAgIGtl` &&
+`eT0iTU9ERUwiICAgdGV4dERpcmVjdGlvbj0iTFRSIi8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJQb3B1cCAoWE1MKSIgICAgICAgICAgaWQ9IlBPUFVQIiAgICAgICAgIGtleT0iUE9QVVAiICAgICAgICAgIGVuYWJsZWQ9InsvYWN0aXZlUG9wdXB9IiAg` &&
+`dGV4dERpcmVjdGlvbj0iTFRSIi8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJQb3B1cCBNb2RlbCAoSlNPTikiICAgaWQ9IlBPUFVQX01PREVMIiAgIGtleT0iUE9QVVBfTU9ERUwiICAgIGVuYWJsZWQ9InsvYWN0aXZlUG9wdXB9IiAgdGV4dERpcmVjdGlv` &&
+`bj0iTFRSIi8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJQb3BvdmVyIChYTUwpIiAgICAgICAgaWQ9IlBPUE9WRVIiICAgICAgIGtleT0iUE9QT1ZFUiIgICAgICAgIGVuYWJsZWQ9InsvYWN0aXZlUG9wb3Zlcn0iICB0ZXh0RGlyZWN0aW9uPSJMVFIiLz4K` &&
+`ICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0bnQ6TmF2aWdhdGlvbkxpc3RJdGVtIHRleHQ9IlBvcG92ZXIgTW9kZWwgKEpTT04pIiBpZD0iUE9QT1ZFUl9NT0RFTCIga2V5PSJQT1BPVkVSX01PREVMIiAgZW5hYmxlZD0iey9hY3RpdmVQb3BvdmVyfSIgIHRleHREaXJlY3Rpb249IkxUUiIvPgogICAgICAgICAg` &&
+`ICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0iTmVzdDEgKFhNTCkiICAgICAgICAgIGlkPSJORVNUMSIgICAgICAgICBrZXk9Ik5FU1QxIiAgICAgICAgICBlbmFibGVkPSJ7L2FjdGl2ZU5lc3QxfSIgIHRleHREaXJlY3Rpb249IkxUUiIvPgogICAgICAgICAgICAgICAgICAgICAg` &&
+`ICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0iTmVzdDEgTW9kZWwgKEpTT04pIiAgIGlkPSJORVNUMV9NT0RFTCIgICBrZXk9Ik5FU1QxX01PREVMIiAgICBlbmFibGVkPSJ7L2FjdGl2ZU5lc3QxfSIgIHRleHREaXJlY3Rpb249IkxUUiIvPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpO` &&
+`YXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0iTmVzdDIgKFhNTCkiICAgICAgICAgIGlkPSJORVNUMiIgICAgICAgICBrZXk9Ik5FU1QyIiAgICAgICAgICBlbmFibGVkPSJ7L2FjdGl2ZU5lc3QyfSIgIHRleHREaXJlY3Rpb249IkxUUiIvPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlz` &&
+`dEl0ZW0gdGV4dD0iTmVzdDIgTW9kZWwgKEpTT04pIiAgIGlkPSJORVNUMl9NT0RFTCIgICBrZXk9Ik5FU1QyX01PREVMIiAgICBlbmFibGVkPSJ7L2FjdGl2ZU5lc3QyfSIgIHRleHREaXJlY3Rpb249IkxUUiIvPgogICAgICAgICAgICAgICAgICAgICAgICA8L3RudDpOYXZpZ2F0aW9uTGlzdEl0ZW0+CiAgICAgICAg` &&
+`ICAgICAgICAgICAgPC90bnQ6TmF2aWdhdGlvbkxpc3Q+CiAgICAgICAgICAgICAgICA8L3RudDpTaWRlTmF2aWdhdGlvbj4KICAgICAgICAgICAgICAgICAgICA8ZWRpdG9yOkNvZGVFZGl0b3IKICAgICAgICAgICAgICAgICAgICB0eXBlPSJ7L3R5cGV9IgogICAgICAgICAgICAgICAgICAgIHZhbHVlPSd7L3ZhbHVl` &&
+`fScKICAgICAgICAgICAgICAgIGhlaWdodD0iODAwcHgiIHdpZHRoPSIxMjAwcHgiLz4gPC9IQm94PgogICAgICAgICAgICAgICA8Zm9vdGVyPjxUb29sYmFyPjxUb29sYmFyU3BhY2VyLz48QnV0dG9uIHRleHQ9IkNsb3NlIiBwcmVzcz0ib25DbG9zZSIvPjwvVG9vbGJhcj48L2Zvb3Rlcj4KICAgICAgICAgICAgICAg` &&
+`PC9EaWFsb2c+CiAgICAgICAgICAgIDwvY29yZTpGcmFnbWVudERlZmluaXRpb24+";` &&
              `            XMLDef = atob( XMLDef );` && |\n|  &&
              `            if (this.oFragment) {` && |\n|  &&
              `                this.oFragment.close();` && |\n|  &&
@ -193,7 +195,7 @@ CLASS Z2UI5_CL_FW_CC_DEBUGGING_TOOLS IMPLEMENTATION.
              `            });` && |\n|  &&
              |\n|  &&
              `            oFragmentController.oDialog = this.oFragment;` && |\n|  &&
-              `           $( oFragmentController.oDialog .getDomRef() ).css("direction","LTR");` && |\n|  &&
+              `            oFragmentController.oDialog.addStyleClass('dbg-ltr');` && |\n|  &&
              |\n|  &&
              `            let value = JSON.stringify(sap.z2ui5.oResponse, null, 3);` && |\n|  &&
              `            debugger; let oData = { ` && |\n|  &&
--- a/src/02/z2ui5_cl_cc_chartjs.clas.abap
+++ b/src/02/z2ui5_cl_cc_chartjs.clas.abap
@ -0,0 +1,234 @@
+CLASS z2ui5_cl_cc_chartjs DEFINITION
+  PUBLIC
+  FINAL
+  CREATE PUBLIC .
+
+  PUBLIC SECTION.
+
+    " Data
+    TYPES ty_bg_color TYPE STANDARD TABLE OF string WITH DEFAULT KEY.
+
+    TYPES:
+      BEGIN OF ty_dataset,
+        label            TYPE string,
+        type             TYPE string,
+        data             TYPE string_table,
+        border_width     TYPE i,
+        border_color     TYPE string,
+        show_line        TYPE abap_bool,
+        background_color TYPE ty_bg_color,
+        hover_offset     TYPE i,
+        order            TYPE i,
+        fill             TYPE string,
+        hidden           TYPE abap_bool,
+      END OF ty_dataset.
+
+    TYPES ty_datasets TYPE STANDARD TABLE OF ty_dataset WITH DEFAULT KEY.
+
+    TYPES:
+      BEGIN OF ty_data,
+        labels   TYPE string_table,
+        datasets TYPE ty_datasets,
+      END OF ty_data .
+
+    " Options
+    TYPES:
+      BEGIN OF ty_custom_canvas_bg_color,
+        color TYPE string,
+      END OF ty_custom_canvas_bg_color.
+
+    TYPES:
+      BEGIN OF ty_colors_plugin,
+        enabled        TYPE abap_bool,
+        force_override TYPE abap_bool,
+      END OF ty_colors_plugin .
+
+    TYPES:
+      BEGIN OF ty_legend,
+        position TYPE string,
+      END OF ty_legend .
+
+    TYPES:
+      BEGIN OF ty_title,
+        text    TYPE string,
+        display TYPE abap_bool,
+      END OF ty_title .
+
+    TYPES:
+      BEGIN OF ty_callback,
+        label TYPE string,
+      END OF ty_callback .
+
+    TYPES:
+      BEGIN OF ty_tooltip,
+        callbacks TYPE ty_callback,
+        mode      TYPE string,
+        intersect TYPE abap_bool,
+      END OF ty_tooltip .
+
+    TYPES:
+      BEGIN OF ty_filler,
+        propagate TYPE abap_bool,
+      END OF ty_filler .
+
+    TYPES:
+      BEGIN OF ty_plugins,
+        colors                         TYPE ty_colors_plugin,
+        custom_canvas_background_color TYPE ty_custom_canvas_bg_color,
+        legend                         TYPE ty_legend,
+        title                          TYPE ty_title,
+        tooltip                        TYPE ty_tooltip,
+        filler                         TYPE ty_filler,
+      END OF ty_plugins .
+
+    TYPES:
+      BEGIN OF ty_font,
+        size TYPE i,
+      END OF ty_font .
+
+    TYPES:
+      BEGIN OF ty_point_label,
+        display             TYPE abap_bool,
+        center_point_labels TYPE abap_bool,
+        font                TYPE ty_font,
+      END OF ty_point_label .
+
+    TYPES:
+      BEGIN OF ty_ticks,
+        step_size TYPE string,
+      END OF ty_ticks .
+
+    TYPES:
+      BEGIN OF ty_scale,
+        begin_at_zero TYPE abap_bool,
+        min           TYPE string,
+        max           TYPE string,
+        point_labels  TYPE ty_point_label,
+        stacked       TYPE abap_bool,
+        title         TYPE ty_title,
+        suggested_min TYPE i,
+        suggested_max TYPE i,
+        ticks         TYPE ty_ticks,
+      END OF ty_scale .
+
+    TYPES:
+      BEGIN OF ty_scales,
+        y TYPE ty_scale,
+        x TYPE ty_scale,
+        r TYPE ty_scale,
+      END OF ty_scales .
+
+    TYPES:
+      BEGIN OF ty_interaction,
+        mode      TYPE string,
+        intersect TYPE abap_bool,
+      END OF ty_interaction .
+
+    TYPES:
+      BEGIN OF ty_tension,
+        duration TYPE i,
+        easing   TYPE string,
+        from     TYPE i,
+        to       TYPE i,
+        loop     TYPE abap_bool,
+      END OF ty_tension .
+
+    TYPES:
+      BEGIN OF ty_animations,
+        tension TYPE ty_tension,
+      END OF ty_animations .
+
+    TYPES:
+      BEGIN OF ty_hover,
+        mode     TYPE string,
+        intersec TYPE abap_bool,
+      END OF ty_hover .
+
+    TYPES:
+      BEGIN OF ty_options,
+        scales      TYPE ty_scales,
+        responsive  TYPE abap_bool,
+        plugins     TYPE ty_plugins,
+        hover       TYPE ty_hover,
+        interaction TYPE ty_interaction,
+        animations  TYPE ty_animations,
+      END OF ty_options .
+
+    "ChartJS Configuration
+    TYPES:
+      BEGIN OF ty_chart,
+        type    TYPE string,
+        data    TYPE ty_data,
+        options TYPE ty_options,
+      END OF ty_chart .
+
+    CLASS-METHODS get_js_local
+      RETURNING
+        VALUE(result) TYPE string .
+    CLASS-METHODS get_js_url
+      RETURNING
+        VALUE(result) TYPE string .
+    CLASS-METHODS set_js_config
+      IMPORTING
+        !canvas_id            TYPE string
+        !view                 TYPE string
+        !is_config            TYPE ty_chart
+      RETURNING
+        VALUE(chartjs_config) TYPE string .
+  PROTECTED SECTION.
+  PRIVATE SECTION.
+
+
+ENDCLASS.
+
+
+
+CLASS Z2UI5_CL_CC_CHARTJS IMPLEMENTATION.
+
+
+  METHOD get_js_local.
+    result = ``.
+  ENDMETHOD.
+
+
+  METHOD get_js_url.
+    result = `https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js`.
+  ENDMETHOD.
+
+
+  METHOD set_js_config.
+
+    DATA lv_canvas_el TYPE string.
+    DATA lv_guid TYPE string.
+
+    IF is_config IS NOT INITIAL.
+      DATA(json_config) = ``.
+      json_config =  /ui2/cl_json=>serialize(
+                          data             = is_config
+                          compress         = abap_true
+                          pretty_name      = 'X'
+                        ).
+
+    ENDIF.
+
+    CASE view.
+      WHEN 'MAIN'.
+        lv_canvas_el = `sap.z2ui5.oView.createId('` && canvas_id && `');`.
+      WHEN 'POPUP'.
+        lv_canvas_el = `sap.z2ui5.oPopup.createId('` && canvas_id && `');`.
+      WHEN 'POPOVER'.
+        lv_canvas_el = `sap.z2ui5.oPopover.createId('` && canvas_id && `');`.
+      WHEN 'NEST'.
+        lv_canvas_el = `sap.z2ui5.oViewNest.createId('` && canvas_id && `');`.
+      WHEN 'NEST2'.
+        lv_canvas_el = `sap.z2ui5.oViewNest2.createId('` && canvas_id && `');`.
+    ENDCASE.
+
+    lv_guid = z2ui5_cl_util_func=>func_get_uuid_22( ).
+    chartjs_config = chartjs_config && `var cjs = ` && json_config && `;`.
+    chartjs_config = chartjs_config && `var el =` && lv_canvas_el && `;`.
+    chartjs_config = chartjs_config && `debugger;var ctx_` && lv_guid && ` = $('#' + el);`.
+    chartjs_config = chartjs_config && `var chart = new Chart( ctx_` && lv_guid && `, cjs );`.
+
+  ENDMETHOD.
+ENDCLASS.
--- a/src/02/z2ui5_cl_cc_chartjs.clas.xml
+++ b/src/02/z2ui5_cl_cc_chartjs.clas.xml
@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<abapGit version="v1.0.0" serializer="LCL_OBJECT_CLAS" serializer_version="v1.0.0">
+ <asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
+  <asx:values>
+   <VSEOCLASS>
+    <CLSNAME>Z2UI5_CL_CC_CHARTJS</CLSNAME>
+    <LANGU>E</LANGU>
+    <DESCRIPT>CHARTJS</DESCRIPT>
+    <STATE>1</STATE>
+    <CLSCCINCL>X</CLSCCINCL>
+    <FIXPT>X</FIXPT>
+    <UNICODE>X</UNICODE>
+   </VSEOCLASS>
+  </asx:values>
+ </asx:abap>
+</abapGit>
--- a/src/10/01/z2ui5_cl_xml_view.clas.abap
+++ b/src/10/01/z2ui5_cl_xml_view.clas.abap
@ -3260,6 +3260,15 @@ public section.
      !onclick type CLIKE optional
    returning
      value(RESULT) type ref to Z2UI5_CL_XML_VIEW .
+  methods html_canvas
+    importing
+      !id type CLIKE optional
+      !width type CLIKE optional
+      !height type CLIKE optional
+      !style type CLIKE optional
+      !class type CLIKE optional
+    returning
+      value(RESULT) type ref to Z2UI5_CL_XML_VIEW .
  PROTECTED SECTION.
    DATA mv_name  TYPE string.
    DATA mv_ns     TYPE string.
@ -4227,15 +4236,6 @@ CLASS Z2UI5_CL_XML_VIEW IMPLEMENTATION.
  ENDMETHOD.


-METHOD factory_plain.
-
-    result = NEW #( ).
-
-    result->mo_root   = result.
-    result->mo_parent = result.
-
-  ENDMETHOD.
-
  METHOD factory.

    result = NEW #( ).
@ -4261,6 +4261,16 @@ METHOD factory_plain.
  ENDMETHOD.


+METHOD factory_plain.
+
+    result = NEW #( ).
+
+    result->mo_root   = result.
+    result->mo_parent = result.
+
+  ENDMETHOD.
+
+
  METHOD factory_popup.

    result = NEW #( ).
@ -4790,6 +4800,19 @@ METHOD factory_plain.
  ENDMETHOD.


+METHOD html_canvas.
+  result = _generic( name = `canvas`
+                     ns = `html`
+                     t_prop = VALUE #(
+                           ( n = `id`     v = id )
+                           ( n = `class`  v = class )
+                           ( n = `width`  v = width )
+                           ( n = `height` v = height )
+                           ( n = `style`  v = style )
+                       ) ).
+ENDMETHOD.
+
+
  METHOD html_map.
    result = _generic( name = `map` ns = 'html'
                       t_prop = VALUE #(