mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 17:27:35 +00:00
Browser+LibWeb: Add an Element size preview widget to inspector
This Adds an element size preview widget to the inspector widget in a new tab. This functions similar to chrome and firefox and shows the margin, border, padding, and content size of the selected element in the inspector. The colors for the size preview widget are taken from the chrome browser.
This commit is contained in:
parent
3b22fd9a9f
commit
39a5076f40
14 changed files with 234 additions and 18 deletions
31
Userland/Applications/Browser/ElementSizePreviewWidget.h
Normal file
31
Userland/Applications/Browser/ElementSizePreviewWidget.h
Normal file
|
@ -0,0 +1,31 @@
|
|||
/*
|
||||
* Copyright (c) 2022, Michiel Vrins
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#pragma once
|
||||
|
||||
#include <LibGUI/AbstractScrollableWidget.h>
|
||||
#include <LibGUI/Frame.h>
|
||||
#include <LibGfx/Rect.h>
|
||||
#include <LibWeb/Layout/BoxModelMetrics.h>
|
||||
|
||||
namespace Browser {
|
||||
|
||||
class ElementSizePreviewWidget final : public GUI::AbstractScrollableWidget {
|
||||
C_OBJECT(ElementSizePreviewWidget)
|
||||
|
||||
public:
|
||||
void set_box_model(Web::Layout::BoxModelMetrics box_model) { m_node_box_sizing = box_model; };
|
||||
void set_node_content_height(float height) { m_node_content_height = height; };
|
||||
void set_node_content_width(float width) { m_node_content_width = width; };
|
||||
|
||||
private:
|
||||
virtual void paint_event(GUI::PaintEvent&) override;
|
||||
Web::Layout::BoxModelMetrics m_node_box_sizing;
|
||||
float m_node_content_height = 0;
|
||||
float m_node_content_width = 0;
|
||||
};
|
||||
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue