QML Observer & Inspector: Improved toolbars

Animation play/pause buttons are now merged on observer toolbar. Also, a
bugfix to inspector toolbar.

share/qtcreator/qmljsdebugger/editor/qmltoolbar.cpp

@@ -1,6 +1,7 @@
 #include <QLabel>
 #include <QIcon>
 #include <QAction>
+#include <QMenu>
 
 #include "qmltoolbar.h"
 #include "toolbarcolorbox.h"
@@ -9,15 +10,19 @@
 
 namespace QmlViewer {
 
-QmlToolbar::QmlToolbar(QWidget *parent) :
+QmlToolbar::QmlToolbar(QWidget *parent)
-    QToolBar(parent),
+    : QToolBar(parent)
-    m_emitSignals(true),
+    , m_emitSignals(true)
-    m_isRunning(false),
+    , m_isRunning(false)
-    ui(new Ui)
+    , m_animationSpeed(1.0f)
+    , m_previousAnimationSpeed(0.0f)
+    , ui(new Ui)
 {
+    ui->playIcon = QIcon(QLatin1String(":/qml/images/play-24.png"));
+    ui->pauseIcon = QIcon(QLatin1String(":/qml/images/pause-24.png"));
+
     ui->designmode = new QAction(QIcon(QLatin1String(":/qml/images/observermode-24.png")), tr("Observer Mode"), this);
-    ui->play = new QAction(QIcon(QLatin1String(":/qml/images/play-24.png")), tr("Play"), this);
+    ui->play = new QAction(ui->pauseIcon, tr("Play/Pause Animations"), this);
-    ui->pause = new QAction(QIcon(QLatin1String(":/qml/images/pause-24.png")), tr("Pause"), this);
     ui->select = new QAction(QIcon(QLatin1String(":/qml/images/select-24.png")), tr("Select"), this);
     ui->selectMarquee = new QAction(QIcon(QLatin1String(":/qml/images/select-marquee-24.png")), tr("Select (Marquee)"), this);
     ui->zoom = new QAction(QIcon(QLatin1String(":/qml/images/zoom-24.png")), tr("Zoom"), this);
@@ -27,9 +32,7 @@ QmlToolbar::QmlToolbar(QWidget *parent) :
     ui->designmode->setCheckable(true);
     ui->designmode->setChecked(false);
 
-    ui->play->setCheckable(true);
+    ui->play->setCheckable(false);
-    ui->play->setChecked(true);
-    ui->pause->setCheckable(true);
     ui->select->setCheckable(true);
     ui->selectMarquee->setCheckable(true);
     ui->zoom->setCheckable(true);
@@ -39,7 +42,6 @@ QmlToolbar::QmlToolbar(QWidget *parent) :
 
     addAction(ui->designmode);
     addAction(ui->play);
-    addAction(ui->pause);
     addSeparator();
 
     addAction(ui->select);
@@ -57,12 +59,43 @@ QmlToolbar::QmlToolbar(QWidget *parent) :
 
     setWindowFlags(Qt::Tool);
 
+    QMenu *playSpeedMenu = new QMenu(this);
+    QActionGroup *playSpeedMenuActions = new QActionGroup(this);
+    playSpeedMenuActions->setExclusive(true);
+    playSpeedMenu->addAction(tr("Animation Speed"));
+    playSpeedMenu->addSeparator();
+    ui->defaultAnimSpeedAction = playSpeedMenu->addAction(tr("1x"), this, SLOT(changeToDefaultAnimSpeed()));
+    ui->defaultAnimSpeedAction->setCheckable(true);
+    ui->defaultAnimSpeedAction->setChecked(true);
+    playSpeedMenuActions->addAction(ui->defaultAnimSpeedAction);
+
+    ui->halfAnimSpeedAction = playSpeedMenu->addAction(tr("0.5x"), this, SLOT(changeToHalfAnimSpeed()));
+    ui->halfAnimSpeedAction->setCheckable(true);
+    playSpeedMenuActions->addAction(ui->halfAnimSpeedAction);
+
+    ui->fourthAnimSpeedAction = playSpeedMenu->addAction(tr("0.25x"), this, SLOT(changeToFourthAnimSpeed()));
+    ui->fourthAnimSpeedAction->setCheckable(true);
+    playSpeedMenuActions->addAction(ui->fourthAnimSpeedAction);
+
+    ui->eighthAnimSpeedAction = playSpeedMenu->addAction(tr("0.125x"), this, SLOT(changeToEighthAnimSpeed()));
+    ui->eighthAnimSpeedAction->setCheckable(true);
+    playSpeedMenuActions->addAction(ui->eighthAnimSpeedAction);
+
+    ui->tenthAnimSpeedAction = playSpeedMenu->addAction(tr("0.1x"), this, SLOT(changeToTenthAnimSpeed()));
+    ui->tenthAnimSpeedAction->setCheckable(true);
+    playSpeedMenuActions->addAction(ui->tenthAnimSpeedAction);
+
+    ui->menuPauseAction = playSpeedMenu->addAction(tr("Pause"), this, SLOT(updatePauseAction()));
+    ui->menuPauseAction->setCheckable(true);
+    ui->menuPauseAction->setIcon(ui->pauseIcon);
+    playSpeedMenuActions->addAction(ui->menuPauseAction);
+    ui->play->setMenu(playSpeedMenu);
+
     connect(ui->designmode, SIGNAL(toggled(bool)), SLOT(setDesignModeBehaviorOnClick(bool)));
 
     connect(ui->colorPicker, SIGNAL(triggered()), SLOT(activateColorPickerOnClick()));
 
     connect(ui->play, SIGNAL(triggered()), SLOT(activatePlayOnClick()));
-    connect(ui->pause, SIGNAL(triggered()), SLOT(activatePauseOnClick()));
 
     connect(ui->zoom, SIGNAL(triggered()), SLOT(activateZoomOnClick()));
     connect(ui->colorPicker, SIGNAL(triggered()), SLOT(activateColorPickerOnClick()));
@@ -78,20 +111,6 @@ QmlToolbar::~QmlToolbar()
     delete ui;
 }
 
-void QmlToolbar::startExecution()
-{
-    m_emitSignals = false;
-    activatePlayOnClick();
-    m_emitSignals = true;
-}
-
-void QmlToolbar::pauseExecution()
-{
-    m_emitSignals = false;
-    activatePauseOnClick();
-    m_emitSignals = true;
-}
-
 void QmlToolbar::activateColorPicker()
 {
     m_emitSignals = false;
@@ -120,6 +139,63 @@ void QmlToolbar::activateZoom()
     m_emitSignals = true;
 }
 
+void QmlToolbar::setAnimationSpeed(qreal slowdownFactor)
+{
+    m_emitSignals = false;
+    if (slowdownFactor != 0) {
+        m_animationSpeed = slowdownFactor;
+
+        if (slowdownFactor == 1.0f) {
+            ui->defaultAnimSpeedAction->setChecked(true);
+        } else if (slowdownFactor == 2.0f) {
+            ui->halfAnimSpeedAction->setChecked(true);
+        } else if (slowdownFactor == 4.0f) {
+            ui->fourthAnimSpeedAction->setChecked(true);
+        } else if (slowdownFactor == 8.0f) {
+            ui->eighthAnimSpeedAction->setChecked(true);
+        } else if (slowdownFactor == 10.0f) {
+            ui->tenthAnimSpeedAction->setChecked(true);
+        }
+        updatePlayAction();
+    } else {
+        ui->menuPauseAction->setChecked(true);
+        updatePauseAction();
+    }
+
+    m_emitSignals = true;
+}
+
+void QmlToolbar::changeToDefaultAnimSpeed()
+{
+    m_animationSpeed = 1.0f;
+    updatePlayAction();
+}
+
+void QmlToolbar::changeToHalfAnimSpeed()
+{
+    m_animationSpeed = 2.0f;
+    updatePlayAction();
+}
+
+void QmlToolbar::changeToFourthAnimSpeed()
+{
+    m_animationSpeed = 4.0f;
+    updatePlayAction();
+}
+
+void QmlToolbar::changeToEighthAnimSpeed()
+{
+    m_animationSpeed = 8.0f;
+    updatePlayAction();
+}
+
+void QmlToolbar::changeToTenthAnimSpeed()
+{
+    m_animationSpeed = 10.0f;
+    updatePlayAction();
+}
+
+
 void QmlToolbar::setDesignModeBehavior(bool inDesignMode)
 {
     m_emitSignals = false;
@@ -131,7 +207,6 @@ void QmlToolbar::setDesignModeBehavior(bool inDesignMode)
 void QmlToolbar::setDesignModeBehaviorOnClick(bool checked)
 {
     ui->play->setEnabled(checked);
-    ui->pause->setEnabled(checked);
     ui->select->setEnabled(checked);
     ui->selectMarquee->setEnabled(checked);
     ui->zoom->setEnabled(checked);
@@ -150,24 +225,30 @@ void QmlToolbar::setColorBoxColor(const QColor &color)
 
 void QmlToolbar::activatePlayOnClick()
 {
-    ui->pause->setChecked(false);
+    if (m_isRunning) {
-    ui->play->setChecked(true);
+        updatePauseAction();
-    if (!m_isRunning) {
+    } else {
-        m_isRunning = true;
+        updatePlayAction();
-        if (m_emitSignals)
-            emit executionStarted();
     }
 }
 
-void QmlToolbar::activatePauseOnClick()
+void QmlToolbar::updatePlayAction()
 {
-    ui->play->setChecked(false);
+    m_isRunning = true;
-    ui->pause->setChecked(true);
+    ui->play->setIcon(ui->pauseIcon);
-    if (m_isRunning) {
+    if (m_animationSpeed != m_previousAnimationSpeed)
-        m_isRunning = false;
+        m_previousAnimationSpeed = m_animationSpeed;
+
     if (m_emitSignals)
-            emit executionPaused();
+        emit animationSpeedChanged(m_animationSpeed);
 }
+
+void QmlToolbar::updatePauseAction()
+{
+    m_isRunning = false;
+    ui->play->setIcon(ui->playIcon);
+    if (m_emitSignals)
+        emit animationSpeedChanged(0.0f);
 }
 
 void QmlToolbar::activateColorPickerOnClick()

share/qtcreator/qmljsdebugger/editor/qmltoolbar.h

@@ -2,6 +2,7 @@
 #define QMLTOOLBAR_H
 
 #include <QToolBar>
+#include <QIcon>
 #include "qmlviewerconstants.h"
 
 namespace QmlViewer {
@@ -19,16 +20,14 @@ public:
 public slots:
     void setDesignModeBehavior(bool inDesignMode);
     void setColorBoxColor(const QColor &color);
-    void startExecution();
-    void pauseExecution();
     void activateColorPicker();
     void activateSelectTool();
     void activateMarqueeSelectTool();
     void activateZoom();
+    void setAnimationSpeed(qreal slowdownFactor = 0.0f);
 
 signals:
-    void executionStarted();
+    void animationSpeedChanged(qreal slowdownFactor = 1.0f);
-    void executionPaused();
 
     void designModeBehaviorChanged(bool inDesignMode);
     void colorPickerSelected();
@@ -42,7 +41,6 @@ signals:
 private slots:
     void setDesignModeBehaviorOnClick(bool inDesignMode);
     void activatePlayOnClick();
-    void activatePauseOnClick();
     void activateColorPickerOnClick();
     void activateSelectToolOnClick();
     void activateMarqueeSelectToolOnClick();
@@ -51,24 +49,45 @@ private slots:
     void activateFromQml();
     void activateToQml();
 
+    void changeToDefaultAnimSpeed();
+    void changeToHalfAnimSpeed();
+    void changeToFourthAnimSpeed();
+    void changeToEighthAnimSpeed();
+    void changeToTenthAnimSpeed();
+
+    void updatePlayAction();
+    void updatePauseAction();
+
 private:
     class Ui {
     public:
         QAction *designmode;
         QAction *play;
-        QAction *pause;
         QAction *select;
         QAction *selectMarquee;
         QAction *zoom;
         QAction *colorPicker;
         QAction *toQml;
         QAction *fromQml;
+        QIcon playIcon;
+        QIcon pauseIcon;
         ToolBarColorBox *colorBox;
+
+        QAction *defaultAnimSpeedAction;
+        QAction *halfAnimSpeedAction;
+        QAction *fourthAnimSpeedAction;
+        QAction *eighthAnimSpeedAction;
+        QAction *tenthAnimSpeedAction;
+        QAction *menuPauseAction;
     };
 
     bool m_emitSignals;
     bool m_isRunning;
+    qreal m_animationSpeed;
+    qreal m_previousAnimationSpeed;
+
     Constants::DesignTool m_activeTool;
+
     Ui *ui;
 };
 

share/qtcreator/qmljsdebugger/qdeclarativedesignview.cpp

@@ -690,8 +690,7 @@ void QDeclarativeDesignViewPrivate::createToolbar()
     QObject::connect(q, SIGNAL(designModeBehaviorChanged(bool)), toolbar, SLOT(setDesignModeBehavior(bool)));
 
     QObject::connect(toolbar, SIGNAL(designModeBehaviorChanged(bool)), q, SLOT(setDesignModeBehavior(bool)));
-    QObject::connect(toolbar, SIGNAL(executionStarted()), q, SLOT(continueExecution()));
+    QObject::connect(toolbar, SIGNAL(animationSpeedChanged(qreal)), q, SLOT(changeAnimationSpeed(qreal)));
-    QObject::connect(toolbar, SIGNAL(executionPaused()), q, SLOT(pauseExecution()));
     QObject::connect(toolbar, SIGNAL(colorPickerSelected()), q, SLOT(_q_changeToColorPickerTool()));
     QObject::connect(toolbar, SIGNAL(zoomToolSelected()), q, SLOT(_q_changeToZoomTool()));
     QObject::connect(toolbar, SIGNAL(selectToolSelected()), q, SLOT(_q_changeToSingleSelectTool()));
@@ -699,8 +698,8 @@ void QDeclarativeDesignViewPrivate::createToolbar()
 
     QObject::connect(toolbar, SIGNAL(applyChangesFromQmlFileSelected()), q, SLOT(_q_applyChangesFromClient()));
 
-    QObject::connect(q, SIGNAL(executionStarted(qreal)), toolbar, SLOT(startExecution()));
+    QObject::connect(q, SIGNAL(executionStarted(qreal)), toolbar, SLOT(setAnimationSpeed(qreal)));
-    QObject::connect(q, SIGNAL(executionPaused()), toolbar, SLOT(pauseExecution()));
+    QObject::connect(q, SIGNAL(executionPaused()), toolbar, SLOT(setAnimationSpeed()));
 
     QObject::connect(q, SIGNAL(selectToolActivated()), toolbar, SLOT(activateSelectTool()));
 

src/plugins/qmljsinspector/qmlinspectortoolbar.cpp

@@ -167,6 +167,7 @@ void QmlInspectorToolbar::setAnimationSpeed(qreal slowdownFactor)
         }
         updatePlayAction();
     } else {
+        m_menuPauseAction->setChecked(true);
         updatePauseAction();
     }
 
@@ -190,7 +191,7 @@ void QmlInspectorToolbar::createActions(const Core::Context &context)
     m_observerModeAction = new QAction(QIcon(QLatin1String(":/qml/images/observermode.png")), tr("Observer Mode"), this);
 
     m_reloadAction = new QAction(QIcon(QLatin1String(":/qml/images/reload.png")), tr("Reload"), this);
-    m_playAction = new QAction(m_playIcon, tr("Play animations"), this);
+    m_playAction = new QAction(m_pauseIcon, tr("Play/Pause Animations"), this);
     m_selectAction = new QAction(QIcon(QLatin1String(":/qml/images/select-small.png")), tr("Select"), this);
     m_selectMarqueeAction = new QAction(QIcon(QLatin1String(":/qml/images/select-marquee-small.png")), tr("Select (Marquee)"), this);
     m_zoomAction = new QAction(QIcon(QLatin1String(":/qml/images/zoom-small.png")), tr("Zoom"), this);
@@ -366,7 +367,7 @@ void QmlInspectorToolbar::activatePlayOnClick()
 void QmlInspectorToolbar::updatePlayAction()
 {
     m_isRunning = true;
-    m_playAction->setIcon(m_playIcon);
+    m_playAction->setIcon(m_pauseIcon);
     if (m_animationSpeed != m_previousAnimationSpeed)
         m_previousAnimationSpeed = m_animationSpeed;
 
@@ -379,7 +380,7 @@ void QmlInspectorToolbar::updatePlayAction()
 void QmlInspectorToolbar::updatePauseAction()
 {
     m_isRunning = false;
-    m_playAction->setIcon(m_pauseIcon);
+    m_playAction->setIcon(m_playIcon);
     if (m_emitSignals)
         emit animationSpeedChanged(0.0f);