diff --git a/libdevcore/CommonIO.cpp b/libdevcore/CommonIO.cpp index ec8ca605c..feb4121cb 100644 --- a/libdevcore/CommonIO.cpp +++ b/libdevcore/CommonIO.cpp @@ -26,30 +26,30 @@ using namespace std; using namespace dev; -string dev::memDump(bytes const& _b, unsigned _w, bool _html) +string dev::memDump(bytes const& _bytes, unsigned _width, bool _html) { stringstream ret; if (_html) ret << "
";
-	for (unsigned i = 0; i < _b.size(); i += _w)
+	for (unsigned i = 0; i < _bytes.size(); i += _width)
 	{
 		ret << hex << setw(4) << setfill('0') << i << " ";
-		for (unsigned j = i; j < i + _w; ++j)
-			if (j < _b.size())
-				if (_b[j] >= 32 && _b[j] < 127)
-					if ((char)_b[j] == '<' && _html)
+		for (unsigned j = i; j < i + _width; ++j)
+			if (j < _bytes.size())
+				if (_bytes[j] >= 32 && _bytes[j] < 127)
+					if ((char)_bytes[j] == '<' && _html)
 						ret << "<";
-					else if ((char)_b[j] == '&' && _html)
+					else if ((char)_bytes[j] == '&' && _html)
 						ret << "&";
 					else
-						ret << (char)_b[j];
+						ret << (char)_bytes[j];
 				else
 					ret << '?';
 			else
 				ret << ' ';
 		ret << " ";
-		for (unsigned j = i; j < i + _w && j < _b.size(); ++j)
-			ret << setfill('0') << setw(2) << hex << (unsigned)_b[j] << " ";
+		for (unsigned j = i; j < i + _width && j < _bytes.size(); ++j)
+			ret << setfill('0') << setw(2) << hex << (unsigned)_bytes[j] << " ";
 		ret << "\n";
 	}
 	if (_html)
diff --git a/libdevcore/CommonIO.h b/libdevcore/CommonIO.h
index 11422db9a..d2a67921b 100644
--- a/libdevcore/CommonIO.h
+++ b/libdevcore/CommonIO.h
@@ -47,7 +47,8 @@ bytes contents(std::string const& _file);
 void writeFile(std::string const& _file, bytes const& _data);
 
 /// Nicely renders the given bytes to a string, optionally as HTML.
-std::string memDump(bytes const& _b, unsigned _w = 8, bool _html = false);
+/// @a _bytes: bytes array to be rendered as string. @a _width of a bytes line.
+std::string memDump(bytes const& _bytes, unsigned _width = 8, bool _html = false);
 
 // Stream I/O functions.
 // Provides templated stream I/O for all STL collections so they can be shifted on to any iostream-like interface.
diff --git a/mix/AssemblyDebuggerControl.cpp b/mix/AssemblyDebuggerControl.cpp
index f14ab8bcd..f68ddc792 100644
--- a/mix/AssemblyDebuggerControl.cpp
+++ b/mix/AssemblyDebuggerControl.cpp
@@ -26,8 +26,8 @@
 
 using namespace dev::mix;
 
-AssemblyDebuggerControl::AssemblyDebuggerControl(dev::mix::AppContext* _context):
-	Extension(_context, ExtensionDisplayBehavior::ModalDialog)
+AssemblyDebuggerControl::AssemblyDebuggerControl(AppContext* _context):
+	Extension(_context, ExtensionDisplayBehavior::RightView)
 {
 	connect(_context->clientModel(), &ClientModel::showDebuggerWindow, this, &AssemblyDebuggerControl::showDebugger, Qt::QueuedConnection);
 }
@@ -48,5 +48,6 @@ void AssemblyDebuggerControl::start() const
 
 void AssemblyDebuggerControl::showDebugger()
 {
-	this->addContentOn(this);
+	QObject* debugPanel = m_view->findChild("debugPanel", Qt::FindChildrenRecursively);
+	QMetaObject::invokeMethod(debugPanel, "update");
 }
diff --git a/mix/AssemblyDebuggerControl.h b/mix/AssemblyDebuggerControl.h
index dbe9b0676..1240b3807 100644
--- a/mix/AssemblyDebuggerControl.h
+++ b/mix/AssemblyDebuggerControl.h
@@ -22,13 +22,13 @@
 #include 
 #include "Extension.h"
 
-class AppContext;
-
 namespace dev
 {
 namespace mix
 {
 
+class AppContext;
+
 /**
  * @brief Extension which display transaction creation or transaction call debugging.
  */
@@ -44,7 +44,7 @@ public:
 	QString contentUrl() const override;
 
 private slots:
-	/// Update UI with machine states result. Display a modal dialog.
+	/// Update UI with machine states result. Displayed in the right side tab.
 	void showDebugger();
 };
 
diff --git a/mix/ClientModel.cpp b/mix/ClientModel.cpp
index bcbed1fac..14fcf9bfa 100644
--- a/mix/ClientModel.cpp
+++ b/mix/ClientModel.cpp
@@ -116,7 +116,7 @@ void ClientModel::executeSequence(std::vector const& _seque
 		{
 			bytes contractCode = compilerRes->bytes();
 			std::vector transactonData;
-			QFunctionDefinition* f;
+			QFunctionDefinition* f = nullptr;
 			ContractCallDataEncoder c;
 			//encode data for all transactions
 			for (auto const& t: _sequence)
diff --git a/mix/CodeEditorExtensionManager.cpp b/mix/CodeEditorExtensionManager.cpp
index a123c3b7a..2b1f03ff4 100644
--- a/mix/CodeEditorExtensionManager.cpp
+++ b/mix/CodeEditorExtensionManager.cpp
@@ -25,7 +25,7 @@
 #include 
 #include 
 #include 
-#include "ConstantCompilationControl.h"
+#include "StatusPane.h"
 #include "AssemblyDebuggerControl.h"
 #include "StateListView.h"
 #include "AppContext.h"
@@ -56,10 +56,9 @@ void CodeEditorExtensionManager::loadEditor(QQuickItem* _editor)
 
 void CodeEditorExtensionManager::initExtensions()
 {
-	std::shared_ptr output = std::make_shared(m_appContext);
+	std::shared_ptr output = std::make_shared(m_appContext);
 	std::shared_ptr debug = std::make_shared(m_appContext);
 	std::shared_ptr stateList = std::make_shared(m_appContext);
-	QObject::connect(m_appContext->clientModel(), &ClientModel::runFailed, output.get(), &ConstantCompilationControl::displayError);
 	QObject::connect(m_appContext->codeModel(), &CodeModel::compilationComplete, this, &CodeEditorExtensionManager::applyCodeHighlight);
 
 	initExtension(output);
@@ -73,10 +72,10 @@ void CodeEditorExtensionManager::initExtension(std::shared_ptr _ext)
 	{
 		try
 		{
-			if (_ext->getDisplayBehavior() == ExtensionDisplayBehavior::Tab)
-				_ext->addTabOn(m_tabView);
-			else if (_ext->getDisplayBehavior() == ExtensionDisplayBehavior::RightTab)
-				_ext->addTabOn(m_rightTabView);
+			if (_ext->getDisplayBehavior() == ExtensionDisplayBehavior::RightView)
+				_ext->addTabOn(m_rightView);
+			if (_ext->getDisplayBehavior() == ExtensionDisplayBehavior::HeaderView)
+				_ext->addTabOn(m_headerView);
 		}
 		catch (...)
 		{
@@ -93,13 +92,13 @@ void CodeEditorExtensionManager::applyCodeHighlight()
 	//TODO: reimplement
 }
 
-void CodeEditorExtensionManager::setRightTabView(QQuickItem* _tabView)
+void CodeEditorExtensionManager::setRightView(QQuickItem* _rightView)
 {
-	m_rightTabView = _tabView;
+	m_rightView = _rightView;
 	initExtensions(); //TODO: move this to a proper place
 }
 
-void CodeEditorExtensionManager::setTabView(QQuickItem* _tabView)
+void CodeEditorExtensionManager::setHeaderView(QQuickItem* _headerView)
 {
-	m_tabView = _tabView;
+	m_headerView = _headerView;
 }
diff --git a/mix/CodeEditorExtensionManager.h b/mix/CodeEditorExtensionManager.h
index 2f2a315b9..fe6fbb33a 100644
--- a/mix/CodeEditorExtensionManager.h
+++ b/mix/CodeEditorExtensionManager.h
@@ -26,7 +26,7 @@
 #include 
 #include 
 #include 
-#include "ConstantCompilationControl.h"
+#include "StatusPane.h"
 
 namespace dev
 {
@@ -43,8 +43,8 @@ class CodeEditorExtensionManager: public QObject
 {
 	Q_OBJECT
 
-	Q_PROPERTY(QQuickItem* tabView MEMBER m_tabView WRITE setTabView)
-	Q_PROPERTY(QQuickItem* rightTabView MEMBER m_rightTabView WRITE setRightTabView)
+	Q_PROPERTY(QQuickItem* headerView MEMBER m_headerView WRITE setHeaderView)
+	Q_PROPERTY(QQuickItem* rightView MEMBER m_rightView WRITE setRightView)
 
 public:
 	CodeEditorExtensionManager();
@@ -54,17 +54,17 @@ public:
 	/// Initialize extension.
 	void initExtension(std::shared_ptr);
 	/// Set current tab view
-	void setTabView(QQuickItem*);
+	void setHeaderView(QQuickItem*);
 	/// Set current right tab view.
-	void setRightTabView(QQuickItem*);
+	void setRightView(QQuickItem*);
 
 private slots:
 	void applyCodeHighlight();
 
 private:
 	QVector> m_features;
-	QQuickItem* m_tabView;
-	QQuickItem* m_rightTabView;
+	QQuickItem* m_headerView;
+	QQuickItem* m_rightView;
 	AppContext* m_appContext;
 	void loadEditor(QQuickItem* _editor);
 };
diff --git a/mix/CodeModel.cpp b/mix/CodeModel.cpp
index 914c7e079..699e0753d 100644
--- a/mix/CodeModel.cpp
+++ b/mix/CodeModel.cpp
@@ -1,18 +1,18 @@
 /*
-    This file is part of cpp-ethereum.
+	This file is part of cpp-ethereum.
 
-    cpp-ethereum is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
+	cpp-ethereum is free software: you can redistribute it and/or modify
+	it under the terms of the GNU General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
 
-    cpp-ethereum is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
+	cpp-ethereum is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU General Public License for more details.
 
-    You should have received a copy of the GNU General Public License
-    along with cpp-ethereum.  If not, see .
+	You should have received a copy of the GNU General Public License
+	along with cpp-ethereum.  If not, see .
 */
 /** @file CodeModel.cpp
  * @author Arkadiy Paronyan arkadiy@ethdev.com
@@ -168,7 +168,7 @@ void CodeModel::onCompilationComplete(CompilationResult*_newResult)
 
 bool CodeModel::hasContract() const
 {
-	return m_result->contract()->functionsList().size() > 0;
+	return m_result->successful();
 }
 
 void CodeModel::updateFormatting(QTextDocument* _document)
diff --git a/mix/CodeModel.h b/mix/CodeModel.h
index e1a2a0fbd..0c1de2a90 100644
--- a/mix/CodeModel.h
+++ b/mix/CodeModel.h
@@ -1,18 +1,18 @@
 /*
-    This file is part of cpp-ethereum.
+	This file is part of cpp-ethereum.
 
-    cpp-ethereum is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
+	cpp-ethereum is free software: you can redistribute it and/or modify
+	it under the terms of the GNU General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
 
-    cpp-ethereum is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
+	cpp-ethereum is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU General Public License for more details.
 
-    You should have received a copy of the GNU General Public License
-    along with cpp-ethereum.  If not, see .
+	You should have received a copy of the GNU General Public License
+	along with cpp-ethereum.  If not, see .
 */
 /** @file CodeModel.h
  * @author Arkadiy Paronyan arkadiy@ethdev.com
@@ -65,6 +65,8 @@ class CompilationResult: public QObject
 {
 	Q_OBJECT
 	Q_PROPERTY(QContractDefinition* contract READ contract)
+	Q_PROPERTY(QString compilerMessage READ compilerMessage CONSTANT)
+	Q_PROPERTY(bool successful READ successful CONSTANT)
 
 public:
 	/// Empty compilation result constructor
diff --git a/mix/ConstantCompilationControl.cpp b/mix/ConstantCompilationControl.cpp
deleted file mode 100644
index 6352f070d..000000000
--- a/mix/ConstantCompilationControl.cpp
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
-	This file is part of cpp-ethereum.
-
-	cpp-ethereum is free software: you can redistribute it and/or modify
-	it under the terms of the GNU General Public License as published by
-	the Free Software Foundation, either version 3 of the License, or
-	(at your option) any later version.
-
-	cpp-ethereum is distributed in the hope that it will be useful,
-	but WITHOUT ANY WARRANTY; without even the implied warranty of
-	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-	GNU General Public License for more details.
-
-	You should have received a copy of the GNU General Public License
-	along with cpp-ethereum.  If not, see .
-*/
-/** @file ConstantCompilationControl.cpp
- * @author Yann yann@ethdev.com
- * @date 2014
- * Ethereum IDE client.
- */
-
-#include 
-#include 
-#include 
-#include 
-#include 
-#include 
-#include 
-#include "ConstantCompilationControl.h"
-#include "QContractDefinition.h"
-#include "AppContext.h"
-#include "CodeModel.h"
-
-using namespace dev::mix;
-
-
-ConstantCompilationControl::ConstantCompilationControl(AppContext* _context): Extension(_context, ExtensionDisplayBehavior::Tab)
-{
-	connect(_context->codeModel(), &CodeModel::compilationComplete, this, &ConstantCompilationControl::update);
-	connect(_context->codeModel(), &CodeModel::compilationComplete, this, &ConstantCompilationControl::update);
-}
-
-QString ConstantCompilationControl::contentUrl() const
-{
-	return QStringLiteral("qrc:/qml/BasicContent.qml");
-}
-
-QString ConstantCompilationControl::title() const
-{
-	return QApplication::tr("compiler");
-}
-
-void ConstantCompilationControl::start() const
-{
-}
-
-void ConstantCompilationControl::update()
-{
-	auto result = m_ctx->codeModel()->code();
-
-	QObject* status = m_view->findChild("status", Qt::FindChildrenRecursively);
-	QObject* content = m_view->findChild("content", Qt::FindChildrenRecursively);
-	if (result->successful())
-	{
-		status->setProperty("text", "succeeded");
-		status->setProperty("color", "green");
-		content->setProperty("text", result->assemblyCode());
-	}
-	else
-	{
-		status->setProperty("text", "failure");
-		status->setProperty("color", "red");
-		content->setProperty("text", result->compilerMessage());
-	}
-}
-
-void ConstantCompilationControl::resetOutPut()
-{
-	QObject* status = m_view->findChild("status", Qt::FindChildrenRecursively);
-	QObject* content = m_view->findChild("content", Qt::FindChildrenRecursively);
-	status->setProperty("text", "");
-	content->setProperty("text", "");
-}
-
-
-void ConstantCompilationControl::displayError(QString const& _error)
-{
-	QObject* status = m_view->findChild("status", Qt::FindChildrenRecursively);
-	QObject* content = m_view->findChild("content", Qt::FindChildrenRecursively);
-	status->setProperty("text", "failure");
-	status->setProperty("color", "red");
-	content->setProperty("text", _error);
-}
diff --git a/mix/DebuggingStateWrapper.cpp b/mix/DebuggingStateWrapper.cpp
index 72bb02ecd..85179e84b 100644
--- a/mix/DebuggingStateWrapper.cpp
+++ b/mix/DebuggingStateWrapper.cpp
@@ -66,55 +66,134 @@ std::tuple, QQMLMap*> DebuggingStateWrapper::getHumanReadableCod
 	return std::make_tuple(codeStr, QPointer(new QQMLMap(codeMapping)));
 }
 
-QString DebuggingStateWrapper::gasLeft()
+QString DebuggingStateWrapper::gasCost()
 {
 	std::ostringstream ss;
-	ss << std::dec << (m_state.gas - m_state.gasCost);
+	ss << std::dec << m_state.gasCost;
 	return QString::fromStdString(ss.str());
 }
 
-QString DebuggingStateWrapper::gasCost()
+QString DebuggingStateWrapper::gas()
 {
 	std::ostringstream ss;
-	ss << std::dec << m_state.gasCost;
+	ss << std::dec << m_state.gas;
 	return QString::fromStdString(ss.str());
 }
 
-QString DebuggingStateWrapper::gas()
+QString DebuggingStateWrapper::newMemSize()
 {
 	std::ostringstream ss;
-	ss << std::dec << m_state.gas;
+	ss << std::dec << m_state.newMemSize;
 	return QString::fromStdString(ss.str());
 }
 
-QString DebuggingStateWrapper::debugStack()
+QStringList DebuggingStateWrapper::debugStack()
 {
-	QString stack;
+	QStringList stack;
 	for (auto i: m_state.stack)
-		stack.prepend(QString::fromStdString(prettyU256(i)) + "\n");
+		stack.append(QString::fromStdString(prettyU256(i)));
 
-	return stack;
+	return fillList(stack, "");
 }
 
-QString DebuggingStateWrapper::debugStorage()
+QStringList DebuggingStateWrapper::debugStorage()
 {
-	std::stringstream s;
+	QStringList storage;
 	for (auto const& i: m_state.storage)
+	{
+		std::stringstream s;
 		s << "@" << prettyU256(i.first) << " " << prettyU256(i.second);
+		storage.append(QString::fromStdString(s.str()));
+	}
+	return fillList(storage, "@ -");
+}
 
-	return QString::fromStdString(s.str());
+QVariantList DebuggingStateWrapper::debugMemory()
+{
+	std::vector> dump = memDumpToList(m_state.memory, 16);
+	QStringList filled;
+	filled.append(" ");
+	filled.append(" ");
+	filled.append(" ");
+	return fillList(qVariantDump(dump), QVariant(filled));
 }
 
-QString DebuggingStateWrapper::debugMemory()
+QVariantList DebuggingStateWrapper::debugCallData()
 {
-	return QString::fromStdString(memDump(m_state.memory, 16, false));
+	std::vector> dump = memDumpToList(m_data, 16);
+	QStringList filled;
+	filled.append(" ");
+	filled.append(" ");
+	filled.append(" ");
+	return fillList(qVariantDump(dump), QVariant(filled));
 }
 
-QString DebuggingStateWrapper::debugCallData()
+std::vector> DebuggingStateWrapper::memDumpToList(bytes const& _bytes, unsigned _width)
 {
-	return QString::fromStdString(memDump(m_data, 16, false));
+	std::vector> dump;
+	for (unsigned i = 0; i < _bytes.size(); i += _width)
+	{
+		std::stringstream ret;
+		std::vector dumpLine;
+		ret << std::hex << std::setw(4) << std::setfill('0') << i << " ";
+		dumpLine.push_back(ret.str());
+		ret.str(std::string());
+		ret.clear();
+
+		for (unsigned j = i; j < i + _width; ++j)
+			if (j < _bytes.size())
+				if (_bytes[j] >= 32 && _bytes[j] < 127)
+					ret << (char)_bytes[j];
+				else
+					ret << '?';
+			else
+				ret << ' ';
+		dumpLine.push_back(ret.str());
+		ret.str(std::string());
+		ret.clear();
+
+		for (unsigned j = i; j < i + _width && j < _bytes.size(); ++j)
+			ret << std::setfill('0') << std::setw(2) << std::hex << (unsigned)_bytes[j] << " ";
+		dumpLine.push_back(ret.str());
+		dump.push_back(dumpLine);
+	}
+	return dump;
 }
 
+QVariantList DebuggingStateWrapper::qVariantDump(std::vector> const& _dump)
+{
+	QVariantList ret;
+	for (std::vector const& line: _dump)
+	{
+		QStringList qLine;
+		for (std::string const& cell: line)
+			qLine.push_back(QString::fromStdString(cell));
+		ret.append(QVariant(qLine));
+	}
+	return ret;
+}
+
+QStringList DebuggingStateWrapper::fillList(QStringList& _list, QString const& _emptyValue)
+{
+	if (_list.size() < 20)
+	{
+		for (int k = _list.size(); k < 20 - _list.size(); k++)
+			_list.append(_emptyValue);
+	}
+	return _list;
+}
+
+QVariantList DebuggingStateWrapper::fillList(QVariantList _list, QVariant const& _emptyValue)
+{
+	if (_list.size() < 20)
+	{
+		for (int k = _list.size(); k < 20 - _list.size(); k++)
+			_list.append(_emptyValue);
+	}
+	return _list;
+}
+
+
 QStringList DebuggingStateWrapper::levels()
 {
 	QStringList levelsStr;
@@ -136,6 +215,11 @@ QString DebuggingStateWrapper::headerInfo()
 	return QString::fromStdString(ss.str());
 }
 
+QString DebuggingStateWrapper::instruction()
+{
+	return QString::fromStdString(dev::eth::instructionInfo(m_state.inst).name);
+}
+
 QString DebuggingStateWrapper::endOfDebug()
 {
 	if (m_state.gasCost > m_state.gas)
diff --git a/mix/DebuggingStateWrapper.h b/mix/DebuggingStateWrapper.h
index 6d1ce4220..010db9af7 100644
--- a/mix/DebuggingStateWrapper.h
+++ b/mix/DebuggingStateWrapper.h
@@ -83,13 +83,14 @@ class DebuggingStateWrapper: public QObject
 	Q_PROPERTY(int curPC READ curPC CONSTANT)
 	Q_PROPERTY(QString gasCost READ gasCost CONSTANT)
 	Q_PROPERTY(QString gas READ gas CONSTANT)
-	Q_PROPERTY(QString gasLeft READ gasLeft CONSTANT)
-	Q_PROPERTY(QString debugStack READ debugStack CONSTANT)
-	Q_PROPERTY(QString debugStorage READ debugStorage CONSTANT)
-	Q_PROPERTY(QString debugMemory READ debugMemory CONSTANT)
-	Q_PROPERTY(QString debugCallData READ debugCallData CONSTANT)
+	Q_PROPERTY(QString instruction READ instruction CONSTANT)
+	Q_PROPERTY(QStringList debugStack READ debugStack CONSTANT)
+	Q_PROPERTY(QStringList debugStorage READ debugStorage CONSTANT)
+	Q_PROPERTY(QVariantList debugMemory READ debugMemory CONSTANT)
+	Q_PROPERTY(QVariantList debugCallData READ debugCallData CONSTANT)
 	Q_PROPERTY(QString headerInfo READ headerInfo CONSTANT)
 	Q_PROPERTY(QString endOfDebug READ endOfDebug CONSTANT)
+	Q_PROPERTY(QString newMemSize READ newMemSize CONSTANT)
 	Q_PROPERTY(QStringList levels READ levels CONSTANT)
 
 public:
@@ -105,17 +106,21 @@ public:
 	/// Get gas used.
 	QString gas();
 	/// Get stack.
-	QString debugStack();
+	QStringList debugStack();
 	/// Get storage.
-	QString debugStorage();
+	QStringList debugStorage();
 	/// Get memory.
-	QString debugMemory();
+	QVariantList debugMemory();
 	/// Get call data.
-	QString debugCallData();
+	QVariantList debugCallData();
 	/// Get info to be displayed in the header.
 	QString headerInfo();
 	/// get end of debug information.
 	QString endOfDebug();
+	/// Get the new memory size.
+	QString newMemSize();
+	/// Get current instruction
+	QString instruction();
 	/// Get all previous steps.
 	QStringList levels();
 	/// Get the current processed machine state.
@@ -129,6 +134,13 @@ private:
 	MachineState m_state;
 	bytes m_code;
 	bytes m_data;
+	QStringList fillList(QStringList& _list, QString const& _emptyValue);
+	QVariantList fillList(QVariantList _list, QVariant const& _emptyValue);
+	QVariantList qVariantDump(std::vector> const& _dump);
+	/// Nicely renders the given bytes to a string, store the content in an array.
+	/// @a _bytes: bytes array to be rendered as string. @a _width of a bytes line.
+	std::vector> memDumpToList(bytes const& _bytes, unsigned _width);
+
 };
 
 }
diff --git a/mix/Extension.h b/mix/Extension.h
index bbd2d206b..98daf2918 100644
--- a/mix/Extension.h
+++ b/mix/Extension.h
@@ -33,8 +33,8 @@ class AppContext;
 
 enum ExtensionDisplayBehavior
 {
-	Tab,
-	RightTab,
+	HeaderView,
+	RightView,
 	ModalDialog
 };
 
diff --git a/mix/StateListView.cpp b/mix/StateListView.cpp
index 79364fdfb..835c332aa 100644
--- a/mix/StateListView.cpp
+++ b/mix/StateListView.cpp
@@ -1,18 +1,18 @@
 /*
-    This file is part of cpp-ethereum.
+	This file is part of cpp-ethereum.
 
-    cpp-ethereum is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
+	cpp-ethereum is free software: you can redistribute it and/or modify
+	it under the terms of the GNU General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
 
-    cpp-ethereum is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
+	cpp-ethereum is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU General Public License for more details.
 
-    You should have received a copy of the GNU General Public License
-    along with cpp-ethereum.  If not, see .
+	You should have received a copy of the GNU General Public License
+	along with cpp-ethereum.  If not, see .
 */
 /** @file StateListView.cpp
  * @author Arkadiy Paronyan arkadiy@ethdev.com
@@ -29,7 +29,7 @@
 
 using namespace dev::mix;
 
-StateListView::StateListView(AppContext* _context): Extension(_context, ExtensionDisplayBehavior::RightTab)
+StateListView::StateListView(AppContext* _context): Extension(_context, ExtensionDisplayBehavior::RightView)
 {
 }
 
diff --git a/mix/StatusPane.cpp b/mix/StatusPane.cpp
new file mode 100644
index 000000000..f74b8f22b
--- /dev/null
+++ b/mix/StatusPane.cpp
@@ -0,0 +1,66 @@
+/*
+	This file is part of cpp-ethereum.
+
+	cpp-ethereum is free software: you can redistribute it and/or modify
+	it under the terms of the GNU General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	cpp-ethereum is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU General Public License for more details.
+
+	You should have received a copy of the GNU General Public License
+	along with cpp-ethereum.  If not, see .
+*/
+/** @file ConstantCompilationControl.cpp
+ * @author Yann yann@ethdev.com
+ * @date 2014
+ * Ethereum IDE client.
+ */
+
+#include 
+#include 
+#include 
+#include 
+#include 
+#include 
+#include 
+#include "StatusPane.h"
+#include "QContractDefinition.h"
+#include "AppContext.h"
+#include "CodeModel.h"
+
+using namespace dev::mix;
+
+StatusPane::StatusPane(AppContext* _context): Extension(_context, ExtensionDisplayBehavior::HeaderView)
+{
+	connect(_context->codeModel(), &CodeModel::compilationComplete, this, &StatusPane::update);
+	_context->appEngine()->rootContext()->setContextProperty("statusPane", this);
+}
+
+QString StatusPane::contentUrl() const
+{
+	return QStringLiteral("qrc:/qml/StatusPane.qml");
+}
+
+QString StatusPane::title() const
+{
+	return QApplication::tr("compiler");
+}
+
+void StatusPane::start() const
+{
+}
+
+CompilationResult* StatusPane::result() const
+{
+	return m_ctx->codeModel()->code();
+}
+
+void StatusPane::update()
+{
+	QObject* ctrl = m_view->findChild("statusPane", Qt::FindChildrenRecursively);
+	QMetaObject::invokeMethod(ctrl, "updateStatus");
+}
diff --git a/mix/ConstantCompilationControl.h b/mix/StatusPane.h
similarity index 83%
rename from mix/ConstantCompilationControl.h
rename to mix/StatusPane.h
index 227ad6080..ee65252b5 100644
--- a/mix/ConstantCompilationControl.h
+++ b/mix/StatusPane.h
@@ -20,6 +20,7 @@
 #pragma once
 
 #include "Extension.h"
+#include "CodeModel.h"
 
 namespace dev
 {
@@ -29,23 +30,21 @@ namespace mix
 /**
  * @brief Extension which display assembly code of the contract being edited.
  */
-class ConstantCompilationControl: public Extension
+class StatusPane: public Extension
 {
 	Q_OBJECT
+	Q_PROPERTY(CompilationResult* result READ result CONSTANT)
 
 public:
-	ConstantCompilationControl(AppContext* _appContext);
-	~ConstantCompilationControl() {}
+	StatusPane(AppContext* _appContext);
+	~StatusPane() {}
 	void start() const override;
 	QString title() const override;
 	QString contentUrl() const override;
-
-private:
-	void resetOutPut();
+	CompilationResult* result() const;
 
 public slots:
 	void update();
-	void displayError(QString const& _error);
 };
 
 }
diff --git a/mix/qml.qrc b/mix/qml.qrc
index 28b82865f..344fcaa22 100644
--- a/mix/qml.qrc
+++ b/mix/qml.qrc
@@ -10,6 +10,27 @@
         qml/ProjectList.qml
         qml/StateDialog.qml
         qml/StateList.qml
+        qml/img/jumpintoback.png
+        qml/img/jumpintoforward.png
+        qml/img/jumpoutback.png
+        qml/img/jumpoutforward.png
+        qml/img/jumpoverback.png
+        qml/img/jumpoverforward.png
+        qml/StepActionImage.qml
+        qml/img/jumpintobackdisabled.png
+        qml/img/jumpintoforwarddisabled.png
+        qml/img/jumpoutbackdisabled.png
+        qml/img/jumpoutforwarddisabled.png
+        qml/img/jumpoverbackdisabled.png
+        qml/DebugBasicInfo.qml
+        qml/js/ErrorLocationFormater.js
+        qml/img/closedtriangleindicator.png
+        qml/img/opentriangleindicator.png
+        qml/img/bugiconactive.png
+        qml/img/bugiconinactive.png
+        qml/DebugInfoList.qml
+        qml/ItemDelegateDataDump.qml
+        qml/StatusPane.qml
         qml/TabStyle.qml
         qml/TransactionDialog.qml
         qml/js/Debugger.js
diff --git a/mix/qml/DebugBasicInfo.qml b/mix/qml/DebugBasicInfo.qml
new file mode 100644
index 000000000..3e28aa4c1
--- /dev/null
+++ b/mix/qml/DebugBasicInfo.qml
@@ -0,0 +1,35 @@
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Layouts 1.0
+import QtQuick.Controls.Styles 1.1
+
+RowLayout {
+	property string titleStr
+	width: parent.width
+	height: parent.height / 4
+
+	function update(_value)
+	{
+		currentStepValue.text = _value;
+	}
+
+	Rectangle {
+		width: parent.width / 2
+		height: parent.height
+		color: "#e5e5e5"
+		Text
+		{
+			id: title
+			font.pixelSize: 12
+			anchors.centerIn: parent
+			color: "#a2a2a2"
+			font.family: "Sans Serif"
+			text: titleStr
+		}
+	}
+	Text
+	{
+		font.pixelSize: 13
+		id: currentStepValue
+	}
+}
diff --git a/mix/qml/DebugInfoList.qml b/mix/qml/DebugInfoList.qml
new file mode 100644
index 000000000..6f65cc30d
--- /dev/null
+++ b/mix/qml/DebugInfoList.qml
@@ -0,0 +1,83 @@
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Layouts 1.0
+import QtQuick.Controls.Styles 1.1
+
+ColumnLayout {
+	property string title
+	property variant listModel;
+	property bool collapsible;
+	property Component itemDelegate
+	spacing: 0
+	RowLayout {
+		height: 25
+		id: header
+		Image {
+			source: "qrc:/qml/img/opentriangleindicator.png"
+			width: 15
+			sourceSize.width: 15
+			id: storageImgArrow
+			visible: collapsible
+		}
+
+		Text {
+			anchors.left: storageImgArrow.right
+			color: "#8b8b8b"
+			text: title
+			id: storageListTitle
+		}
+
+		MouseArea
+		{
+			enabled: collapsible
+			anchors.fill: parent
+			onClicked: {
+				if (storageContainer.state == "collapsed")
+					storageContainer.state = "";
+				else
+					storageContainer.state = "collapsed";
+			}
+		}
+	}
+
+	RowLayout
+	{
+		height: parent.height - header.height
+		clip: true
+		Rectangle
+		{
+			height: parent.height
+			border.width: 3
+			border.color: "#deddd9"
+			Layout.fillWidth: true
+			states: [
+				State {
+					name: "collapsed"
+					PropertyChanges {
+						target: storageContainer.parent
+						height: 0
+						visible: false
+					}
+					PropertyChanges {
+						target: storageImgArrow
+						source: "qrc:/qml/img/closedtriangleindicator.png"
+					}
+				}
+			]
+			id: storageContainer
+			width: parent.width
+			ListView {
+				clip: true;
+				anchors.top: parent.top
+				anchors.left: parent.left
+				anchors.topMargin: 3
+				anchors.leftMargin: 3
+				width: parent.width - 3
+				height: parent.height - 6
+				id: storageList
+				model: listModel
+				delegate: itemDelegate
+			}
+		}
+	}
+}
diff --git a/mix/qml/Debugger.qml b/mix/qml/Debugger.qml
index 056126e16..ac449065b 100644
--- a/mix/qml/Debugger.qml
+++ b/mix/qml/Debugger.qml
@@ -4,266 +4,505 @@ import QtQuick.Controls 1.1
 import QtQuick.Dialogs 1.1
 import QtQuick.Layouts 1.1
 import "js/Debugger.js" as Debugger
+import "js/ErrorLocationFormater.js" as ErrorLocationFormater
 
 Rectangle {
+	id: debugPanel
+	objectName: "debugPanel"
 	anchors.fill: parent;
-	color: "lightgrey"
-	Component.onCompleted: Debugger.init();
-	Rectangle {
-		color: "transparent"
-		id: headerInfo
-		anchors.horizontalCenter: parent.horizontalCenter
-		width: parent.width
-		height: 60
-		anchors.top: parent.top
-		Column {
-			width: parent.width
-			height: parent.height
-			Rectangle {
-				color: "transparent"
-				width: parent.width
-				height: 30
-				Label {
-					anchors.centerIn: parent
-					font.family: "Verdana"
-					font.pointSize: 9
-					font.italic: true
-					id: headerInfoLabel
-				}
-			}
-			Rectangle {
-				color: "transparent"
-				width: parent.width
-				anchors.horizontalCenter: parent.horizontalCenter
-				height: 30
-				ListView {
-					orientation: ListView.Horizontal
-					anchors.centerIn: parent;
-					width: parent.width
-					id: headerReturnList
-					delegate: renderDelegateReturnValues
-				}
-				Component {
-					id: renderDelegateReturnValues
-					Item {
-						id: wrapperItem
-						width: 80
-						Text {
-							anchors.centerIn: parent
-							text: variable.declaration.name + " = " + variable.value
-							font.pointSize: 9
-						}
-					}
-				}
-			}
-		}
-	}
-
-	Keys.onPressed: {
+	color: "#ededed"
+	clip: true
+	Keys.onPressed:
+	{
 		if (event.key === Qt.Key_F10)
 			Debugger.moveSelection(1);
 		else if (event.key === Qt.Key_F9)
 			Debugger.moveSelection(-1);
 	}
 
-	Rectangle {
-		color: "transparent"
-		id: stateListContainer
-		focus: true
-		anchors.topMargin: 10
-		anchors.top: headerInfo.bottom
-		anchors.left: parent.left
-		height: parent.height - 70
-		width: parent.width * 0.5
+	function update()
+	{
+		if (statusPane.result.successful)
+		{
+			Debugger.init();
+			debugScrollArea.visible = true;
+			compilationErrorArea.visible = false;
+			machineStates.visible = true;
+		}
+		else
+		{
+			debugScrollArea.visible = false;
+			compilationErrorArea.visible = true;
+			machineStates.visible = false;
+			var errorInfo = ErrorLocationFormater.extractErrorInfo(statusPane.result.compilerMessage, false);
+			errorLocation.text = errorInfo.errorLocation;
+			errorDetail.text = errorInfo.errorDetail;
+			errorLine.text = errorInfo.errorLine;
+		}
+	}
+
+	Connections {
+		target: codeModel
+		onCompilationComplete: update()
+	}
 
-		ListView {
+	Rectangle
+	{
+		visible: false;
+		id: compilationErrorArea
+		width: parent.width - 20
+		height: 500
+		color: "#ededed"
+		anchors.left: parent.left
+		anchors.top: parent.top
+		anchors.margins: 10
+		ColumnLayout
+		{
+			width: parent.width
 			anchors.top: parent.top
-			height: parent.height * 0.60
-			width: 200
-			anchors.horizontalCenter: parent.horizontalCenter
-			id: statesList
-			model: humanReadableExecutionCode
-			delegate: renderDelegate
-			highlight: highlightBar
-			highlightFollowsCurrentItem: true
-		}
+			spacing: 25
+			RowLayout
+			{
+				height: 100
+				ColumnLayout
+				{
+					Text {
+						color: "red"
+						id: errorLocation
+					}
+					Text {
+						color: "#4a4a4a"
+						id: errorDetail
+					}
+				}
+			}
 
-		Component {
-			id: highlightBar
-			Rectangle {
-				height: statesList.currentItem.height
-				width: statesList.currentItem.width
-				border.color: "orange"
-				border.width: 1
-				Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } }
+			Rectangle
+			{
+				width: parent.width - 6
+				height: 2
+				color: "#d0d0d0"
 			}
-		}
 
-		Component {
-			id: renderDelegate
-			Item {
-				id: wrapperItem
-				height: 20
-				width: parent.width
-				Text {
-					anchors.centerIn: parent
-					text: line
-					font.pointSize: 9
+			RowLayout
+			{
+				Text
+				{
+					color: "#4a4a4a"
+					id: errorLine
 				}
 			}
 		}
+	}
 
-		Rectangle {
-			id: callStackPanel
-			anchors.top: statesList.bottom
-			height: parent.height * 0.35
-			width: parent.width
+
+	Flickable {
+		property int firstColumnWidth: 170
+		property int secondColumnWidth: 250
+		id: debugScrollArea
+		flickableDirection: Flickable.VerticalFlick
+		anchors.fill: parent
+		contentHeight: machineStates.height + 300
+		contentWidth: machineStates.width
+
+		GridLayout
+		{
+			property int sideMargin: 10
+			id: machineStates
+			anchors.top: parent.top
 			anchors.topMargin: 15
-			color: "transparent"
-			Label {
-				id: callStackLabel
-				anchors.bottomMargin: 10
-				horizontalAlignment: "AlignHCenter"
-				font.family: "Verdana"
-				font.pointSize: 8
-				font.letterSpacing: 2
-				width: parent.width
-				height: 15
-				text: qsTr("callstack")
-			}
+			anchors.left: parent.left;
+			anchors.leftMargin: machineStates.sideMargin
+			anchors.right: parent.right;
+			anchors.rightMargin: machineStates.sideMargin
+			flow: GridLayout.TopToBottom
+			rowSpacing: 15
+			RowLayout {
+				// step button + slider
+				spacing: machineStates.sideMargin
+				height: 27
+				width: debugPanel.width
+				Rectangle
+				{
+					height: parent.height
+					color: "transparent"
+					width: debugScrollArea.firstColumnWidth
+					RowLayout {
+						anchors.horizontalCenter: parent.horizontalCenter
+						id: jumpButtons
+						spacing: 3
+						StepActionImage
+						{
+							id: jumpOutBackAction;
+							enabledStateImg: "qrc:/qml/img/jumpoutback.png"
+							disableStateImg: "qrc:/qml/img/jumpoutbackdisabled.png"
+							onClicked: Debugger.stepOutBack()
+							width: 25
+							height: 27
+						}
 
-			ListView {
-				height: parent.height - 15
-				width: 200
-				anchors.top: callStackLabel.bottom
-				anchors.horizontalCenter: parent.horizontalCenter
-				id: levelList
-				delegate: Component {
-					Item {
-						Text {
-							font.family: "Verdana"
-							font.pointSize: 8
-							text: modelData
+						StepActionImage
+						{
+							id: jumpIntoBackAction
+							enabledStateImg: "qrc:/qml/img/jumpintoback.png"
+							disableStateImg: "qrc:/qml/img/jumpintobackdisabled.png"
+							onClicked: Debugger.stepIntoBack()
+							width: 25
+							height: 27
+						}
+
+						StepActionImage
+						{
+							id: jumpOverBackAction
+							enabledStateImg: "qrc:/qml/img/jumpoverback.png"
+							disableStateImg: "qrc:/qml/img/jumpoverbackdisabled.png"
+							onClicked: Debugger.stepOverBack()
+							width: 25
+							height: 27
+						}
+
+						StepActionImage
+						{
+							id: jumpOverForwardAction
+							enabledStateImg: "qrc:/qml/img/jumpoverforward.png"
+							disableStateImg: "qrc:/qml/img/jumpoverforwarddisabled.png"
+							onClicked: Debugger.stepOverForward()
+							width: 25
+							height: 27
+						}
+
+						StepActionImage
+						{
+							id: jumpIntoForwardAction
+							enabledStateImg: "qrc:/qml/img/jumpintoforward.png"
+							disableStateImg: "qrc:/qml/img/jumpintoforwarddisabled.png"
+							onClicked: Debugger.stepIntoForward()
+							width: 25
+							height: 27
+						}
+
+						StepActionImage
+						{
+							id: jumpOutForwardAction
+							enabledStateImg: "qrc:/qml/img/jumpoutforward.png"
+							disableStateImg: "qrc:/qml/img/jumpoutforwarddisabled.png"
+							onClicked: Debugger.stepOutForward()
+							width: 25
+							height: 27
+						}
+					}
+				}
+				Rectangle {
+					color: "transparent"
+					width: debugScrollArea.secondColumnWidth
+					height: parent.height
+					Slider {
+						id: statesSlider
+						anchors.fill: parent
+						tickmarksEnabled: true
+						stepSize: 1.0
+						onValueChanged: Debugger.jumpTo(value);
+						style: SliderStyle {
+							groove: Rectangle {
+								implicitHeight: 3
+								color: "#7da4cd"
+								radius: 8
+							}
+							handle: Rectangle {
+								anchors.centerIn: parent
+								color: control.pressed ? "white" : "lightgray"
+								border.color: "gray"
+								border.width: 2
+								implicitWidth: 10
+								implicitHeight: 10
+								radius: 12
+							}
 						}
 					}
 				}
 			}
-		}
-	}
 
-	Rectangle {
-		color: "transparent"
-		anchors.topMargin: 5
-		anchors.bottomMargin: 10
-		anchors.rightMargin: 10
-		height: parent.height - 30
-		width: parent.width * 0.5
-		anchors.right: parent.right
-		anchors.top: headerInfo.bottom
-		anchors.bottom: parent.bottom
+			RowLayout {
+				// Assembly code
+				width: debugPanel.width
+				height: 405
+				spacing: machineStates.sideMargin
 
-		Rectangle {
-			id: debugStack
-			anchors.top: parent.top
-			width: parent.width
-			height: parent.height * 0.25
-			color: "transparent"
-			Label {
-				horizontalAlignment: "AlignHCenter"
-				font.family: "Verdana"
-				font.pointSize: 8
-				width: parent.width
-				height: 15
-				anchors.top : parent.top
-				text: qsTr("debug stack")
-			}
-			TextArea {
-				anchors.bottom: parent.bottom
-				width: parent.width
-				font.family: "Verdana"
-				font.pointSize: 8
-				height: parent.height - 15
-				id: debugStackTxt
-				readOnly: true;
+				Rectangle
+				{
+					width: debugScrollArea.firstColumnWidth
+					height: parent.height
+					border.width: 3
+					border.color: "#deddd9"
+					color: "white"
+					anchors.top: parent.top
+					ListView {
+						anchors.fill: parent
+						anchors.leftMargin: 3
+						anchors.rightMargin: 3
+						anchors.topMargin: 3
+						anchors.bottomMargin: 3
+						clip: true
+						id: statesList
+						delegate: renderDelegate
+						highlight: highlightBar
+						highlightFollowsCurrentItem: true
+					}
+
+					Component {
+						id: highlightBar
+						Rectangle {
+							radius: 4
+							height: statesList.currentItem.height
+							width: statesList.currentItem.width;
+							color: "#4A90E2"
+							Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } }
+						}
+					}
+
+					Component {
+						id: renderDelegate
+						RowLayout {
+							id: wrapperItem
+							height: 20
+							width: parent.width
+							spacing: 5
+							Text {
+								anchors.left: parent.left
+								anchors.leftMargin: 10
+								width: 15
+								color: "#b2b3ae"
+								text: line.split(' ')[0]
+								font.pointSize: 9
+								id: id
+								wrapMode: Text.NoWrap
+							}
+							Text {
+								wrapMode: Text.NoWrap
+								color: parent.ListView.isCurrentItem ? "white" : "black"
+								text: line.replace(line.split(' ')[0], '')
+								anchors.left: id.right
+								font.pointSize: 9
+							}
+						}
+					}
+				}
+
+				ColumnLayout {
+					width: debugScrollArea.secondColumnWidth
+					height: parent.height
+					Rectangle {
+						// Info
+						width: parent.width
+						id: basicInfoColumn
+						height: 125
+						color: "transparent"
+						ColumnLayout {
+							spacing: 0
+							width: parent.width
+							height: parent.height
+							DebugBasicInfo {
+								id: currentStep
+								titleStr: qsTr("Current step")
+							}
+							DebugBasicInfo {
+								id: mem
+								titleStr: qsTr("Adding memory")
+							}
+							DebugBasicInfo {
+								id: stepCost
+								titleStr: qsTr("Step cost")
+							}
+							DebugBasicInfo {
+								id: gasSpent
+								titleStr: qsTr("Total gas spent")
+							}
+						}
+					}
+
+					Rectangle {
+						// Stack
+						height: 275
+						width: parent.width
+						color: "transparent"
+
+						DebugInfoList
+						{
+							id: stack
+							width: parent.width
+							height: parent.height
+							collapsible: false
+							title : qsTr("Stack")
+							itemDelegate: Item {
+								id: renderedItem
+								height: 27
+								width: parent.width
+								RowLayout
+								{
+									anchors.fill: parent
+									Rectangle
+									{
+										id: indexColumn
+										color: "#f7f7f7"
+										Layout.fillWidth: true
+										Layout.minimumWidth: 30
+										Layout.preferredWidth: 30
+										Layout.maximumWidth: 30
+										Layout.minimumHeight: parent.height
+										Text {
+											anchors.centerIn: parent
+											anchors.leftMargin: 5
+											color: "#8b8b8b"
+											text: model.index;
+											font.pointSize: 9
+										}
+									}
+
+									Rectangle
+									{
+										anchors.left: indexColumn.right
+										Layout.fillWidth: true
+										Layout.minimumWidth: 15
+										Layout.preferredWidth: 15
+										Layout.maximumWidth: 60
+										Layout.minimumHeight: parent.height
+										Text {
+											anchors.left: parent.left
+											anchors.leftMargin: 5
+											anchors.verticalCenter: parent.verticalCenter
+											color: "#8b8b8b"
+											text: modelData
+											font.pointSize: 9
+										}
+									}
+								}
+
+								Rectangle {
+								   id: separator
+								   width: parent.width;
+								   height: 1;
+								   color: "#cccccc"
+								   anchors.bottom: parent.bottom
+								 }
+							}
+						}
+					}
+				}
 			}
-		}
 
-		Rectangle {
-			id: debugMemory
-			anchors.top: debugStack.bottom
-			width: parent.width
-			height: parent.height * 0.25
-			color: "transparent"
-			Label {
-				horizontalAlignment: "AlignHCenter"
-				font.family: "Verdana"
-				font.pointSize: 8
-				width: parent.width
-				height: 15
-				anchors.top : parent.top
-				text: qsTr("debug memory")
+			Rectangle {
+				width: debugPanel.width - 2 * machineStates.sideMargin
+				height: 2;
+				color: "#e3e3e3"
+				radius: 3
 			}
-			TextArea {
-				anchors.bottom: parent.bottom
-				width: parent.width
-				font.family: "Verdana"
-				font.pointSize: 8
-				height: parent.height - 15
-				id: debugMemoryTxt
-				readOnly: true;
+
+			DebugInfoList
+			{
+				id: storage
+				width: debugPanel.width - 2 * machineStates.sideMargin
+				height: 223
+				collapsible: true
+				title : qsTr("Storage")
+				itemDelegate:
+					Item {
+					height: 27
+					width: parent.width;
+					RowLayout
+					{
+						id: row
+						width: parent.width
+						height: 26
+						Rectangle
+						{
+							color: "#f7f7f7"
+							Layout.fillWidth: true
+							Layout.minimumWidth: parent.width / 2
+							Layout.preferredWidth: parent.width / 2
+							Layout.maximumWidth: parent.width / 2
+							Layout.minimumHeight: parent.height
+							Layout.maximumHeight: parent.height
+							Text {
+								anchors.verticalCenter: parent.verticalCenter
+								anchors.left: parent.left
+								anchors.leftMargin: 5
+								color: "#8b8b8b"
+								text: modelData.split(' ')[0].substring(0, 10);
+								font.pointSize: 9
+							}
+						}
+						Rectangle
+						{
+							color: "transparent"
+							Layout.fillWidth: true
+							Layout.minimumWidth: parent.width / 2
+							Layout.preferredWidth: parent.width / 2
+							Layout.maximumWidth: parent.width / 2
+							Layout.minimumHeight: parent.height
+							Layout.maximumHeight: parent.height
+							Text {
+								anchors.leftMargin: 5
+								width: parent.width - 5
+								wrapMode: Text.Wrap
+								anchors.left: parent.left
+								anchors.verticalCenter: parent.verticalCenter
+								color: "#8b8b8b"
+								text: modelData.split(' ')[1].substring(0, 10);
+								font.pointSize: 9
+							}
+						}
+					}
+
+					Rectangle {
+						anchors.top: row.bottom
+						width: parent.width;
+						height: 1;
+						color: "#cccccc"
+						anchors.bottom: parent.bottom
+					 }
+				}
 			}
-		}
 
-		Rectangle {
-			id: debugStorage
-			anchors.top: debugMemory.bottom
-			width: parent.width
-			height: parent.height * 0.25
-			color: "transparent"
-			Label {
-				horizontalAlignment: "AlignHCenter"
-				font.family: "Verdana"
-				font.pointSize: 8
-				width: parent.width
-				height: 15
-				anchors.top : parent.top
-				text: qsTr("debug storage")
+			Rectangle {
+				width: debugPanel.width - 2 * machineStates.sideMargin
+				height: 2;
+				color: "#e3e3e3"
+				radius: 3
 			}
-			TextArea {
-				anchors.bottom: parent.bottom
-				width: parent.width
-				font.family: "Verdana"
-				font.pointSize: 8
-				height: parent.height - 15
-				id: debugStorageTxt
-				readOnly: true;
+
+			DebugInfoList {
+				id: memoryDump
+				width: debugPanel.width - 2 * machineStates.sideMargin
+				height: 223
+				collapsible: true
+				title: qsTr("Memory Dump")
+				itemDelegate:
+					Item {
+					height: 29
+					width: parent.width - 3;
+					ItemDelegateDataDump {}
+				}
 			}
-		}
 
-		Rectangle {
-			id: debugCallData
-			anchors.top: debugStorage.bottom
-			width: parent.width
-			height: parent.height * 0.25
-			color: "transparent"
-			Label {
-				horizontalAlignment: "AlignHCenter"
-				font.family: "Verdana"
-				font.pointSize: 8
-				width: parent.width
-				height: 15
-				anchors.top : parent.top
-				text: qsTr("debug calldata")
+			Rectangle {
+				width: debugPanel.width - 2 * machineStates.sideMargin
+				height: 2;
+				color: "#e3e3e3"
+				radius: 3
 			}
-			TextArea {
-				anchors.bottom: parent.bottom
-				width: parent.width
-				height: parent.height - 15
-				font.family: "Verdana"
-				font.pointSize: 8
-				font.letterSpacing: 2
-				id: debugCallDataTxt
-				readOnly: true;
+
+			DebugInfoList {
+				id: callDataDump
+				width: debugPanel.width - 2 * machineStates.sideMargin
+				height: 223
+				collapsible: true
+				title: qsTr("Call data")
+				itemDelegate:
+					Item {
+					height: 29
+					width: parent.width - 3;
+					ItemDelegateDataDump {}
+				}
 			}
 		}
 	}
diff --git a/mix/qml/ItemDelegateDataDump.qml b/mix/qml/ItemDelegateDataDump.qml
new file mode 100644
index 000000000..d8513ac20
--- /dev/null
+++ b/mix/qml/ItemDelegateDataDump.qml
@@ -0,0 +1,71 @@
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Layouts 1.0
+import QtQuick.Controls.Styles 1.1
+
+Rectangle {
+	anchors.fill: parent
+	RowLayout
+	{
+		id: row;
+		anchors.fill: parent
+		spacing: 2
+		Rectangle
+		{
+			id: firstCol;
+			color: "#f7f7f7"
+			Layout.fillWidth: true
+			Layout.minimumWidth: 35
+			Layout.preferredWidth: 35
+			Layout.maximumWidth: 35
+			Layout.minimumHeight: parent.height
+			Text {
+				anchors.centerIn: parent
+				anchors.leftMargin: 5
+				color: "#8b8b8b"
+				text: modelData[0]
+				font.pointSize: 9;
+			}
+		}
+
+		Rectangle
+		{
+			anchors.left: firstCol.right
+			Layout.fillWidth: true
+			Layout.minimumWidth: 90
+			Layout.preferredWidth: 90
+			Layout.maximumWidth: 90
+			Layout.minimumHeight: parent.height
+			Text {
+				anchors.left: parent.left
+				anchors.leftMargin: 7
+				anchors.verticalCenter: parent.verticalCenter
+				color: "#8b8b8b"
+				text: modelData[1]
+				font.pointSize: 9
+			}
+		}
+
+		Rectangle
+		{
+			Layout.fillWidth: true
+			Layout.minimumWidth: 50
+			Layout.minimumHeight: parent.height
+			Text {
+				anchors.left: parent.left
+				anchors.verticalCenter: parent.verticalCenter
+				color: "#ededed"
+				font.bold: true
+				text: modelData[2]
+				font.pointSize: 10
+			}
+		}
+	}
+
+	Rectangle {
+		width: parent.width;
+		height: 1;
+		color: "#cccccc"
+		anchors.bottom: parent.bottom
+	}
+}
diff --git a/mix/qml/MainContent.qml b/mix/qml/MainContent.qml
index 5376be49d..2b0b50ce5 100644
--- a/mix/qml/MainContent.qml
+++ b/mix/qml/MainContent.qml
@@ -5,6 +5,7 @@ import QtQuick.Controls.Styles 1.1
 import CodeEditorExtensionManager 1.0
 
 Rectangle {
+
 	objectName: "mainContent"
 	signal keyPressed(variant event)
 	focus: true
@@ -14,59 +15,152 @@ Rectangle {
 		root.keyPressed(event.key);
 	}
 	anchors.fill: parent
-	height: parent.height
-	width: parent.width;
-    id:root
-    SplitView {
-        orientation: Qt.Horizontal
-        anchors.fill: parent
-
-		ProjectList	{
-			width: parent.width * 0.2
-			height: parent.height
-			Layout.minimumWidth: 200
+	id: root
+
+	function toggleRightView()
+	{
+		if (!rightView.visible)
+			rightView.show();
+		else
+			rightView.hide();
+	}
+
+	function ensureRightView()
+	{
+		if (!rightView.visible)
+			rightView.show();
+	}
+
+	function hideRightView()
+	{
+		if (rightView.visible)
+			rightView.hide();
+	}
+
+	CodeEditorExtensionManager {
+		headerView: headerPaneTabs;
+		rightView: rightPaneTabs;
+	}
+
+	GridLayout
+	{
+		anchors.fill: parent
+		rows: 2
+		flow: GridLayout.TopToBottom
+		columnSpacing: 0
+		rowSpacing: 0
+		Rectangle {
+			width: parent.width
+			height: 50
+			Layout.row: 0
+			Layout.fillWidth: true
+			Layout.preferredHeight: 50
+			id: headerView
+			Rectangle
+			{
+				gradient: Gradient {
+					GradientStop { position: 0.0; color: "#f1f1f1" }
+					GradientStop { position: 1.0; color: "#d9d7da" }
+				}
+				id: headerPaneContainer
+				anchors.fill: parent
+				TabView {
+					id: headerPaneTabs
+					tabsVisible: false
+					antialiasing: true
+					anchors.fill: parent
+					style: TabViewStyle {
+						frameOverlap: 1
+						tab: Rectangle {}
+						frame: Rectangle { color: "transparent" }
+					}
+				}
+			}
 		}
 
-        SplitView {
-            //anchors.fill: parent
-			width: parent.width * 0.6
-            orientation: Qt.Vertical
-			CodeEditorView {
-				height: parent.height * 0.7
-				anchors.top: parent.top
-				width: parent.width
+		SplitView {
+			resizing: false
+			Layout.row: 1
+			orientation: Qt.Horizontal;
+			Layout.fillWidth: true
+			Layout.preferredHeight: root.height - headerView.height;
+
+			ProjectList	{
+				id: projectList
+				width: 200
+				height: parent.height
+				Layout.minimumWidth: 200
+			}
+
+			Rectangle {
+				id: contentView
+				width: parent.width - projectList.width
+				height: parent.height
+				CodeEditorView {
+								height: parent.height
+								anchors.top: parent.top
+								width: parent.width
+							}
 			}
 
-            Rectangle {
-                anchors.bottom: parent.bottom
-                id: contextualView
-                width: parent.width
-                Layout.minimumHeight: 20
-                height: parent.height * 0.3
-                TabView {
-                    id: contextualTabs
-                    antialiasing: true
-                    anchors.fill: parent
-                    style: TabStyle {}
-                }
-            }
-        }
-        Rectangle {
-            anchors.right: parent.right
-            id: rightPaneView
-            width: parent.width * 0.2
-            height: parent.height
-            Layout.minimumWidth: 20
-            TabView {
-                id: rightPaneTabs
-                antialiasing: true
-                anchors.fill: parent
-                //style: TabStyle {}
-            }
-        }
-        CodeEditorExtensionManager {
-                tabView: contextualTabs
-                rightTabView: rightPaneTabs
-        }
-    }
+			Rectangle {
+				visible: false;
+				id: rightView;
+
+				Keys.onEscapePressed:
+				{
+					hide();
+				}
+
+				function show() {
+					visible = true;
+					contentView.width = parent.width - projectList.width - rightView.width;
+				}
+
+				function hide() {
+					visible = false;
+					contentView.width = parent.width - projectList.width;
+				}
+
+				height: parent.height;
+				width: 450
+				Layout.minimumWidth: 450
+				Rectangle {
+					anchors.fill: parent;
+					id: rightPaneView
+					TabView {
+						id: rightPaneTabs
+						tabsVisible: true
+						antialiasing: true
+						anchors.fill: parent
+						style: TabViewStyle {
+							frameOverlap: 1
+							tabBar:
+								Rectangle {
+									color: "#ededed"
+									id: background
+								}
+							tab: Rectangle {
+								color: "#ededed"
+								implicitWidth: 80
+								implicitHeight: 20
+								radius: 2
+								Text {
+									anchors.centerIn: parent
+									text: styleData.title
+									color: styleData.selected ? "#7da4cd" : "#202020"
+								}
+							}
+							frame: Rectangle {
+							}
+						}
+					}
+				}
+			}
+		}
+	}
 }
+
+
+
+
diff --git a/mix/qml/StateList.qml b/mix/qml/StateList.qml
index 12f0318d1..519e533d5 100644
--- a/mix/qml/StateList.qml
+++ b/mix/qml/StateList.qml
@@ -6,7 +6,7 @@ import QtQuick.Layouts 1.1
 import org.ethereum.qml.ProjectModel 1.0
 
 Rectangle {
-	color: "transparent"
+	color: "#ededed"
 	id: stateListContainer
 	focus: true
 	anchors.topMargin: 10
@@ -123,7 +123,10 @@ Rectangle {
 				ToolButton {
 					text: qsTr("Run");
 					Layout.fillHeight: true
-					onClicked: stateListModel.runState(index);
+					onClicked:
+					{
+						stateListModel.runState(index)
+					}
 				}
 			}
 		}
diff --git a/mix/qml/StatusPane.qml b/mix/qml/StatusPane.qml
new file mode 100644
index 000000000..af4f6949e
--- /dev/null
+++ b/mix/qml/StatusPane.qml
@@ -0,0 +1,116 @@
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Layouts 1.1
+import "js/ErrorLocationFormater.js" as ErrorLocationFormater
+
+Rectangle {
+	id: statusHeader
+	objectName: "statusPane"
+
+	function updateStatus()
+	{
+		if (statusPane.result.successful)
+		{
+			status.state = "";
+			status.text = qsTr("Compile without errors.");
+			logslink.visible = false;
+		}
+		else
+		{
+			status.state = "error";
+			var errorInfo = ErrorLocationFormater.extractErrorInfo(statusPane.result.compilerMessage, true);
+			status.text = errorInfo.errorLocation + " " + errorInfo.errorDetail;
+			logslink.visible = true;
+		}
+		debugRunActionIcon.enabled = statusPane.result.successful;
+	}
+
+	color: "transparent"
+	anchors.fill: parent
+	Rectangle {
+		id: statusContainer
+		anchors.horizontalCenter: parent.horizontalCenter
+		anchors.verticalCenter: parent.verticalCenter
+		radius: 3
+		width: 500
+		height: 30
+		color: "#fcfbfc"
+		RowLayout {
+			anchors.horizontalCenter: parent.horizontalCenter
+			anchors.verticalCenter: parent.verticalCenter
+			spacing: 5
+
+			Text {
+				font.pointSize: 10
+				height: 9
+				font.family: "sans serif"
+				objectName: "status"
+				id: status
+				states:[
+					State {
+						name: "error"
+						PropertyChanges {
+							target: status
+							color: "red"
+						}
+						PropertyChanges {
+							target: statusContainer
+							color: "#fffcd5"
+						}
+					}
+				]
+			}
+
+			Text {
+				visible: false
+				font.pointSize: 9
+				height: 9
+				text: qsTr("See log.")
+				font.family: "Monospace"
+				objectName: "status"
+				id: logslink
+				color: "#8c8a74"
+				MouseArea {
+					anchors.fill: parent
+					onClicked: {
+						mainContent.ensureRightView();
+					}
+				}
+			}
+		}
+	}
+
+	Rectangle
+	{
+		color: "transparent"
+		width: 100
+		height: parent.height
+		anchors.top: statusHeader.top
+		anchors.right: statusHeader.right
+		RowLayout
+		{
+			anchors.fill: parent
+			Rectangle {
+				color: "transparent"
+				anchors.fill: parent
+				Button
+				{
+					anchors.right: parent.right
+					anchors.rightMargin: 7
+					anchors.verticalCenter: parent.verticalCenter
+					id: debugImg
+					iconSource: "qrc:/qml/img/bugiconinactive.png"
+					action: debugRunActionIcon
+				}
+				Action {
+					id: debugRunActionIcon
+					onTriggered: {
+						mainContent.ensureRightView();
+						clientModel.debugDeployment();
+					}
+					enabled: false
+				}
+			}
+		}
+	}
+}
diff --git a/mix/qml/StepActionImage.qml b/mix/qml/StepActionImage.qml
new file mode 100644
index 000000000..fd6a46521
--- /dev/null
+++ b/mix/qml/StepActionImage.qml
@@ -0,0 +1,39 @@
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Layouts 1.0
+import QtQuick.Controls.Styles 1.1
+
+
+Rectangle {
+	id: buttonActionContainer
+	property string disableStateImg
+	property string enabledStateImg
+	signal clicked
+
+	function enabled(state)
+	{
+		buttonAction.enabled = state;
+		if (state)
+			debugImg.iconSource = enabledStateImg;
+		else
+			debugImg.iconSource = disableStateImg;
+	}
+
+	color: "transparent"
+	Button
+	{
+		anchors.fill: parent
+		id: debugImg
+		iconSource: enabledStateImg
+		action: buttonAction
+		width: buttonActionContainer.width - 3
+		height: buttonActionContainer.height
+	}
+
+	Action {
+		id: buttonAction
+		onTriggered: {
+			buttonActionContainer.clicked();
+		}
+	}
+}
diff --git a/mix/qml/img/bugiconactive.png b/mix/qml/img/bugiconactive.png
new file mode 100644
index 000000000..ec72938a4
Binary files /dev/null and b/mix/qml/img/bugiconactive.png differ
diff --git a/mix/qml/img/bugiconinactive.png b/mix/qml/img/bugiconinactive.png
new file mode 100644
index 000000000..976175b06
Binary files /dev/null and b/mix/qml/img/bugiconinactive.png differ
diff --git a/mix/qml/img/closedtriangleindicator.png b/mix/qml/img/closedtriangleindicator.png
new file mode 100644
index 000000000..440adb711
Binary files /dev/null and b/mix/qml/img/closedtriangleindicator.png differ
diff --git a/mix/qml/img/jumpintoback.png b/mix/qml/img/jumpintoback.png
new file mode 100644
index 000000000..cf5e10007
Binary files /dev/null and b/mix/qml/img/jumpintoback.png differ
diff --git a/mix/qml/img/jumpintobackdisabled.png b/mix/qml/img/jumpintobackdisabled.png
new file mode 100644
index 000000000..a66b5ba41
Binary files /dev/null and b/mix/qml/img/jumpintobackdisabled.png differ
diff --git a/mix/qml/img/jumpintoforward.png b/mix/qml/img/jumpintoforward.png
new file mode 100644
index 000000000..b47f741eb
Binary files /dev/null and b/mix/qml/img/jumpintoforward.png differ
diff --git a/mix/qml/img/jumpintoforwarddisabled.png b/mix/qml/img/jumpintoforwarddisabled.png
new file mode 100644
index 000000000..07364cdde
Binary files /dev/null and b/mix/qml/img/jumpintoforwarddisabled.png differ
diff --git a/mix/qml/img/jumpoutback.png b/mix/qml/img/jumpoutback.png
new file mode 100644
index 000000000..d619ff082
Binary files /dev/null and b/mix/qml/img/jumpoutback.png differ
diff --git a/mix/qml/img/jumpoutbackdisabled.png b/mix/qml/img/jumpoutbackdisabled.png
new file mode 100644
index 000000000..893af6998
Binary files /dev/null and b/mix/qml/img/jumpoutbackdisabled.png differ
diff --git a/mix/qml/img/jumpoutforward.png b/mix/qml/img/jumpoutforward.png
new file mode 100644
index 000000000..29745f756
Binary files /dev/null and b/mix/qml/img/jumpoutforward.png differ
diff --git a/mix/qml/img/jumpoutforwarddisabled.png b/mix/qml/img/jumpoutforwarddisabled.png
new file mode 100644
index 000000000..c7243c859
Binary files /dev/null and b/mix/qml/img/jumpoutforwarddisabled.png differ
diff --git a/mix/qml/img/jumpoverback.png b/mix/qml/img/jumpoverback.png
new file mode 100644
index 000000000..371e02245
Binary files /dev/null and b/mix/qml/img/jumpoverback.png differ
diff --git a/mix/qml/img/jumpoverbackdisabled.png b/mix/qml/img/jumpoverbackdisabled.png
new file mode 100644
index 000000000..73fc6358e
Binary files /dev/null and b/mix/qml/img/jumpoverbackdisabled.png differ
diff --git a/mix/qml/img/jumpoverforward.png b/mix/qml/img/jumpoverforward.png
new file mode 100644
index 000000000..690d3ab49
Binary files /dev/null and b/mix/qml/img/jumpoverforward.png differ
diff --git a/mix/qml/img/opentriangleindicator.png b/mix/qml/img/opentriangleindicator.png
new file mode 100644
index 000000000..591a932e0
Binary files /dev/null and b/mix/qml/img/opentriangleindicator.png differ
diff --git a/mix/qml/js/Debugger.js b/mix/qml/js/Debugger.js
index d516abde6..43b15f27e 100644
--- a/mix/qml/js/Debugger.js
+++ b/mix/qml/js/Debugger.js
@@ -4,11 +4,22 @@
 //statesList => ListView
 
 var currentSelectedState = null;
+var jumpStartingPoint = null;
 function init()
 {
+	if (debugStates === undefined)
+		return;
+
+	statesSlider.maximumValue = debugStates.length - 1;
+	statesSlider.value = 0;
+	statesList.model = humanReadableExecutionCode;
 	currentSelectedState = 0;
 	select(currentSelectedState);
-	displayReturnValue();
+
+	jumpOutBackAction.enabled(false);
+	jumpIntoBackAction.enabled(false);
+	jumpIntoForwardAction.enabled(false);
+	jumpOutForwardAction.enabled(false);
 }
 
 function moveSelection(incr)
@@ -16,25 +27,34 @@ function moveSelection(incr)
 	if (currentSelectedState + incr >= 0)
 	{
 		if (currentSelectedState + incr < debugStates.length)
-		{
 			select(currentSelectedState + incr);
-		}
-		else
-		{
-			endOfDebug();
-		}
+		statesSlider.value = currentSelectedState;
 	}
 }
 
 function select(stateIndex)
 {
+	var codeLine = codeStr(stateIndex);
 	var state = debugStates[stateIndex];
-	var codeStr = bytesCodeMapping.getValue(state.curPC);
-	highlightSelection(codeStr);
+	highlightSelection(codeLine);
 	currentSelectedState = stateIndex;
 	completeCtxInformation(state);
-	levelList.model = state.levels;
-	levelList.update();
+
+	if (state.instruction === "JUMP")
+		jumpIntoForwardAction.enabled(true);
+	else
+		jumpIntoForwardAction.enabled(false);
+
+	if (state.instruction === "JUMPDEST")
+		jumpIntoBackAction.enabled(true);
+	else
+		jumpIntoBackAction.enabled(false);
+}
+
+function codeStr(stateIndex)
+{
+	var state = debugStates[stateIndex];
+	return bytesCodeMapping.getValue(state.curPC);
 }
 
 function highlightSelection(index)
@@ -44,21 +64,15 @@ function highlightSelection(index)
 
 function completeCtxInformation(state)
 {
-	debugStackTxt.text = state.debugStack;
-	debugStorageTxt.text = state.debugStorage;
-	debugMemoryTxt.text = state.debugMemory;
-	debugCallDataTxt.text = state.debugCallData;
-	headerInfoLabel.text = state.headerInfo
-}
+	currentStep.update(state.step);
+	mem.update(state.newMemSize + " " + qsTr("words"));
+	stepCost.update(state.gasCost);
+	gasSpent.update(debugStates[0].gas - state.gas);
 
-function endOfDebug()
-{
-	var state = debugStates[debugStates.length - 1];
-	debugStorageTxt.text = "";
-	debugCallDataTxt.text = "";
-	debugStackTxt.text = "";
-	debugMemoryTxt.text = state.endOfDebug;
-	headerInfoLabel.text = "EXIT  |  GAS: " + state.gasLeft;
+	stack.listModel = state.debugStack;
+	storage.listModel = state.debugStorage;
+	memoryDump.listModel = state.debugMemory;
+	callDataDump.listModel = state.debugCallData;
 }
 
 function displayReturnValue()
@@ -66,3 +80,86 @@ function displayReturnValue()
 	headerReturnList.model = contractCallReturnParameters;
 	headerReturnList.update();
 }
+
+function stepOutBack()
+{
+	if (jumpStartingPoint != null)
+	{
+		select(jumpStartingPoint);
+		jumpStartingPoint = null;
+		jumpOutBackAction.enabled(false);
+		jumpOutForwardAction.enabled(false);
+	}
+}
+
+function stepIntoBack()
+{
+	moveSelection(-1);
+}
+
+function stepOverBack()
+{
+	var state = debugStates[currentSelectedState];
+	if (state.instruction === "JUMPDEST")
+	{
+		for (var k = currentSelectedState; k > 0; k--)
+		{
+			var line = bytesCodeMapping.getValue(debugStates[k].curPC);
+			if (line === statesList.currentIndex - 2)
+			{
+				select(k);
+				break;
+			}
+		}
+	}
+	else
+		moveSelection(-1);
+}
+
+function stepOverForward()
+{
+	var state = debugStates[currentSelectedState];
+	if (state.instruction === "JUMP")
+	{
+		for (var k = currentSelectedState; k < debugStates.length; k++)
+		{
+			var line = bytesCodeMapping.getValue(debugStates[k].curPC);
+			if (line === statesList.currentIndex + 2)
+			{
+				select(k);
+				break;
+			}
+		}
+	}
+	else
+		moveSelection(1);
+}
+
+function stepIntoForward()
+{
+	var state = debugStates[currentSelectedState];
+	if (state.instruction === "JUMP")
+	{
+		jumpStartingPoint = currentSelectedState;
+		moveSelection(1);
+		jumpOutBackAction.enabled(true);
+		jumpOutForwardAction.enabled(true);
+	}
+}
+
+function stepOutForward()
+{
+	if (jumpStartingPoint != null)
+	{
+		stepOutBack();
+		stepOverForward();
+		jumpOutBackAction.enabled(false);
+		jumpOutForwardAction.enabled(false);
+	}
+}
+
+function jumpTo(value)
+{
+	currentSelectedState = value;
+	select(currentSelectedState);
+}
diff --git a/mix/qml/js/ErrorLocationFormater.js b/mix/qml/js/ErrorLocationFormater.js
new file mode 100644
index 000000000..8c83e6b15
--- /dev/null
+++ b/mix/qml/js/ErrorLocationFormater.js
@@ -0,0 +1,27 @@
+function formatLocation(raw, shortMessage)
+{
+	var splitted = raw.split(':');
+	if (!shortMessage)
+		return qsTr("Error in line ") + splitted[1] + ", " + qsTr("character ") + splitted[2];
+	else
+		return "L" + splitted[1] + "," + "C" + splitted[2];
+}
+
+function extractErrorInfo(raw, shortMessage)
+{
+	var _return = {};
+	var detail = raw.split('\n')[0];
+	var reg = detail.match(/:\d+:\d+:/g);
+	if (reg !== null)
+	{
+		_return.errorLocation = ErrorLocationFormater.formatLocation(reg[0], shortMessage);
+		_return.errorDetail = detail.replace(reg[0], "");
+	}
+	else
+	{
+		_return.errorLocation = "";
+		_return.errorDetail = detail;
+	}
+	_return.errorLine = raw.split('\n')[1];
+	return _return;
+}
diff --git a/mix/qml/main.qml b/mix/qml/main.qml
index 94d061639..469a6d1f4 100644
--- a/mix/qml/main.qml
+++ b/mix/qml/main.qml
@@ -38,13 +38,20 @@ ApplicationWindow {
 			MenuItem { action: debugRunAction }
 			MenuItem { action: debugResetStateAction }
 		}
+		Menu {
+			title: qsTr("Windows")
+			MenuItem { action: showHideRightPanel }
+		}
 	}
+
 	Component.onCompleted: {
 		setX(Screen.width / 2 - width / 2);
 		setY(Screen.height / 2 - height / 2);
 	}
 
 	MainContent {
+		id: mainContent;
+		anchors.fill: parent
 	}
 
 	ModalDialog {
@@ -68,8 +75,11 @@ ApplicationWindow {
 		id: debugRunAction
 		text: "&Run"
 		shortcut: "F5"
+		onTriggered: {
+			mainContent.ensureRightView();
+			clientModel.debugDeployment();
+		}
 		enabled: codeModel.hasContract && !clientModel.running;
-		onTriggered: clientModel.debugDeployment();
 	}
 
 	Action {
@@ -79,6 +89,13 @@ ApplicationWindow {
 		onTriggered: clientModel.resetState();
 	}
 
+	Action {
+		id: showHideRightPanel
+		text: "Show/Hide right view"
+		shortcut: "F7"
+		onTriggered: mainContent.toggleRightView();
+	}
+
 	Action {
 		id: createProjectAction
 		text: qsTr("&New project")