Rename <progressbar> element to <progress> for html compatibility

CMake/FileList.cmake

@@ -165,7 +165,7 @@ set(Core_PUB_HDR_FILES
     ${PROJECT_SOURCE_DIR}/Include/RmlUi/Core/Elements/ElementFormControlInput.h
     ${PROJECT_SOURCE_DIR}/Include/RmlUi/Core/Elements/ElementFormControlSelect.h
     ${PROJECT_SOURCE_DIR}/Include/RmlUi/Core/Elements/ElementFormControlTextArea.h
-    ${PROJECT_SOURCE_DIR}/Include/RmlUi/Core/Elements/ElementProgressBar.h
+    ${PROJECT_SOURCE_DIR}/Include/RmlUi/Core/Elements/ElementProgress.h
     ${PROJECT_SOURCE_DIR}/Include/RmlUi/Core/Elements/ElementTabSet.h
     ${PROJECT_SOURCE_DIR}/Include/RmlUi/Core/ElementScroll.h
     ${PROJECT_SOURCE_DIR}/Include/RmlUi/Core/ElementText.h
@@ -291,7 +291,7 @@ set(Core_SRC_FILES
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/ElementFormControlTextArea.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/ElementImage.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/ElementLabel.cpp
-    ${PROJECT_SOURCE_DIR}/Source/Core/Elements/ElementProgressBar.cpp
+    ${PROJECT_SOURCE_DIR}/Source/Core/Elements/ElementProgress.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/ElementTabSet.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/ElementTextSelection.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/InputType.cpp

Include/RmlUi/Core.h

@@ -102,7 +102,7 @@
 #include "Core/Elements/ElementFormControlInput.h"
 #include "Core/Elements/ElementFormControlSelect.h"
 #include "Core/Elements/ElementFormControlTextArea.h"
-#include "Core/Elements/ElementProgressBar.h"
+#include "Core/Elements/ElementProgress.h"
 #include "Core/Elements/ElementTabSet.h"
 
 #endif

Include/RmlUi/Core/Elements/ElementProgressBar.h → Include/RmlUi/Core/Elements/ElementProgress.h

@@ -26,8 +26,8 @@
  *
  */
 
-#ifndef RMLUI_CORE_ELEMENTS_ELEMENTPROGRESSBAR_H
-#define RMLUI_CORE_ELEMENTS_ELEMENTPROGRESSBAR_H
+#ifndef RMLUI_CORE_ELEMENTS_ELEMENTPROGRESS_H
+#define RMLUI_CORE_ELEMENTS_ELEMENTPROGRESS_H
 
 #include "../Header.h"
 #include "../Element.h"
@@ -38,7 +38,7 @@
 namespace Rml {
 
 /**
-	The 'progressbar' element.
+	The 'progress' element.
 
 	The 'value' attribute should be a number [0, 1] where 1 means completely filled.
 
@@ -50,22 +50,22 @@ namespace Rml {
 	Only applies to 'clockwise' or 'counter-clockwise' directions. Defines which edge the
 	circle should start expanding from.
 
-	The progressbar generates a non-dom 'fill' element beneath it which can be used to style
-	the filled part of the bar. The 'fill' element can use the 'fill-image'-property to set
-	an image which will be clipped according to the progressbar value. This property is the
-	only way to style a 'clockwise' or 'counter-clockwise' progressbar.
+	The progress element generates a non-dom 'fill' element beneath it which can be used to 
+	style the filled part of the bar. The 'fill' element can use the 'fill-image'-property
+	to set an image which will be clipped according to the progress value. This property is
+	the only way to style a 'clockwise' or 'counter-clockwise' progress element.
 
  */
 
-class RMLUICORE_API ElementProgressBar : public Element
+class RMLUICORE_API ElementProgress : public Element
 {
 public:
-	RMLUI_RTTI_DefineWithParent(ElementProgressBar, Element)
+	RMLUI_RTTI_DefineWithParent(ElementProgress, Element)
 
-	/// Constructs a new ElementProgressBar. This should not be called directly; use the Factory instead.
+	/// Constructs a new ElementProgress. This should not be called directly; use the Factory instead.
 	/// @param[in] tag The tag the element was declared as in RML.
-	ElementProgressBar(const String& tag);
-	virtual ~ElementProgressBar();
+	ElementProgress(const String& tag);
+	virtual ~ElementProgress();
 
 	/// Returns the value of the progress bar.
 	float GetValue() const;
@@ -104,7 +104,7 @@ private:
 
 	Element* fill;
 
-	// The size of the fill geometry as if fully filled, and the offset relative to the 'progressbar' element.
+	// The size of the fill geometry as if fully filled, and the offset relative to the 'progress' element.
 	Vector2f fill_size, fill_offset;
 
 	// The texture this element is rendering from if the 'fill-image' property is set.

Samples/basic/demo/data/demo.rml

@@ -452,7 +452,7 @@ form h2 {
 	color: #ffd40f;
 	font-size: 1.7em;
 }
-progressbar {
+progress {
 	margin: 10dp 20dp;
 	display: inline-block;
 	vertical-align: middle;
@@ -862,10 +862,10 @@ progressbar {
 		</div>
 		<div id="submit_progress" style="display: none;">
 			<p id="progress_label">&nbsp;</p>
-			<progressbar id="gauge" direction="clockwise" start-edge="bottom" value="0.0">
+			<progress id="gauge" direction="clockwise" start-edge="bottom" value="0.0">
 				<div id="gauge_value">50%</div>
-			</progressbar>
-			<progressbar id="progress_horizontal" direction="right" value="0.0"/>
+			</progress>
+			<progress id="progress_horizontal" direction="right" value="0.0"/>
 			<div id="progress_value">50%</div>
 			<h2>Form output</h2>
 			<div id="form_output"></div>

Source/Core/Elements/ElementLabel.cpp

@@ -100,7 +100,7 @@ Element* ElementLabel::GetTarget()
 
 	if (target_id.empty())
 	{
-		const StringList matching_tags = { "button", "input", "textarea", "progressbar", "select" };
+		const StringList matching_tags = { "button", "input", "textarea", "progress", "progressbar", "select" };
 
 		return TagMatchRecursive(matching_tags, this);
 	}

Source/Core/Elements/ElementProgressBar.cpp → Source/Core/Elements/ElementProgress.cpp

@@ -26,7 +26,7 @@
  *
  */
 
-#include "../../../Include/RmlUi/Core/Elements/ElementProgressBar.h"
+#include "../../../Include/RmlUi/Core/Elements/ElementProgress.h"
 #include "../../../Include/RmlUi/Core/Math.h"
 #include "../../../Include/RmlUi/Core/GeometryUtilities.h"
 #include "../../../Include/RmlUi/Core/PropertyIdSet.h"
@@ -39,8 +39,11 @@
 
 namespace Rml {
 
-ElementProgressBar::ElementProgressBar(const String& tag) : Element(tag), direction(DefaultDirection), start_edge(DefaultStartEdge), fill(nullptr), rect_set(false), geometry(this)
+ElementProgress::ElementProgress(const String& tag) : Element(tag), direction(DefaultDirection), start_edge(DefaultStartEdge), fill(nullptr), rect_set(false), geometry(this)
 {
+	if (tag == "progressbar")
+		Log::Message(Log::LT_WARNING, "Deprecation notice: Element '<progressbar>' renamed to '<progress>', please adjust RML tags accordingly.");
+
 	geometry_dirty = false;
 
 	// Add the fill element as a non-DOM element.
@@ -49,40 +52,40 @@ ElementProgressBar::ElementProgressBar(const String& tag) : Element(tag), direct
 	fill = AppendChild(std::move(fill_element), false);
 }
 
-ElementProgressBar::~ElementProgressBar()
+ElementProgress::~ElementProgress()
 {
 }
 
-float ElementProgressBar::GetValue() const
+float ElementProgress::GetValue() const
 {
 	const float max_value = GetMax();
 	return Math::Clamp(GetAttribute< float >("value", 0.0f), 0.0f, max_value);
 }
 
-float ElementProgressBar::GetMax() const
+float ElementProgress::GetMax() const
 {
 	const float max_value = GetAttribute< float >("max", 1.0f);
 	return max_value <= 0.0f ? 1.0f : max_value;
 }
 
-void ElementProgressBar::SetMax(float max_value)
+void ElementProgress::SetMax(float max_value)
 {
 	SetAttribute("max", max_value);
 }
 
-void ElementProgressBar::SetValue(float in_value)
+void ElementProgress::SetValue(float in_value)
 {
 	SetAttribute("value", in_value);
 }
 
-bool ElementProgressBar::GetIntrinsicDimensions(Vector2f& dimensions, float& /*ratio*/)
+bool ElementProgress::GetIntrinsicDimensions(Vector2f& dimensions, float& /*ratio*/)
 {
 	dimensions.x = 256;
 	dimensions.y = 16;
 	return true;
 }
 
-void ElementProgressBar::OnRender()
+void ElementProgress::OnRender()
 {
 	// Some properties may change geometry without dirtying the layout, eg. opacity.
 	if (geometry_dirty)
@@ -92,7 +95,7 @@ void ElementProgressBar::OnRender()
 	geometry.Render(fill->GetAbsoluteOffset());
 }
 
-void ElementProgressBar::OnAttributeChange(const ElementAttributes& changed_attributes)
+void ElementProgress::OnAttributeChange(const ElementAttributes& changed_attributes)
 {
 	Element::OnAttributeChange(changed_attributes);
 
@@ -137,7 +140,7 @@ void ElementProgressBar::OnAttributeChange(const ElementAttributes& changed_attr
 	}
 }
 
-void ElementProgressBar::OnPropertyChange(const PropertyIdSet& changed_properties)
+void ElementProgress::OnPropertyChange(const PropertyIdSet& changed_properties)
 {
     Element::OnPropertyChange(changed_properties);
 
@@ -151,7 +154,7 @@ void ElementProgressBar::OnPropertyChange(const PropertyIdSet& changed_propertie
 	}
 }
 
-void ElementProgressBar::OnResize()
+void ElementProgress::OnResize()
 {
 	const Vector2f element_size = GetBox().GetSize();
 
@@ -177,17 +180,17 @@ void ElementProgressBar::OnResize()
 	geometry_dirty = true;
 }
 
-void ElementProgressBar::GenerateGeometry()
+void ElementProgress::GenerateGeometry()
 {
 	// Warn the user when using the old approach of adding the 'fill-image' property to the 'fill' element.
 	if (fill->GetLocalProperty(PropertyId::FillImage))
-		Log::Message(Log::LT_WARNING, "Breaking change: The 'fill-image' property now needs to be set on the <progressbar> element, instead of its inner <fill> element. Please update your RCSS source to fix progress bars in this document.");
+		Log::Message(Log::LT_WARNING, "Breaking change: The 'fill-image' property now needs to be set on the <progress> element, instead of its inner <fill> element. Please update your RCSS source to fix progress bars in this document.");
 
 	const float normalized_value = GetValue() / GetMax();
 	Vector2f render_size = fill_size;
 
 	{
-		// Size and offset the fill element depending on the progressbar value.
+		// Size and offset the fill element depending on the progress value.
 		Vector2f offset = fill_offset;
 
 		switch (direction) {
@@ -350,7 +353,7 @@ void ElementProgressBar::GenerateGeometry()
 	}
 }
 
-bool ElementProgressBar::LoadTexture()
+bool ElementProgress::LoadTexture()
 {
 	geometry_dirty = true;
 	rect_set = false;

Source/Core/Factory.cpp

@@ -47,7 +47,7 @@
 #include "../../Include/RmlUi/Core/Elements/ElementFormControlSelect.h"
 #include "../../Include/RmlUi/Core/Elements/ElementFormControlTextArea.h"
 #include "../../Include/RmlUi/Core/Elements/ElementTabSet.h"
-#include "../../Include/RmlUi/Core/Elements/ElementProgressBar.h"
+#include "../../Include/RmlUi/Core/Elements/ElementProgress.h"
 #include "../../Include/RmlUi/Core/Elements/ElementDataGrid.h"
 #include "../../Include/RmlUi/Core/Elements/ElementDataGridExpandButton.h"
 #include "../../Include/RmlUi/Core/Elements/ElementDataGridCell.h"
@@ -150,7 +150,7 @@ struct DefaultInstancers {
 	ElementInstancerGeneric<ElementTextSelection> selection;
 	ElementInstancerGeneric<ElementTabSet> tabset;
 
-	ElementInstancerGeneric<ElementProgressBar> progressbar;
+	ElementInstancerGeneric<ElementProgress> progress;
 
 	ElementInstancerGeneric<ElementDataGrid> datagrid;
 	ElementInstancerGeneric<ElementDataGridExpandButton> datagrid_expand;
@@ -243,7 +243,8 @@ bool Factory::Initialise()
 	RegisterElementInstancer("#selection", &default_instancers->selection);
 	RegisterElementInstancer("tabset", &default_instancers->tabset);
 
-	RegisterElementInstancer("progressbar", &default_instancers->progressbar);
+	RegisterElementInstancer("progress", &default_instancers->progress);
+	RegisterElementInstancer("progressbar", &default_instancers->progress);
 
 	RegisterElementInstancer("datagrid", &default_instancers->datagrid);
 	RegisterElementInstancer("datagridexpand", &default_instancers->datagrid_expand);

Tests/Source/UnitTests/Core.cpp

@@ -60,7 +60,7 @@ static const String document_textures_rml = R"(
 			height: 100px;
 			decorator: image(alien3);
 		}
-		progressbar { 
+		progress { 
 			display: block;
 			width: 50px;
 			height: 50px;
@@ -75,7 +75,7 @@ static const String document_textures_rml = R"(
 	<img src="/assets/high_scores_alien_1.tga"/>
 	<div class="file"/>
 	<div class="sprite"/>
-	<progressbar direction="clockwise" start-edge="bottom" value="0.5"/>
+	<progress direction="clockwise" start-edge="bottom" value="0.5"/>
 </div>
 </body>
 </rml>

changelog.md

@@ -138,8 +138,7 @@ See the [media queries documentation](https://mikke89.github.io/RmlUiDoc/pages/r
 - `<select>` elements now react to changes in the `value` attribute.
 - Element attributes can now use escaped RML characters, eg. `<p example="&quot;Quoted text&quot;"/>`. [#154](https://github.com/mikke89/RmlUi/pull/154) (thanks @actboy168).
 - Tabs and panels in tab sets will no longer set the `display` property to `inline-block`, thus it is now possible to customize the display property.
-- `<progressbar>` elements now support the `max` attribute.
-- Changing the `fill-image` property of `<progressbar>` elements now actually updates the image.
+- `<progress>` element now supports the `max` attribute. Changing its `fill-image` property now actually updates the image.
 
 ### Input handling
 
@@ -205,7 +204,8 @@ Improved Lua plugin in several aspects.
 - The `BaseXMLParser` class has some minor interface changes.
 - Tab set elements `tab` and `panel` should now have their `display` property set in the RCSS document, use `display: inline-block` for the same behavior as before.
 - For custom, replaced elements: `Element::GetIntrinsicDimensions()` now additionally takes an intrinsic ratio parameter.
-- The `fill-image` property should now be applied to the \<progressbar\> element instead of its inner \<fill\> element.
+- The \<progressbar\> tag name has been deprecated in favor of \<progress\>. For now they work identically, but usage of \<progressbar\>  will raise a warning, expect future removal of this tag.
+- The `fill-image` property should now be applied to the \<progress\> element instead of its inner \<fill\> element.
 - The function `ElementDocument::LoadScript` is now changed to handle internal and external scripts separately. [#144](https://github.com/mikke89/RmlUi/pull/144)
 - For custom decorators: Textures from filenames should now first be loaded through the `DecoratorInstancerInterface` and then submitted to the `Decorator`.