created a frame for the step action buttons

mix/qml/Debugger.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls.Styles 1.1
 import QtQuick.Dialogs 1.1
 import QtQuick.Layouts 1.1
 import Qt.labs.settings 1.0
+import QtGraphicalEffects 1.0
 import "js/Debugger.js" as Debugger
 import "js/ErrorLocationFormater.js" as ErrorLocationFormater
 import "."
@@ -231,9 +232,9 @@ Rectangle {
 								id: playAction
 								enabledStateImg: "qrc:/qml/img/play_button.png"
 								disableStateImg: "qrc:/qml/img/play_button.png"
+								buttonLeft: true
 								onClicked: projectModel.stateListModel.runState(transactionLog.selectedStateIndex)
-								width: 30
+								width: 23
-								height: 30
 								buttonShortcut: "Ctrl+Shift+F8"
 								buttonTooltip: qsTr("Start Debugging")
 								visible: true
@@ -246,8 +247,7 @@ Rectangle {
 								enabledStateImg: "qrc:/qml/img/stop_button2x.png"
 								disableStateImg: "qrc:/qml/img/stop_button2x.png"
 								onClicked: Debugger.init(null);
-								width: 30
+								width: 23
-								height: 30
 								buttonShortcut: "Ctrl+Shift+F9"
 								buttonTooltip: qsTr("Stop Debugging")
 								visible: true
@@ -259,8 +259,7 @@ Rectangle {
 								enabledStateImg: "qrc:/qml/img/jumpoutback.png"
 								disableStateImg: "qrc:/qml/img/jumpoutbackdisabled.png"
 								onClicked: Debugger.runBack()
-								width: 30
+								width: 23
-								height: 30
 								buttonShortcut: "Ctrl+Shift+F5"
 								buttonTooltip: qsTr("Run Back")
 								visible: false
@@ -272,8 +271,7 @@ Rectangle {
 								enabledStateImg: "qrc:/qml/img/jumpoutback.png"
 								disableStateImg: "qrc:/qml/img/jumpoutbackdisabled.png"
 								onClicked: Debugger.stepOutBack()
-								width: 30
+								width: 23
-								height: 30
 								buttonShortcut: "Ctrl+Shift+F11"
 								buttonTooltip: qsTr("Step Out Back")
 							}
@@ -284,8 +282,7 @@ Rectangle {
 								enabledStateImg: "qrc:/qml/img/jumpintoback.png"
 								disableStateImg: "qrc:/qml/img/jumpintobackdisabled.png"
 								onClicked: Debugger.stepIntoBack()
-								width: 30
+								width: 23
-								height: 30
 								buttonShortcut: "Ctrl+F11"
 								buttonTooltip: qsTr("Step Into Back")
 							}
@@ -296,8 +293,7 @@ Rectangle {
 								enabledStateImg: "qrc:/qml/img/jumpoverback.png"
 								disableStateImg: "qrc:/qml/img/jumpoverbackdisabled.png"
 								onClicked: Debugger.stepOverBack()
-								width: 30
+								width: 23
-								height: 30
 								buttonShortcut: "Ctrl+F10"
 								buttonTooltip: qsTr("Step Over Back")
 							}
@@ -308,8 +304,7 @@ Rectangle {
 								enabledStateImg: "qrc:/qml/img/jumpoverforward.png"
 								disableStateImg: "qrc:/qml/img/jumpoverforwarddisabled.png"
 								onClicked: Debugger.stepOverForward()
-								width: 30
+								width: 23
-								height: 30
 								buttonShortcut: "F10"
 								buttonTooltip: qsTr("Step Over Forward")
 							}
@@ -320,8 +315,7 @@ Rectangle {
 								enabledStateImg: "qrc:/qml/img/jumpintoforward.png"
 								disableStateImg: "qrc:/qml/img/jumpintoforwarddisabled.png"
 								onClicked: Debugger.stepIntoForward()
-								width: 30
+								width: 23
-								height: 30
 								buttonShortcut: "F11"
 								buttonTooltip: qsTr("Step Into Forward")
 							}
@@ -332,10 +326,10 @@ Rectangle {
 								enabledStateImg: "qrc:/qml/img/jumpoutforward.png"
 								disableStateImg: "qrc:/qml/img/jumpoutforwarddisabled.png"
 								onClicked: Debugger.stepOutForward()
-								width: 30
+								width: 45
-								height: 30
 								buttonShortcut: "Shift+F11"
 								buttonTooltip: qsTr("Step Out Forward")
+								buttonRight: true
 							}
 
 							StepActionImage
@@ -344,11 +338,11 @@ Rectangle {
 								enabledStateImg: "qrc:/qml/img/jumpoutforward.png"
 								disableStateImg: "qrc:/qml/img/jumpoutforwarddisabled.png"
 								onClicked: Debugger.runForward()
-								width: 30
+								width: 45
-								height: 30
 								buttonShortcut: "Ctrl+F5"
 								buttonTooltip: qsTr("Run Forward")
 								visible: false
+								buttonRight: true
 							}
 
 							Rectangle {

mix/qml/StepActionImage.qml

@@ -4,15 +4,22 @@ import QtQuick.Layouts 1.0
 import QtQuick.Controls.Styles 1.1
 
 
+
 Rectangle {
 	id: buttonActionContainer
-	color: "transparent"
 	property string disableStateImg
 	property string enabledStateImg
 	property string buttonTooltip
 	property string buttonShortcut
+	property bool buttonLeft
+	property bool buttonRight
 	signal clicked
 
+
+	color: "transparent"
+	width: 35
+	height: 24
+	
 	function enabled(state)
 	{
 		buttonAction.enabled = state;
@@ -22,29 +29,104 @@ Rectangle {
 			debugImage.source = disableStateImg;
 	}
 
-	Button
+	Rectangle {
-	{
+		color: "#DCDADA"
-		anchors.fill: parent
+		width: 10
-		id: debugImg
+		height: 24
-/*		iconSource: enabledStateImg
+		radius: 4
-*/		action: buttonAction
+		x: 0
+		visible: buttonLeft
+
+		Rectangle {
+			anchors {
+				left: parent.left
+		        right: parent.right
+		        top: parent.top
+		        bottom: parent.bottom
+				bottomMargin:debugImg.pressed? 0 : 1;
+				topMargin:debugImg.pressed? 1 : 0;
+			}
+			color: "#FCFBFC"
+			radius: 3
+		}	 
 	}
 
-	Image {
+	Rectangle {
-		id: debugImage
+		color: "#DCDADA"
-		source: enabledStateImg
+		width: 10
-		anchors.centerIn: parent
+		height: 24
-		fillMode: Image.PreserveAspectFit
+		radius: 4
-		width: 15
+		x: 25
-		height: 15
+		visible: buttonRight
+
+		Rectangle {
+			anchors {
+				left: parent.left
+		        right: parent.right
+		        top: parent.top
+		        bottom: parent.bottom
+				bottomMargin:debugImg.pressed? 0 : 1;
+				topMargin:debugImg.pressed? 1 : 0;
+			}
+			color: "#FCFBFC"
+			radius: 3
+		}	 
 	}
 
-	Action {
+
-		tooltip: buttonTooltip
+	Rectangle {
-		id: buttonAction
+		id: contentRectangle
-		shortcut: buttonShortcut
+		width: 25
-		onTriggered: {
+		height: 24
-			buttonActionContainer.clicked();
+		color: "#DCDADA"
+		x: 5
+
+		Rectangle {
+			anchors {
+				left: parent.left
+		        right: parent.right
+		        top: parent.top
+		        bottom: parent.bottom
+				bottomMargin:debugImg.pressed? 0 : 1;
+				topMargin:debugImg.pressed? 1 : 0;
+			}
+			color: "#FCFBFC"
+
+			Image {
+				id: debugImage
+				source: enabledStateImg
+				anchors.centerIn: parent
+				anchors.topMargin: debugImg.pressed? 1 : 0;
+				
+				fillMode: Image.PreserveAspectFit
+				width: 15
+				height: 15
+			}
+
+		}
+
+
+		Button {
+			anchors.fill: parent
+			id: debugImg
+			action: buttonAction
+			style: Rectangle {
+				color: "transparent"
+			}
+		}
+
+		
+		Action {
+			tooltip: buttonTooltip
+			id: buttonAction
+			shortcut: buttonShortcut
+			onTriggered: {
+				// contentRectangle.anchors.bottomMargin = 0
+				// contentRectangle.anchors.topMargin = 1
+				buttonActionContainer.clicked();
+			}
 		}
 	}
+
+	
 }