QmlOutline: Show id beside type name

Show id in addition to type string, but with a lighter text color

src/plugins/qmljseditor/qmljsoutlinetreeview.cpp

 #include "qmljsoutlinetreeview.h"
+#include "qmloutlinemodel.h"
+
+#include <QtCore/QDebug>
+#include <QtGui/QApplication>
+#include <QtGui/QPainter>
 
 namespace QmlJSEditor {
 namespace Internal {
 
+QmlJSOutlineItemDelegate::QmlJSOutlineItemDelegate(QObject *parent) :
+    QStyledItemDelegate(parent)
+{
+}
+
+QSize QmlJSOutlineItemDelegate::sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const
+{
+    QStyleOptionViewItemV4 opt = option;
+    initStyleOption(&opt, index);
+
+    const QString annotation = index.data(QmlOutlineModel::AnnotationRole).toString();
+    if (!annotation.isEmpty())
+        opt.text += "   " + annotation;
+
+    QStyle *style = QApplication::style();
+    return style->sizeFromContents(QStyle::CT_ItemViewItem, &opt, QSize(), 0);
+}
+
+void QmlJSOutlineItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option,
+           const QModelIndex &index) const
+{
+    QStyleOptionViewItemV4 opt = option;
+    initStyleOption(&opt, index);
+
+    if (opt.state & QStyle::State_Selected)
+        painter->fillRect(opt.rect, option.palette.highlight());
+
+    const QString typeString = index.data(Qt::DisplayRole).toString();
+    const QString annotationString = index.data(QmlOutlineModel::AnnotationRole).toString();
+
+    QStyle *style = QApplication::style();
+
+    // paint type name
+    QRect typeRect = style->itemTextRect(opt.fontMetrics, opt.rect, Qt::AlignLeft, true, typeString);
+
+    QPalette::ColorRole textColorRole = QPalette::Text;
+    if (option.state & QStyle::State_Selected) {
+        textColorRole = QPalette::HighlightedText;
+    }
+
+    style->drawItemText(painter, typeRect, Qt::AlignLeft, opt.palette, true, typeString, textColorRole);
+
+    // paint annotation (e.g. id)
+    if (!annotationString.isEmpty()) {
+        QRect annotationRect = style->itemTextRect(opt.fontMetrics, opt.rect, Qt::AlignLeft, true,
+                                                   annotationString);
+        static int space = opt.fontMetrics.width("   ");
+        annotationRect.adjust(typeRect.width() + space, 0, typeRect.width() + space, 0);
+
+        QPalette disabledPalette(opt.palette);
+        disabledPalette.setCurrentColorGroup(QPalette::Disabled);
+        style->drawItemText(painter, annotationRect, Qt::AlignLeft, disabledPalette, true,
+                            annotationString, textColorRole);
+    }
+}
+
 QmlJSOutlineTreeView::QmlJSOutlineTreeView(QWidget *parent) :
     Utils::NavigationTreeView(parent)
 {
@@ -14,6 +75,9 @@ QmlJSOutlineTreeView::QmlJSOutlineTreeView(QWidget *parent) :
     viewport()->setAcceptDrops(true);
     setDropIndicatorShown(true);
     setDragDropMode(InternalMove);
+
+    QmlJSOutlineItemDelegate *itemDelegate = new QmlJSOutlineItemDelegate(this);
+    setItemDelegateForColumn(0, itemDelegate);
 }
 
 } // namespace Internal

src/plugins/qmljseditor/qmljsoutlinetreeview.h

@@ -2,15 +2,26 @@
 #define QMLJSOUTLINETREEVIEW_H
 
 #include <utils/navigationtreeview.h>
+#include <QtGui/QStyledItemDelegate>
 
 namespace QmlJSEditor {
 namespace Internal {
 
+class QmlJSOutlineItemDelegate : public QStyledItemDelegate
+{
+public:
+    explicit QmlJSOutlineItemDelegate(QObject *parent = 0);
+
+    QSize sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const;
+    void paint(QPainter *painter, const QStyleOptionViewItem &option,
+               const QModelIndex &index) const;
+};
+
 class QmlJSOutlineTreeView : public Utils::NavigationTreeView
 {
     Q_OBJECT
 public:
-    QmlJSOutlineTreeView(QWidget *parent = 0);
+    explicit QmlJSOutlineTreeView(QWidget *parent = 0);
 };
 
 } // namespace Internal

src/plugins/qmljseditor/qmloutlinemodel.cpp

@@ -59,6 +59,16 @@ int QmlOutlineItem::type() const
     return UserType;
 }
 
+QString QmlOutlineItem::annotation() const
+{
+    return data(QmlOutlineModel::AnnotationRole).value<QString>();
+}
+
+void QmlOutlineItem::setAnnotation(const QString &id)
+{
+    setData(QVariant::fromValue(id), QmlOutlineModel::AnnotationRole);
+}
+
 QmlJS::AST::SourceLocation QmlOutlineItem::sourceLocation() const
 {
     return data(QmlOutlineModel::SourceLocationRole).value<QmlJS::AST::SourceLocation>();
@@ -362,12 +372,8 @@ QModelIndex QmlOutlineModel::enterObjectDefinition(AST::UiObjectDefinition *objD
     const QString typeName = asString(objDef->qualifiedTypeNameId);
 
     if (typeName.at(0).isUpper()) {
-        const QString id = getId(objDef);
-        if (!id.isEmpty()) {
-            prototype.setText(id);
-        } else {
-            prototype.setText(typeName);
-        }
+        prototype.setText(typeName);
+        prototype.setAnnotation(getId(objDef));
         if (!m_typeToIcon.contains(typeName)) {
             m_typeToIcon.insert(typeName, getIcon(objDef));
         }

src/plugins/qmljseditor/qmloutlinemodel.h

@@ -30,9 +30,13 @@ public:
     QVariant data(int role = Qt::UserRole + 1) const;
     int type() const;
 
+    QString annotation() const;
+    void setAnnotation(const QString &id);
+
     QmlJS::AST::SourceLocation sourceLocation() const;
     void setSourceLocation(const QmlJS::AST::SourceLocation &location);
 
+
     QmlJS::AST::Node *node() const;
     void setNode(QmlJS::AST::Node *node);
 
@@ -58,6 +62,7 @@ public:
     enum CustomRoles {
         SourceLocationRole = Qt::UserRole + 1,
         ItemTypeRole,
+        AnnotationRole
     };
 
     enum ItemTypes {