Firefox dev tools like inspect element
An dev tools like inspector would be nice. This could also be a general library to embed in Qt applications.
This code below displays the active focus element, with a red rectangle and some size informations. But I was not able to replicate the hover feature like in firefox.
// main.qml
Window {
id: window
visible: true
FocusOverlay {
window: window
anchors.fill: parent
}
}
// FocusOverlay.qml
import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.14
import QtQuick.Controls.Material 2.3
Item {
id: root
property bool enabled: false
onEnabledChanged: {
if (!enabled)
focusElemtHighlight.destroy()
}
property var focusElemtHighlight: null
property var activeFocusItem: null
property Window window
Component.onCompleted: {
// Cannot be set on startup, crashes because window is null error
window.onActiveFocusItemChanged.connect(root.setActiveFocusItem)
}
Component {
id: overlayItem
Item {
implicitHeight: 100
implicitWidth: 200
property string text: itemName.text
Rectangle {
anchors.fill: itemName
opacity: 0.75
}
Text {
id: itemName
color: Material.primaryTextColor
text: parent.text + " - width: " + parent.width + ", height: " + parent.height
anchors {
left: itemBorder.left
bottom: itemBorder.top
margins: 3
}
}
Rectangle {
id: itemBorder
anchors.fill: parent
y: 99
color: "transparent"
radius: 3
border {
color: Material.color(Material.DeepOrange)
width: 3
}
}
}
}
function setActiveFocusItem() {
root.activeFocusItem = window.activeFocusItem
}
function drawOverlay() {
// Overlay.overlay is null if Window has no focus
if (!enabled || !Overlay.overlay
|| !root.activeFocusItem)
return
if (focusElemtHighlight)
focusElemtHighlight.destroy()
const globalPosition = root.mapFromItem(root.activeFocusItem.parent,
root.activeFocusItem.x,
root.activeFocusItem.y)
focusElemtHighlight = overlayItem.createObject(Overlay.overlay, {
"width": root.activeFocusItem.width,
"height": root.activeFocusItem.height,
"x": globalPosition.x,
"y": globalPosition.y,
"text": root.activeFocusItem.toString()
})
}
Timer {
id: refreshTimer
interval: 100
running: root.enabled
repeat: true
onTriggered: root.drawOverlay()
}
Shortcut {
sequence: "F11"
onActivated: root.enabled = !root.enabled
}
}
Edited by Elias Steurer