EffectComposer: Add help button to the code editor

Task-number: QDS-14251
Change-Id: Ifc09c4e6eca75a2db14c809ccea87c0e197254cb
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>

share/qtcreator/qmldesigner/effectComposerQmlSources/CodeEditorHeader.qml

@@ -6,6 +6,7 @@ import QtQuick.Layouts
 import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 import ModelModules as ModelModules
+import HelperWidgets as HelperWidgets
 
 Rectangle {
     id: root
@@ -24,6 +25,7 @@ Rectangle {
 
             StudioControls.TopLevelComboBox {
                 id: nodesComboBox
+
                 style: StudioTheme.Values.toolbarStyle
                 Layout.preferredWidth: nodeNamesWidthCalculator.maxWidth
                                        + nodesComboBox.indicator.width
@@ -31,9 +33,11 @@ Rectangle {
                 Layout.alignment: Qt.AlignVCenter
                 model: editableCompositionsModel
                 textRole: "display"
+
                 Binding on currentIndex {
                     value: editableCompositionsModel.selectedIndex
                 }
+
                 onActivated: (idx) => {
                     editableCompositionsModel.openCodeEditor(idx)
                 }
@@ -58,6 +62,17 @@ Rectangle {
                 style: StudioTheme.Values.viewBarControlStyle
                 Layout.alignment: Qt.AlignVCenter
             }
+
+            HelperWidgets.AbstractButton {
+                id: openHelpButton
+
+                objectName: "btnEffectComposerHelp"
+                style: StudioTheme.Values.viewBarButtonStyle
+                buttonIcon: StudioTheme.Constants.help
+                tooltip: qsTr("Open Effect Composer Help.")
+
+                onClicked: Qt.openUrlExternally("https://doc.qt.io/qtdesignstudio/qtquick-effect-composer-view.html")
+            }
         }
 
         CodeEditorUniformsView {