QML Observer: Made toolbar and crumble path look better

Now the style is something similar to Qt Creator's default coloring.

src/libs/qmljsdebugger/editor/crumblepath.cpp

@@ -57,11 +57,10 @@ private:
 CrumblePathButton::CrumblePathButton(const QString &title, QWidget *parent)
     : QPushButton(title, parent)
 {
-    setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Fixed);
+    setSizePolicy(QSizePolicy::MinimumExpanding, QSizePolicy::Fixed);
     setToolTip(title);
     setMinimumHeight(24);
     setMaximumHeight(24);
-
     setStyleSheet(lastSegmentSheet(true));
 }
 
@@ -119,10 +118,14 @@ void CrumblePathButton::setSegmentType(int type)
 // CrumblePath
 //
 CrumblePath::CrumblePath(QWidget *parent) :
-    QWidget(parent)
+    QWidget(parent), m_background(new QWidget(this))
 {
-    setMinimumHeight(24);
-    setMaximumHeight(24);
+    setMinimumHeight(25);
+    setMaximumHeight(25);
+    setSizePolicy(QSizePolicy::MinimumExpanding, QSizePolicy::Minimum);
+
+    m_background->setStyleSheet("QWidget { background-color:#2d2d2d;}");
+    m_background->setSizePolicy(QSizePolicy::MinimumExpanding, QSizePolicy::Preferred);
 }
 
 CrumblePath::~CrumblePath()
@@ -159,12 +162,13 @@ void CrumblePath::popElement()
     last->setParent(0);
     last->deleteLater();
 
-    int segType = CrumblePathButton::MiddleSegment;
+    int segType = CrumblePathButton::MiddleSegment | CrumblePathButton::LastSegment;
     if (!m_buttons.isEmpty()) {
         if (m_buttons.length() == 1)
             segType = CrumblePathButton::FirstSegment | CrumblePathButton::LastSegment;
         m_buttons.last()->setSegmentType(segType);
     }
+    resizeButtons();
 }
 
 void CrumblePath::clear()
@@ -181,33 +185,45 @@ void CrumblePath::resizeEvent(QResizeEvent *)
 
 void CrumblePath::resizeButtons()
 {
-    int buttonWidth = 0;
-    if (m_buttons.length() > 1) {
+    int buttonMinWidth = 0;
+    int buttonMaxWidth = 0;
+    int totalWidthLeft = width();
+
+    if (m_buttons.length() >= 1) {
         QPoint nextElementPosition(0,0);
 
         m_buttons[0]->raise();
         // rearrange all items so that the first item is on top (added last).
         for(int i = 0; i < m_buttons.length() ; ++i) {
-            QWidget *button = m_buttons[i];
-            buttonWidth = (width() + ArrowBorderSize * m_buttons.length()) / m_buttons.length();
-            button->setMaximumWidth(buttonWidth);
-            button->setGeometry(QRect(nextElementPosition, QSize(buttonWidth, button->height())));
+            CrumblePathButton *button = m_buttons[i];
+
+            QFontMetrics fm(button->font());
+            buttonMinWidth = ArrowBorderSize + fm.width(button->text()) + ArrowBorderSize * 2 ;
+            buttonMaxWidth = (totalWidthLeft + ArrowBorderSize * (m_buttons.length() - i)) / (m_buttons.length() - i);
+
+            if (buttonMinWidth > buttonMaxWidth && i < m_buttons.length() - 1) {
+                buttonMinWidth = buttonMaxWidth;
+            } else if (i > 3 && (i == m_buttons.length() - 1)) {
+                buttonMinWidth = width() - nextElementPosition.x();
+                buttonMaxWidth = buttonMinWidth;
+            }
+
+            button->setMinimumWidth(buttonMinWidth);
+            button->setMaximumWidth(buttonMaxWidth);
+            button->move(nextElementPosition);
 
             nextElementPosition.rx() += button->width() - ArrowBorderSize;
+            totalWidthLeft -= button->width();
 
             button->show();
             if (i > 0)
                 button->stackUnder(m_buttons[i - 1]);
         }
 
-    } else if (m_buttons.length() == 1) {
-        QWidget *button = m_buttons[0];
-        int buttonWidth = 2 * width() / (3 * m_buttons.length());
-
-        button->setMaximumWidth(buttonWidth);
-        button->setGeometry(QRect(QPoint(0, 0), QSize(buttonWidth, button->height())));
-        button->show();
     }
+
+    m_background->setGeometry(0,0, width(), height());
+    m_background->update();
 }
 
 void CrumblePath::mapClickToIndex()

src/libs/qmljsdebugger/editor/editor.qrc

@@ -16,5 +16,6 @@
         <file>images/segment-hover-end.png</file>
         <file>images/segment-hover.png</file>
         <file>images/segment-selected-end.png</file>
+        <file>images/color-picker-hicontrast.png</file>
     </qresource>
 </RCC>

src/libs/qmljsdebugger/editor/qmltoolbar.cpp

@@ -21,7 +21,7 @@ QmlToolbar::QmlToolbar(QWidget *parent) :
     ui->select = new QAction(QIcon(":/qml/images/select.png"), tr("Select"), this);
     ui->selectMarquee = new QAction(QIcon(":/qml/images/select-marquee.png"), tr("Select (Marquee)"), this);
     ui->zoom = new QAction(QIcon(":/qml/images/zoom.png"), tr("Zoom"), this);
-    ui->colorPicker = new QAction(QIcon(":/qml/images/color-picker.png"), tr("Color Picker"), this);
+    ui->colorPicker = new QAction(QIcon(":/qml/images/color-picker-hicontrast.png"), tr("Color Picker"), this);
     ui->toQml = new QAction(QIcon(":/qml/images/to-qml.png"), tr("Apply Changes to QML Viewer"), this);
     ui->fromQml = new QAction(QIcon(":/qml/images/from-qml.png"), tr("Apply Changes to Document"), this);
     ui->designmode->setCheckable(true);
@@ -47,7 +47,7 @@ QmlToolbar::QmlToolbar(QWidget *parent) :
     addSeparator();
     addAction(ui->zoom);
     addAction(ui->colorPicker);
-    addAction(ui->fromQml);
+    //addAction(ui->fromQml);
 
     ui->colorBox = new ToolBarColorBox(this);
     ui->colorBox->setMinimumSize(24, 24);

src/libs/qmljsdebugger/editor/toolbarcolorbox.cpp

@@ -19,7 +19,7 @@ namespace QmlViewer {
 ToolBarColorBox::ToolBarColorBox(QWidget *parent) :
     QLabel(parent)
 {
-    m_copyHexColor = new QAction(tr("Copy"), this);
+    m_copyHexColor = new QAction(QIcon(":/qml/images/color-picker-hicontrast.png"), tr("Copy"), this);
     connect(m_copyHexColor, SIGNAL(triggered()), SLOT(copyColorToClipboard()));
     setScaledContents(false);
 }
@@ -63,7 +63,7 @@ QPixmap ToolBarColorBox::createDragPixmap(int size) const
     QPainter p(&pix);
 
     QColor borderColor1 = QColor(143, 143 ,143);
-    QColor borderColor2 = Qt::white;
+    QColor borderColor2 = QColor(43, 43, 43);
 
     p.setBrush(QBrush(m_color));
     p.setPen(QPen(QBrush(borderColor2),1));

src/libs/qmljsdebugger/include/crumblepath.h

@@ -66,6 +66,7 @@ private:
 
 private:
     QList<CrumblePathButton*> m_buttons;
+    QWidget *m_background;
 };
 
 } // namespace QmlViewer

