Dump.cpp 18 KB

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