Dump.cpp 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  1. /*
  2. * Copyright (c) 2018-2021, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2021, the SerenityOS developers.
  4. * All rights reserved.
  5. *
  6. * Redistribution and use in source and binary forms, with or without
  7. * modification, are permitted provided that the following conditions are met:
  8. *
  9. * 1. Redistributions of source code must retain the above copyright notice, this
  10. * list of conditions and the following disclaimer.
  11. *
  12. * 2. Redistributions in binary form must reproduce the above copyright notice,
  13. * this list of conditions and the following disclaimer in the documentation
  14. * and/or other materials provided with the distribution.
  15. *
  16. * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
  17. * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  18. * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  19. * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
  20. * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
  21. * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
  22. * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
  23. * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
  24. * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  25. * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  26. */
  27. #include <AK/QuickSort.h>
  28. #include <AK/StringBuilder.h>
  29. #include <AK/Utf8View.h>
  30. #include <LibWeb/CSS/CSSRule.h>
  31. #include <LibWeb/CSS/PropertyID.h>
  32. #include <LibWeb/CSS/StyleRule.h>
  33. #include <LibWeb/CSS/StyleSheet.h>
  34. #include <LibWeb/DOM/Comment.h>
  35. #include <LibWeb/DOM/Document.h>
  36. #include <LibWeb/DOM/Element.h>
  37. #include <LibWeb/DOM/ShadowRoot.h>
  38. #include <LibWeb/DOM/Text.h>
  39. #include <LibWeb/Dump.h>
  40. #include <LibWeb/HTML/HTMLTemplateElement.h>
  41. #include <LibWeb/Layout/BlockBox.h>
  42. #include <LibWeb/Layout/Node.h>
  43. #include <LibWeb/Layout/TextNode.h>
  44. #include <stdio.h>
  45. namespace Web {
  46. void dump_tree(const DOM::Node& node)
  47. {
  48. StringBuilder builder;
  49. dump_tree(builder, node);
  50. dbgln("{}", builder.string_view());
  51. }
  52. void dump_tree(StringBuilder& builder, const DOM::Node& node)
  53. {
  54. static int indent = 0;
  55. for (int i = 0; i < indent; ++i)
  56. builder.append(" ");
  57. if (is<DOM::Element>(node)) {
  58. builder.appendff("<{}", downcast<DOM::Element>(node).local_name());
  59. downcast<DOM::Element>(node).for_each_attribute([&](auto& name, auto& value) {
  60. builder.appendff(" {}={}", name, value);
  61. });
  62. builder.append(">\n");
  63. } else if (is<DOM::Text>(node)) {
  64. builder.appendff("\"{}\"\n", downcast<DOM::Text>(node).data());
  65. } else {
  66. builder.appendff("{}\n", node.node_name());
  67. }
  68. ++indent;
  69. if (is<DOM::Element>(node) && downcast<DOM::Element>(node).shadow_root()) {
  70. dump_tree(*downcast<DOM::Element>(node).shadow_root());
  71. }
  72. if (is<DOM::ParentNode>(node)) {
  73. if (!is<HTML::HTMLTemplateElement>(node)) {
  74. static_cast<const DOM::ParentNode&>(node).for_each_child([](auto& child) {
  75. dump_tree(child);
  76. });
  77. } else {
  78. auto& template_element = downcast<HTML::HTMLTemplateElement>(node);
  79. dump_tree(template_element.content());
  80. }
  81. }
  82. --indent;
  83. }
  84. void dump_tree(const Layout::Node& layout_node, bool show_box_model, bool show_specified_style)
  85. {
  86. StringBuilder builder;
  87. dump_tree(builder, layout_node, show_box_model, show_specified_style, true);
  88. dbgln("{}", builder.string_view());
  89. }
  90. void dump_tree(StringBuilder& builder, const Layout::Node& layout_node, bool show_box_model, bool show_specified_style, bool interactive)
  91. {
  92. static size_t indent = 0;
  93. for (size_t i = 0; i < indent; ++i)
  94. builder.append(" ");
  95. FlyString tag_name;
  96. if (layout_node.is_anonymous())
  97. tag_name = "(anonymous)";
  98. else if (is<DOM::Element>(layout_node.dom_node()))
  99. tag_name = downcast<DOM::Element>(*layout_node.dom_node()).local_name();
  100. else
  101. tag_name = layout_node.dom_node()->node_name();
  102. String identifier = "";
  103. if (layout_node.dom_node() && is<DOM::Element>(*layout_node.dom_node())) {
  104. auto& element = downcast<DOM::Element>(*layout_node.dom_node());
  105. StringBuilder builder;
  106. auto id = element.attribute(HTML::AttributeNames::id);
  107. if (!id.is_empty()) {
  108. builder.append('#');
  109. builder.append(id);
  110. }
  111. for (auto& class_name : element.class_names()) {
  112. builder.append('.');
  113. builder.append(class_name);
  114. }
  115. identifier = builder.to_string();
  116. }
  117. const char* nonbox_color_on = "";
  118. const char* box_color_on = "";
  119. const char* positioned_color_on = "";
  120. const char* floating_color_on = "";
  121. const char* inline_block_color_on = "";
  122. const char* line_box_color_on = "";
  123. const char* fragment_color_on = "";
  124. const char* flex_color_on = "";
  125. const char* color_off = "";
  126. if (interactive) {
  127. nonbox_color_on = "\033[33m";
  128. box_color_on = "\033[34m";
  129. positioned_color_on = "\033[31;1m";
  130. floating_color_on = "\033[32;1m";
  131. inline_block_color_on = "\033[36;1m";
  132. line_box_color_on = "\033[34;1m";
  133. fragment_color_on = "\033[35;1m";
  134. flex_color_on = "\033[34;1m";
  135. color_off = "\033[0m";
  136. }
  137. if (!is<Layout::Box>(layout_node)) {
  138. builder.appendff("{}{}{} <{}{}{}{}>",
  139. nonbox_color_on,
  140. layout_node.class_name().substring_view(13),
  141. color_off,
  142. tag_name,
  143. nonbox_color_on,
  144. identifier,
  145. color_off);
  146. if (interactive)
  147. builder.appendff(" @{:p}", &layout_node);
  148. builder.append("\n");
  149. } else {
  150. auto& box = downcast<Layout::Box>(layout_node);
  151. builder.appendff("{}{}{} <{}{}{}{}> ",
  152. box_color_on,
  153. box.class_name().substring_view(13),
  154. color_off,
  155. box_color_on,
  156. tag_name,
  157. color_off,
  158. identifier.characters());
  159. if (interactive)
  160. builder.appendff("@{:p} ", &layout_node);
  161. builder.appendff("at ({},{}) size {}x{}",
  162. (int)box.absolute_x(),
  163. (int)box.absolute_y(),
  164. (int)box.width(),
  165. (int)box.height());
  166. if (box.is_positioned())
  167. builder.appendff(" {}positioned{}", positioned_color_on, color_off);
  168. if (box.is_floating())
  169. builder.appendff(" {}floating{}", floating_color_on, color_off);
  170. if (box.is_inline_block())
  171. builder.appendff(" {}inline-block{}", inline_block_color_on, color_off);
  172. if (box.computed_values().display() == CSS::Display::Flex)
  173. builder.appendff(" {}flex{}", flex_color_on, color_off);
  174. if (show_box_model) {
  175. // Dump the horizontal box properties
  176. builder.appendf(" [%g+%g+%g %g %g+%g+%g]",
  177. box.box_model().margin.left,
  178. box.box_model().border.left,
  179. box.box_model().padding.left,
  180. box.width(),
  181. box.box_model().padding.right,
  182. box.box_model().border.right,
  183. box.box_model().margin.right);
  184. // And the vertical box properties
  185. builder.appendf(" [%g+%g+%g %g %g+%g+%g]",
  186. box.box_model().margin.top,
  187. box.box_model().border.top,
  188. box.box_model().padding.top,
  189. box.height(),
  190. box.box_model().padding.bottom,
  191. box.box_model().border.bottom,
  192. box.box_model().margin.bottom);
  193. }
  194. builder.append("\n");
  195. }
  196. if (is<Layout::BlockBox>(layout_node) && static_cast<const Layout::BlockBox&>(layout_node).children_are_inline()) {
  197. auto& block = static_cast<const Layout::BlockBox&>(layout_node);
  198. for (size_t line_box_index = 0; line_box_index < block.line_boxes().size(); ++line_box_index) {
  199. auto& line_box = block.line_boxes()[line_box_index];
  200. for (size_t i = 0; i < indent; ++i)
  201. builder.append(" ");
  202. builder.appendff(" {}line {}{} width: {}\n",
  203. line_box_color_on,
  204. line_box_index,
  205. color_off,
  206. (int)line_box.width());
  207. for (size_t fragment_index = 0; fragment_index < line_box.fragments().size(); ++fragment_index) {
  208. auto& fragment = line_box.fragments()[fragment_index];
  209. for (size_t i = 0; i < indent; ++i)
  210. builder.append(" ");
  211. builder.appendff(" {}frag {}{} from {} ",
  212. fragment_color_on,
  213. fragment_index,
  214. color_off,
  215. fragment.layout_node().class_name());
  216. if (interactive)
  217. builder.appendff("@{:p}, ", &fragment.layout_node());
  218. builder.appendff("start: {}, length: {}, rect: {}\n",
  219. fragment.start(),
  220. fragment.length(),
  221. enclosing_int_rect(fragment.absolute_rect()).to_string());
  222. if (is<Layout::TextNode>(fragment.layout_node())) {
  223. for (size_t i = 0; i < indent; ++i)
  224. builder.append(" ");
  225. auto& layout_text = static_cast<const Layout::TextNode&>(fragment.layout_node());
  226. auto fragment_text = layout_text.text_for_rendering().substring(fragment.start(), fragment.length());
  227. builder.appendff(" \"{}\"\n", fragment_text);
  228. }
  229. }
  230. }
  231. }
  232. if (show_specified_style && layout_node.dom_node() && layout_node.dom_node()->is_element() && downcast<DOM::Element>(layout_node.dom_node())->specified_css_values()) {
  233. struct NameAndValue {
  234. String name;
  235. String value;
  236. };
  237. Vector<NameAndValue> properties;
  238. downcast<DOM::Element>(*layout_node.dom_node()).specified_css_values()->for_each_property([&](auto property_id, auto& value) {
  239. properties.append({ CSS::string_from_property_id(property_id), value.to_string() });
  240. });
  241. quick_sort(properties, [](auto& a, auto& b) { return a.name < b.name; });
  242. for (auto& property : properties) {
  243. for (size_t i = 0; i < indent; ++i)
  244. builder.append(" ");
  245. builder.appendf(" (%s: %s)\n", property.name.characters(), property.value.characters());
  246. }
  247. }
  248. ++indent;
  249. layout_node.for_each_child([&](auto& child) {
  250. dump_tree(builder, child, show_box_model, show_specified_style, interactive);
  251. });
  252. --indent;
  253. }
  254. void dump_selector(const CSS::Selector& selector)
  255. {
  256. StringBuilder builder;
  257. dump_selector(builder, selector);
  258. dbgln("{}", builder.string_view());
  259. }
  260. void dump_selector(StringBuilder& builder, const CSS::Selector& selector)
  261. {
  262. builder.append(" CSS::Selector:\n");
  263. for (auto& complex_selector : selector.complex_selectors()) {
  264. builder.append(" ");
  265. const char* relation_description = "";
  266. switch (complex_selector.relation) {
  267. case CSS::Selector::ComplexSelector::Relation::None:
  268. relation_description = "None";
  269. break;
  270. case CSS::Selector::ComplexSelector::Relation::ImmediateChild:
  271. relation_description = "ImmediateChild";
  272. break;
  273. case CSS::Selector::ComplexSelector::Relation::Descendant:
  274. relation_description = "Descendant";
  275. break;
  276. case CSS::Selector::ComplexSelector::Relation::AdjacentSibling:
  277. relation_description = "AdjacentSibling";
  278. break;
  279. case CSS::Selector::ComplexSelector::Relation::GeneralSibling:
  280. relation_description = "GeneralSibling";
  281. break;
  282. }
  283. if (*relation_description)
  284. builder.appendff("{{{}}} ", relation_description);
  285. for (size_t i = 0; i < complex_selector.compound_selector.size(); ++i) {
  286. auto& simple_selector = complex_selector.compound_selector[i];
  287. const char* type_description = "Unknown";
  288. switch (simple_selector.type) {
  289. case CSS::Selector::SimpleSelector::Type::Invalid:
  290. type_description = "Invalid";
  291. break;
  292. case CSS::Selector::SimpleSelector::Type::Universal:
  293. type_description = "Universal";
  294. break;
  295. case CSS::Selector::SimpleSelector::Type::Id:
  296. type_description = "Id";
  297. break;
  298. case CSS::Selector::SimpleSelector::Type::Class:
  299. type_description = "Class";
  300. break;
  301. case CSS::Selector::SimpleSelector::Type::TagName:
  302. type_description = "TagName";
  303. break;
  304. }
  305. const char* attribute_match_type_description = "";
  306. switch (simple_selector.attribute_match_type) {
  307. case CSS::Selector::SimpleSelector::AttributeMatchType::None:
  308. break;
  309. case CSS::Selector::SimpleSelector::AttributeMatchType::HasAttribute:
  310. attribute_match_type_description = "HasAttribute";
  311. break;
  312. case CSS::Selector::SimpleSelector::AttributeMatchType::ExactValueMatch:
  313. attribute_match_type_description = "ExactValueMatch";
  314. break;
  315. case CSS::Selector::SimpleSelector::AttributeMatchType::Contains:
  316. attribute_match_type_description = "Contains";
  317. break;
  318. }
  319. const char* pseudo_class_description = "";
  320. switch (simple_selector.pseudo_class) {
  321. case CSS::Selector::SimpleSelector::PseudoClass::Link:
  322. pseudo_class_description = "Link";
  323. break;
  324. case CSS::Selector::SimpleSelector::PseudoClass::Visited:
  325. pseudo_class_description = "Visited";
  326. break;
  327. case CSS::Selector::SimpleSelector::PseudoClass::None:
  328. pseudo_class_description = "None";
  329. break;
  330. case CSS::Selector::SimpleSelector::PseudoClass::Root:
  331. pseudo_class_description = "Root";
  332. break;
  333. case CSS::Selector::SimpleSelector::PseudoClass::Focus:
  334. pseudo_class_description = "Focus";
  335. break;
  336. case CSS::Selector::SimpleSelector::PseudoClass::Empty:
  337. pseudo_class_description = "Empty";
  338. break;
  339. case CSS::Selector::SimpleSelector::PseudoClass::Hover:
  340. pseudo_class_description = "Hover";
  341. break;
  342. case CSS::Selector::SimpleSelector::PseudoClass::LastChild:
  343. pseudo_class_description = "LastChild";
  344. break;
  345. case CSS::Selector::SimpleSelector::PseudoClass::FirstChild:
  346. pseudo_class_description = "FirstChild";
  347. break;
  348. case CSS::Selector::SimpleSelector::PseudoClass::OnlyChild:
  349. pseudo_class_description = "OnlyChild";
  350. break;
  351. }
  352. builder.appendff("{}:{}", type_description, simple_selector.value);
  353. if (simple_selector.pseudo_class != CSS::Selector::SimpleSelector::PseudoClass::None)
  354. builder.appendff(" pseudo_class={}", pseudo_class_description);
  355. if (simple_selector.attribute_match_type != CSS::Selector::SimpleSelector::AttributeMatchType::None) {
  356. builder.appendff(" [{}, name='{}', value='{}']", attribute_match_type_description, simple_selector.attribute_name, simple_selector.attribute_value);
  357. }
  358. if (i != complex_selector.compound_selector.size() - 1)
  359. builder.append(", ");
  360. }
  361. builder.append("\n");
  362. }
  363. }
  364. void dump_rule(const CSS::CSSRule& rule)
  365. {
  366. StringBuilder builder;
  367. dump_rule(builder, rule);
  368. dbgln("{}", builder.string_view());
  369. }
  370. void dump_rule(StringBuilder& builder, const CSS::CSSRule& rule)
  371. {
  372. builder.appendff("{}:\n", rule.class_name());
  373. switch (rule.type()) {
  374. case CSS::CSSRule::Type::Style:
  375. dump_style_rule(builder, downcast<const CSS::StyleRule>(rule));
  376. break;
  377. default:
  378. VERIFY_NOT_REACHED();
  379. }
  380. }
  381. void dump_style_rule(StringBuilder& builder, const CSS::StyleRule& rule)
  382. {
  383. for (auto& selector : rule.selectors()) {
  384. dump_selector(builder, selector);
  385. }
  386. builder.append(" Declarations:\n");
  387. for (auto& property : rule.declaration().properties()) {
  388. builder.appendff(" {}: '{}'\n", CSS::string_from_property_id(property.property_id), property.value->to_string());
  389. }
  390. }
  391. void dump_sheet(const CSS::StyleSheet& sheet)
  392. {
  393. StringBuilder builder;
  394. dump_sheet(builder, sheet);
  395. dbgln("{}", builder.string_view());
  396. }
  397. void dump_sheet(StringBuilder& builder, const CSS::StyleSheet& sheet)
  398. {
  399. builder.appendff("StyleSheet{{{}}}: {} rule(s)\n", &sheet, sheet.rules().size());
  400. for (auto& rule : sheet.rules()) {
  401. dump_rule(builder, rule);
  402. }
  403. }
  404. }