src/tools/qml/qmlobserver/qml.pri

@@ -21,6 +21,8 @@ SOURCES += $$PWD/qmlruntime.cpp \
 
 RESOURCES += $$PWD/qmlruntime.qrc
 
+OTHER_FILES += toolbarstyle.css
+
 maemo5 {
     QT += dbus
     HEADERS += $$PWD/texteditautoresizer_maemo5.h

src/tools/qml/qmlobserver/qmlruntime.cpp

@@ -588,16 +588,23 @@ QDeclarativeViewer::QDeclarativeViewer(QWidget *parent, Qt::WindowFlags flags)
     canvas = new QmlViewer::QDeclarativeDesignView(this);
     addToolBar(Qt::TopToolBarArea, canvas->toolbar());
 
+    QFile file(":/toolbarstyle.css");
+    file.open(QFile::ReadOnly);
+    QString toolbarStylesheet = QLatin1String(file.readAll());
+
+    canvas->toolbar()->setFloatable(false);
+    canvas->toolbar()->setMovable(false);
+    canvas->toolbar()->setStyleSheet(toolbarStylesheet);
+
     m_centralWidget = new QWidget(this);
     QVBoxLayout *layout = new QVBoxLayout(m_centralWidget);
     layout->setMargin(0);
     layout->setSpacing(0);
     layout->addWidget(canvas->crumblePathWidget());
+    canvas->crumblePathWidget()->setStyleSheet("QWidget { border-bottom: 1px solid black; }");
     layout->addWidget(canvas);
-    canvas->crumblePathWidget()->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Minimum);
     m_centralWidget->setSizePolicy(QSizePolicy::MinimumExpanding, QSizePolicy::MinimumExpanding);
 
-    //canvas->setSizePolicy(Qt:);
     canvas->setAttribute(Qt::WA_OpaquePaintEvent);
     canvas->setAttribute(Qt::WA_NoSystemBackground);
 

src/tools/qml/qmlobserver/qmlruntime.qrc

 <RCC>
-    <qresource prefix="/" >
+    <qresource prefix="/">
         <file>content/Browser.qml</file>
         <file>content/images/up.png</file>
         <file>content/images/folder.png</file>
         <file>content/images/titlebar.sci</file>
         <file>content/images/titlebar.png</file>
+        <file>toolbarstyle.css</file>
     </qresource>
 </RCC>

src/tools/qml/qmlobserver/toolbarstyle.css

+QToolBar {
+    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgba(85, 85, 85, 255), stop:0.3 rgba(79, 79, 79, 255), stop:0.301 rgba(70, 70, 70, 255), stop:1 rgba(57, 57, 57, 255));
+    color: #EEEEEE;
+}
+QToolBar::separator {
+    width: 1px;
+    border-right: 1px solid #6d6d6d;
+    background: #414141;
+}
+QToolButton {
+    border: none;
+    padding-left:4px;
+    padding-right:4px;
+    padding-top:5px;
+    padding-bottom:5px;
+}
+QToolButton:checked {
+    border: none;
+    padding-left:4px;
+    padding-right:4px;
+    padding-top:5px;
+    padding-bottom:5px;
+    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgba(65, 65, 65, 255), stop:0.3 rgba(59, 59, 59, 255), stop:0.301 rgba(50, 50, 50, 255), stop:1 rgba(37, 37, 37, 255));
+}
+QToolButton:hover {
+    border: none;
+    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgba(105, 105, 105, 255), stop:0.3 rgba(99, 99, 99, 255), stop:0.301 rgba(90, 90, 90, 255), stop:1 rgba(77, 77, 77, 255));
+}