diagnostics: make experimental-html sink prettier [PR116792]

This patch to the "experimental-html" diagnostic sink:
* adds use of the PatternFly 3 CSS library (via an optional link
  in the generated html to a copy in a CDN)
* uses PatternFly's "alert" pattern to show severities for diagnostics,
  properly nesting "note" diagnostics for diagnostic groups.
  Example:
    before: https://dmalcolm.fedorapeople.org/gcc/2025-06-10/before/diagnostic-ranges.c.html
     after: https://dmalcolm.fedorapeople.org/gcc/2025-06-10/after/diagnostic-ranges.c.html

* adds initial support for logical locations and physical locations
* adds initial support for multi-level nested diagnostics such as those
  for C++ concepts diagnostics.  Ideally this would show a clickable
  disclosure widget to expand/collapse a level, but for now it uses
  nested <ul> elements with <li> for the child diagnostics.
  Example:
    before: https://dmalcolm.fedorapeople.org/gcc/2025-06-10/before/nested-diagnostics-1.C.html
     after: https://dmalcolm.fedorapeople.org/gcc/2025-06-10/after/nested-diagnostics-1.C.html

gcc/ChangeLog:
	PR other/116792
	* diagnostic-format-html.cc: Include "diagnostic-path.h" and
	"diagnostic-client-data-hooks.h".
	(html_builder::m_logical_loc_mgr): New field.
	(html_builder::m_cur_nesting_levels): New field.
	(html_builder::m_last_logical_location): New field.
	(html_builder::m_last_location): New field.
	(html_builder::m_last_expanded_location): New field.
	(HTML_STYLE): Add "white-space: pre;" to .source and .annotation.
	Add "gcc-quoted-text" CSS class.
	(html_builder::html_builder): Initialize the new fields.  If CSS
	is enabled, add CDN links to PatternFly 3 stylesheets.
	(html_builder::add_stylesheet): New.
	(html_builder::on_report_diagnostic): Add "alert" param to
	make_element_for_diagnostic, setting it by default, but unsetting
	it for nested diagnostics below the top level.  Use
	add_at_nesting_level for nested diagnostics.
	(add_nesting_level_attr): New.
	(html_builder::add_at_nesting_level): New.
	(get_pf_class_for_alert_div): New.
	(get_pf_class_for_alert_icon): New.
	(get_label_for_logical_location_kind): New.
	(add_labelled_value): New.
	(html_builder::make_element_for_diagnostic): Add leading comment.
	Add "alert" param.  Drop class="gcc-diagnostic" from <div> tag,
	instead adding the class for a PatternFly 3 alert if "alert" is
	true, and adding a <span> with an alert icon, both according to
	the diagnostic severity.  Add a severity prefix to the message for
	alerts.  Add any metadata/option text as suffixes to the message.
	Show any logical location.  Show any physical location.  Don't
	show the locus if the last location is unchanged within the
	diagnostic_group.  Wrap any execution path element in a
	<div id="execution-path"> and add a label to it.  Wrap any
	generated patch in a <div id="suggested-fix"> and add a label
	to it.
	(selftest::test_simple_log): Update expected HTML.

gcc/testsuite/ChangeLog:
	PR other/116792
	* gcc.dg/html-output/missing-semicolon.py: Update for changes
	to diagnostic elements.
	* gcc.dg/format/diagnostic-ranges-html.py: Likewise.
	* gcc.dg/plugin/diagnostic-test-metadata-html.py: Likewise.  Drop
	out-of-date comment.
	* gcc.dg/plugin/diagnostic-test-paths-2.py: Likewise.
	* gcc.dg/plugin/diagnostic-test-paths-4.py: Likewise.  Drop
	out-of-date comment.
	* gcc.dg/plugin/diagnostic-test-show-locus.py: Likewise.
	* lib/htmltest.py (get_diag_by_index): Update to use search by id.
	(get_message_within_diag): Update to use search by class.

libcpp/ChangeLog:
	PR other/116792
	* include/line-map.h (typedef expanded_location): Convert to...
	(struct expanded_location): ...this.
	(operator==): New decl, for expanded_location.
	(operator!=): Likewise.
	* line-map.cc (operator==): New decl, for expanded_location.

Signed-off-by: David Malcolm <[email protected]>

Author: davidmalcolm

gcc/diagnostic-format-html.cc

@@ -19,17 +19,20 @@ def test_message(html_tree):
     diag = get_diag_by_index(html_tree, 0)
     msg = get_message_within_diag(diag)
 
-    assert_tag(msg[0], 'span')
-    assert_class(msg[0], 'gcc-quoted-text')
-    assert_highlighted_text(msg[0][0], 'highlight-a', '%i')
-
+    assert_tag(msg[0], 'strong')
+    assert msg[0].text == 'warning: '
+    
     assert_tag(msg[1], 'span')
     assert_class(msg[1], 'gcc-quoted-text')
-    assert_highlighted_text(msg[1][0], 'highlight-a', 'int')
+    assert_highlighted_text(msg[1][0], 'highlight-a', '%i')
 
     assert_tag(msg[2], 'span')
     assert_class(msg[2], 'gcc-quoted-text')
-    assert_highlighted_text(msg[2][0], 'highlight-b', 'const char *')
+    assert_highlighted_text(msg[2][0], 'highlight-a', 'int')
+
+    assert_tag(msg[3], 'span')
+    assert_class(msg[3], 'gcc-quoted-text')
+    assert_highlighted_text(msg[3][0], 'highlight-b', 'const char *')
 
 def test_annotations(html_tree):
     """

gcc/testsuite/gcc.dg/format/diagnostic-ranges-html.py

@@ -37,22 +37,68 @@ def test_basics(html_tree):
 
     diag = diag_list.find('xhtml:div', ns)
     assert diag is not None
-    assert diag.attrib['class'] == 'gcc-diagnostic'
+    assert diag.attrib['class'] == 'alert alert-danger'
+    assert diag.attrib['id'] == 'gcc-diag-0'
 
-    message = diag.find('xhtml:span', ns)
+    icon = diag.find('xhtml:span', ns)
+    assert icon.attrib['class'] == 'pficon pficon-error-circle-o'
+
+    # The message line:
+    message = diag.find("./xhtml:div[@class='gcc-message']", ns)
     assert message is not None
-    assert message.attrib['class'] == 'gcc-message'
-    assert message.text == "expected '"
-    assert message[0].tag == make_tag('span')
-    assert message[0].attrib['class'] == 'gcc-quoted-text'
-    assert message[0].text == ';'
-    assert message[0].tail == "' before '"
+    # <html:div xmlns:html="http://www.w3.org/1999/xhtml" class="gcc-message" id="gcc-diag-0-message"><html:strong>error: </html:strong> expected '<html:span class="gcc-quoted-text">;</html:span>' before '<html:span class="gcc-quoted-text">}</html:span>' token</html:div>
+    assert message[0].tag == make_tag('strong')
+    assert message[0].text == 'error: '
+    assert message[0].tail == " expected '"
     assert message[1].tag == make_tag('span')
     assert message[1].attrib['class'] == 'gcc-quoted-text'
-    assert message[1].text == '}'
-    assert message[1].tail == "' token"
+    assert message[1].text == ';'
+    assert message[1].tail == "' before '"
+    assert message[2].tag == make_tag('span')
+    assert message[2].attrib['class'] == 'gcc-quoted-text'
+    assert message[2].text == '}'
+    assert message[2].tail == "' token"
+
+    # Logical location
+    logical_loc = diag.find("./xhtml:div[@id='logical-location']", ns)
+    assert logical_loc is not None
+    assert len(logical_loc) == 2
+    assert logical_loc[0].tag == make_tag('span')
+    assert logical_loc[0].text == 'Function '
+    assert logical_loc[1].tag == make_tag('span')
+    assert logical_loc[1].text == 'missing_semicolon'
+    assert logical_loc[1].attrib['class'] == 'gcc-quoted-text'
+
+    # Physical location
+    file_ = diag.find("./xhtml:div[@id='file']", ns)
+    assert file_ is not None
+    assert len(file_) == 2
+    assert file_[0].tag == make_tag('span')
+    assert file_[0].text == 'File '
+    assert file_[1].tag == make_tag('span')
+    assert file_[1].text.endswith('gcc/testsuite/gcc.dg/html-output/missing-semicolon.c')
+
+    line = diag.find("./xhtml:div[@id='line']", ns)
+    assert line is not None
+    assert len(line) == 2
+    assert line[0].tag == make_tag('span')
+    assert line[0].text == 'Line '
+    assert line[1].tag == make_tag('span')
+    assert line[1].text == '8'
+
+    column = diag.find("./xhtml:div[@id='column']", ns)
+    assert column is not None
+    assert len(column) == 2
+    assert column[0].tag == make_tag('span')
+    assert column[0].text == 'Column '
+    assert column[1].tag == make_tag('span')
+    assert column[1].text == '12'
 
-    pre = diag.find('xhtml:pre', ns)
+    # Suggested fix
+    fix = diag.find("./xhtml:div[@id='suggested-fix']", ns)
+    label = fix.find('xhtml:label', ns)
+    assert label.text == "Suggested fix"
+    pre = fix.find('xhtml:pre', ns)
     assert pre is not None
     assert pre.attrib['class'] == 'gcc-generated-patch'
     assert pre.text.startswith('--- ')

gcc/testsuite/gcc.dg/html-output/missing-semicolon.py

@@ -21,10 +21,24 @@ def test_metadata(html_tree):
 
     diag = diag_list.find('xhtml:div', ns)
     assert diag is not None
-    assert diag.attrib['class'] == 'gcc-diagnostic'
+    assert diag.attrib['class'] == 'alert alert-warning'
 
-    spans = diag.findall('xhtml:span', ns)
-    metadata = spans[1]
+    icon = diag.find('xhtml:span', ns)
+    assert icon.attrib['class'] == 'pficon pficon-warning-triangle-o'
+
+    message = diag.find("./xhtml:div[@class='gcc-message']", ns)
+    assert message.attrib['id'] == 'gcc-diag-0-message'
+
+    assert message[0].tag == make_tag('strong')
+    assert message[0].text == 'warning: '
+    assert message[0].tail == " never use '"
+
+    assert message[1].tag == make_tag('span')
+    assert message[1].attrib['class'] == 'gcc-quoted-text'
+    assert message[1].text == 'gets'
+    assert message[1].tail == "' "
+    
+    metadata = message[2]
     assert metadata.attrib['class'] == 'gcc-metadata'
     assert metadata[0].tag == make_tag('span')
     assert metadata[0].attrib['class'] == 'gcc-metadata-item'
@@ -57,21 +71,3 @@ def test_metadata(html_tree):
     annotation_tr = rows[1]
     assert_annotation_line(annotation_tr,
                            '  ^~~~~~~~~~')
-
-# For reference, here's the generated HTML:
-"""
-  <body>
-    <div class="gcc-diagnostic-list">
-      <div class="gcc-diagnostic">
-        <span class="gcc-message">never use &apos;<span class="gcc-quoted-text">gets</span>&apos;</span> 
-        <span class="gcc-metadata"><span class="gcc-metadata-item">[<a href="https://cwe.mitre.org/data/definitions/242.html">CWE-242</a>]</span><span class="gcc-metadata-item">[<a href="https://example.com/">STR34-C</a>]</span></span><table class="locus">
-<tbody class="line-span">
-<tr><td class="linenum">   10</td> <td class="source">  gets (buf);</td></tr>
-<tr><td class="linenum"/><td class="annotation">  ^~~~~~~~~~</td></tr>
-</tbody>
-</table>
-
-      </div>
-    </div>
-  </body>
-"""

gcc/testsuite/gcc.dg/plugin/diagnostic-test-metadata-html.py

@@ -21,9 +21,16 @@ def test_paths(html_tree):
 
     diag = diag_list.find('xhtml:div', ns)
     assert diag is not None
-    assert diag.attrib['class'] == 'gcc-diagnostic'
+    assert diag.attrib['class'] == 'alert alert-danger'
+    assert diag.attrib['id'] == 'gcc-diag-0'
 
-    event_ranges = diag.find('xhtml:div', ns)
+    exec_path = diag.find("./xhtml:div[@id='execution-path']", ns)
+    assert exec_path is not None
+
+    label = exec_path.find('xhtml:label', ns)
+    assert label.text == 'Execution path with 3 events'
+    
+    event_ranges = exec_path.find('xhtml:div', ns)
     assert_class(event_ranges, 'event-ranges')
 
     frame_margin = event_ranges.find('xhtml:table', ns)

gcc/testsuite/gcc.dg/plugin/diagnostic-test-paths-2.py

@@ -25,7 +25,13 @@ def test_paths(html_tree):
     assert_annotation_line(annotation_tr,
                            '  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~')
 
-    event_ranges = diag.find('xhtml:div', ns)
+    exec_path = diag.find("./xhtml:div[@id='execution-path']", ns)
+    assert exec_path is not None
+
+    label = exec_path.find('xhtml:label', ns)
+    assert label.text == 'Execution path with 9 events'
+    
+    event_ranges = exec_path.find('xhtml:div', ns)
     assert_class(event_ranges, 'event-ranges')
 
     test_frame_margin = event_ranges.find('xhtml:table', ns)
@@ -41,150 +47,3 @@ def test_paths(html_tree):
     test_frame = tds[1]
     assert_frame(test_frame, 'test')
     assert_event_range_with_margin(test_frame[1])
-
-# For reference, generated HTML looks like this:
-"""
-<table class="stack-frame-with-margin"><tr>
-  <td class="interprocmargin" style="padding-left: 100px"/>
-  <td class="stack-frame">
-<div class="frame-funcname"><span>test</span></div><table class="event-range-with-margin"><tr>
-  <td class="event-range">
-    <div class="events-hdr"><span class="funcname">test</span>: <span class="event-ids">events 1-2</span></div>
-<table class="locus">
-<tbody class="line-span">
-<tr><td class="linenum">   27</td> <td class="source">{</td></tr>
-<tr><td class="linenum"/><td class="annotation">^</td></tr>
-<tr><td class="linenum"/><td class="annotation">|</td></tr>
-<tr><td class="linenum"/><td class="annotation">(1) entering 'test'</td></tr>
-<tr><td class="linenum">   28</td> <td class="source">  register_handler ();</td></tr>
-<tr><td class="linenum"/><td class="annotation">  ~~~~~~~~~~~~~~~~~~~</td></tr>
-<tr><td class="linenum"/><td class="annotation">  |</td></tr>
-<tr><td class="linenum"/><td class="annotation">  (2) calling 'register_handler'</td></tr>
-</tbody>
-</table>
-</td></tr></table>
-<div class="between-ranges-call">
-  <svg height="30" width="150">
-    <defs>
-      <marker id="arrowhead" markerWidth="10" markerHeight="7"
-              refX="0" refY="3.5" orient="auto" stroke="#0088ce" fill="#0088ce">
-      <polygon points="0 0, 10 3.5, 0 7"/>
-      </marker>
-    </defs>
-    <polyline points="20,0 20,10 120,10 120,20"
-              style="fill:none;stroke: #0088ce"
-              marker-end="url(#arrowhead)"/>
-  </svg>
-</div>
-
-<table class="stack-frame-with-margin"><tr>
-  <td class="interprocmargin" style="padding-left: 100px"/>
-  <td class="stack-frame">
-<div class="frame-funcname"><span>register_handler</span></div><table class="event-range-with-margin"><tr>
-  <td class="event-range">
-    <div class="events-hdr"><span class="funcname">register_handler</span>: <span class="event-ids">events 3-4</span></div>
-<table class="locus">
-<tbody class="line-span">
-<tr><td class="linenum">   22</td> <td class="source">{</td></tr>
-<tr><td class="linenum"/><td class="annotation">^</td></tr>
-<tr><td class="linenum"/><td class="annotation">|</td></tr>
-<tr><td class="linenum"/><td class="annotation">(3) entering 'register_handler'</td></tr>
-<tr><td class="linenum">   23</td> <td class="source">  signal(SIGINT, int_handler);</td></tr>
-<tr><td class="linenum"/><td class="annotation">  ~~~~~~~~~~~~~~~~~~~~~~~~~~~</td></tr>
-<tr><td class="linenum"/><td class="annotation">  |</td></tr>
-<tr><td class="linenum"/><td class="annotation">  (4) registering 'int_handler' as signal handler</td></tr>
-</tbody>
-</table>
-</td></tr></table>
-</td></tr></table>
-</td></tr></table>
-<div class="between-ranges-return">
-  <svg height="30" width="250">
-    <defs>
-      <marker id="arrowhead" markerWidth="10" markerHeight="7"
-              refX="0" refY="3.5" orient="auto" stroke="#0088ce" fill="#0088ce">
-      <polygon points="0 0, 10 3.5, 0 7"/>
-      </marker>
-    </defs>
-    <polyline points="220,0 220,10 20,10 20,20"
-              style="fill:none;stroke: #0088ce"
-              marker-end="url(#arrowhead)"/>
-  </svg>
-</div>
-
-<table class="event-range-with-margin"><tr>
-  <td class="event-range">
-    <div class="events-hdr"><span class="event-ids">event 5</span></div>
- (5): later on, when the signal is delivered to the process
-</td></tr></table>
-<div class="between-ranges-call">
-  <svg height="30" width="150">
-    <defs>
-      <marker id="arrowhead" markerWidth="10" markerHeight="7"
-              refX="0" refY="3.5" orient="auto" stroke="#0088ce" fill="#0088ce">
-      <polygon points="0 0, 10 3.5, 0 7"/>
-      </marker>
-    </defs>
-    <polyline points="20,0 20,10 120,10 120,20"
-              style="fill:none;stroke: #0088ce"
-              marker-end="url(#arrowhead)"/>
-  </svg>
-</div>
-
-<table class="stack-frame-with-margin"><tr>
-  <td class="interprocmargin" style="padding-left: 100px"/>
-  <td class="stack-frame">
-<div class="frame-funcname"><span>int_handler</span></div><table class="event-range-with-margin"><tr>
-  <td class="event-range">
-    <div class="events-hdr"><span class="funcname">int_handler</span>: <span class="event-ids">events 6-7</span></div>
-<table class="locus">
-<tbody class="line-span">
-<tr><td class="linenum">   17</td> <td class="source">{</td></tr>
-<tr><td class="linenum"/><td class="annotation">^</td></tr>
-<tr><td class="linenum"/><td class="annotation">|</td></tr>
-<tr><td class="linenum"/><td class="annotation">(6) entering 'int_handler'</td></tr>
-<tr><td class="linenum">   18</td> <td class="source">  custom_logger("got signal");</td></tr>
-<tr><td class="linenum"/><td class="annotation">  ~~~~~~~~~~~~~~~~~~~~~~~~~~~</td></tr>
-<tr><td class="linenum"/><td class="annotation">  |</td></tr>
-<tr><td class="linenum"/><td class="annotation">  (7) calling 'custom_logger'</td></tr>
-</tbody>
-</table>
-</td></tr></table>
-<div class="between-ranges-call">
-  <svg height="30" width="150">
-    <defs>
-      <marker id="arrowhead" markerWidth="10" markerHeight="7"
-              refX="0" refY="3.5" orient="auto" stroke="#0088ce" fill="#0088ce">
-      <polygon points="0 0, 10 3.5, 0 7"/>
-      </marker>
-    </defs>
-    <polyline points="20,0 20,10 120,10 120,20"
-              style="fill:none;stroke: #0088ce"
-              marker-end="url(#arrowhead)"/>
-  </svg>
-</div>
-
-<table class="stack-frame-with-margin"><tr>
-  <td class="interprocmargin" style="padding-left: 100px"/>
-  <td class="stack-frame">
-<div class="frame-funcname"><span>custom_logger</span></div><table class="event-range-with-margin"><tr>
-  <td class="event-range">
-    <div class="events-hdr"><span class="funcname">custom_logger</span>: <span class="event-ids">events 8-9</span></div>
-<table class="locus">
-<tbody class="line-span">
-<tr><td class="linenum">   12</td> <td class="source">{</td></tr>
-<tr><td class="linenum"/><td class="annotation">^</td></tr>
-<tr><td class="linenum"/><td class="annotation">|</td></tr>
-<tr><td class="linenum"/><td class="annotation">(8) entering 'custom_logger'</td></tr>
-<tr><td class="linenum">   13</td> <td class="source">  fprintf(stderr, "LOG: %s", msg); /* { dg-warning "call to 'fprintf' from within signal handler" } */</td></tr>
-<tr><td class="linenum"/><td class="annotation">  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</td></tr>
-<tr><td class="linenum"/><td class="annotation">  |</td></tr>
-<tr><td class="linenum"/><td class="annotation">  (9) calling 'fprintf'</td></tr>
-</tbody>
-</table>
-</td></tr></table>
-</td></tr></table>
-</td></tr></table>
-
-</div>
-    """

gcc/testsuite/gcc.dg/plugin/diagnostic-test-paths-4.py

@@ -46,7 +46,8 @@ def test_very_wide_line(html_tree):
 def test_fixit_insert(html_tree):
     diag = get_diag_by_index(html_tree, 3)
     msg = get_message_within_diag(diag)
-    assert msg.text == 'example of insertion hints'
+    assert msg[0].text == 'warning: '
+    assert msg[0].tail == ' example of insertion hints'
 
     src = get_locus_within_diag(diag)
 
@@ -62,7 +63,8 @@ def test_fixit_insert(html_tree):
 def test_fixit_remove(html_tree):
     diag = get_diag_by_index(html_tree, 4)
     msg = get_message_within_diag(diag)
-    assert msg.text == 'example of a removal hint'
+    assert msg[0].text == 'warning: '
+    assert msg[0].tail == ' example of a removal hint'
 
     src = get_locus_within_diag(diag)
 
@@ -78,7 +80,8 @@ def test_fixit_remove(html_tree):
 def test_fixit_replace(html_tree):
     diag = get_diag_by_index(html_tree, 5)
     msg = get_message_within_diag(diag)
-    assert msg.text == 'example of a replacement hint'
+    assert msg[0].text == 'warning: '
+    assert msg[0].tail == ' example of a replacement hint'
 
     src = get_locus_within_diag(diag)
 
@@ -94,7 +97,8 @@ def test_fixit_replace(html_tree):
 def test_fixit_insert_newline(html_tree):
     diag = get_diag_by_index(html_tree, 6)
     msg = get_message_within_diag(diag)
-    assert msg.text == 'example of newline insertion hint'
+    assert msg[0].text == 'warning: '
+    assert msg[0].tail == ' example of newline insertion hint'
 
     src = get_locus_within_diag(diag)
 

gcc/testsuite/gcc.dg/plugin/diagnostic-test-show-locus.py

@@ -83,14 +83,11 @@ def get_diag_by_index(html_tree, index):
     assert diag_list is not None
     assert_class(diag_list, 'gcc-diagnostic-list')
 
-    diags = diag_list.findall('xhtml:div', ns)
-    diag = diags[index]
-    assert_class(diag, 'gcc-diagnostic')
+    diag = diag_list.find(f"xhtml:div[@id='gcc-diag-{index}']", ns)
     return diag
 
 def get_message_within_diag(diag_element):
-    msg = diag_element.find('xhtml:span', ns)
-    assert_class(msg, 'gcc-message')
+    msg = diag_element.find("xhtml:div[@class='gcc-message']", ns)
     return msg
 
 def get_locus_within_diag(diag_element):