Bug 1637120 - Tileview improvements r=gw

1/ add tile_cache to input path if frame00000 can't be found
2/ add visual IDs to each tile
3/ hiding a slice also hides its Invalidation info
4/ code cleanup (+= instead of push_str)

Differential Revision: https://phabricator.services.mozilla.com/D75432

gfx/wr/tileview/src/main.rs

@@ -271,16 +271,14 @@ fn tile_to_svg(key: TileOffset,
         invalidation_report.push_str("</div>\n");
     }
 
-    svg = format!(r#"{}<rect x="{}" y="{}" width="{}" height="{}" style="{}" ></rect>"#,
+    svg += &format!(r#"<rect x="{}" y="{}" width="{}" height="{}" style="{}" ></rect>"#,
-            svg,
             tile.rect.origin.x    * svg_settings.scale + svg_settings.x,
             tile.rect.origin.y    * svg_settings.scale + svg_settings.y,
             tile.rect.size.width  * svg_settings.scale,
             tile.rect.size.height * svg_settings.scale,
             tile_style);
 
-    svg = format!("{}\n\n<g class=\"svg_quadtree\">\n{}</g>\n",
+    svg += &format!("\n\n<g class=\"svg_quadtree\">\n{}</g>\n",
-                   svg,
                    tile_node_to_svg(&tile.root, &slice.transform, svg_settings));
 
     let right  = (tile.rect.origin.x + tile.rect.size.width) as i32;
@@ -291,9 +289,19 @@ fn tile_to_svg(key: TileOffset,
 
     svg += "\n<!-- primitives -->\n";
 
-    svg = format!("{}<g id=\"{}\">\n\t",
+    svg += &format!("<g id=\"{}\">\n\t", prim_class);
-                  svg,
+
-                  prim_class);
+
+    let rect_visual_id = Rect {
+        origin: tile.rect.origin,
+        size: PictureSize::new(1.0, 1.0)
+    };
+    let rect_visual_id_world = slice.transform.transform_rect(&rect_visual_id).unwrap();
+    svg += &format!("\n<text class=\"svg_tile_visual_id\" x=\"{}\" y=\"{}\">{},{} ({})</text>",
+            rect_visual_id_world.origin.x           * svg_settings.scale + svg_settings.x,
+            (rect_visual_id_world.origin.y + 110.0) * svg_settings.scale + svg_settings.y,
+            key.x, key.y, slice.tile_cache.slice);
+
 
     for prim in &tile.current_descriptor.prims {
         let rect = prim.prim_clip_box;
@@ -360,13 +368,15 @@ fn slices_to_svg(slices: &[Slice], prev_slices: Option<Vec<Slice>>,
         let tile_cache = &slice.tile_cache;
         *max_slice_index = if tile_cache.slice > *max_slice_index { tile_cache.slice } else { *max_slice_index };
 
+        invalidation_report.push_str(&format!("<div id=\"invalidation_slice{}\">\n", tile_cache.slice));
+
         let prim_class = format!("tile_slice{}", tile_cache.slice);
 
-        svg.push_str(&format!("\n<g id=\"tile_slice{}_everything\">", tile_cache.slice));
+        svg += &format!("\n<g id=\"tile_slice{}_everything\">", tile_cache.slice);
 
         //println!("slice {}", tile_cache.slice);
-        svg.push_str(&format!("\n<!-- tile_cache slice {} -->\n",
+        svg += &format!("\n<!-- tile_cache slice {} -->\n",
-                              tile_cache.slice));
+                              tile_cache.slice);
 
         //let tile_stroke = "stroke:grey;stroke-width:1;".to_string();
         let tile_stroke = "stroke:none;".to_string();
@@ -387,14 +397,16 @@ fn slices_to_svg(slices: &[Slice], prev_slices: Option<Vec<Slice>>,
                 prev_tile = prev.tile_cache.tiles.get(key);
             }
 
-            svg.push_str(&tile_to_svg(*key, &tile, &slice, prev_tile,
+            svg += &tile_to_svg(*key, &tile, &slice, prev_tile,
                                       itemuid_to_string,
                                       &tile_stroke, &prim_class,
                                       &mut invalidation_report,
-                                      svg_width, svg_height, svg_settings));
+                                      svg_width, svg_height, svg_settings);
         }
 
-        svg.push_str("\n</g>");
+        svg += "\n</g>";
+
+        invalidation_report.push_str("</div>\n");
     }
 
     (
@@ -526,6 +538,12 @@ fn write_css(output_dir: &Path, max_slice_index: usize, svg_settings: &SvgSettin
                         rgb);
     }
 
+    css += &format!(".svg_tile_visual_id {{\n\
+                         font: {}px sans-serif;\n\
+                         fill: rgb(50,50,50);\n\
+                     }}\n\n",
+                     150.0 * svg_settings.scale);
+
     let output_file = output_dir.join("tilecache.css");
     let mut css_output = File::create(output_file).unwrap();
     css_output.write_all(css.as_bytes()).unwrap();
@@ -638,9 +656,18 @@ fn main() {
     let mut max_slice_index = 0;
 
     let mut entries: Vec<_> = std::fs::read_dir(input_dir).unwrap()
-                                                          //.map(|r| r.unwrap())
                                                           .filter_map(|r| r.ok())
                                                           .collect();
+    // auto-fix a missing 'tile_cache' postfix on the input path -- easy to do when copy-pasting a
+    // path to a wr-capture; there should at least be a frame00000.ron...
+    let frame00000 = entries.iter().find(|&entry| entry.path().ends_with("frame00000.ron"));
+    // ... and if not, try again with 'tile_cache' appended to the input folder
+    if frame00000.is_none() {
+        let new_path = input_dir.join("tile_cache");
+        entries = std::fs::read_dir(new_path).unwrap()
+                                             .filter_map(|r| r.ok())
+                                             .collect();
+    }
     entries.sort_by_key(|dir| dir.path());
 
     let mut svg_files: Vec::<String> = Vec::new();

gfx/wr/tileview/src/tilecache.js

@@ -49,8 +49,7 @@ function update_slice_visibility(max_slice) {
 
 function update_slice_visibility_for_content(content, max_slice) {
 
-	if( !content ) // might happen due to cross-scripting -- use SimpleHTTPServer
+	intern = document.getElementById('intern').contentDocument;
-		return;
 
 	for (let slice = 0; slice != max_slice; ++slice) {
 		var cbox_name = "slice_toggle" + slice;
@@ -58,14 +57,26 @@ function update_slice_visibility_for_content(content, max_slice) {
 		if( !cbox )
 			continue;
 		let checked = cbox.checked;
-		var id = "tile_slice" + slice + "_everything";
+		if (content) { // might fail due to cross scripting -- use SimpleHTTPServer
-		var group = content.getElementById(id);
+			var id = "tile_slice" + slice + "_everything";
-		if( !group )
+			var group = content.getElementById(id);
-			continue;
+			if (group) {
-		if( checked )
+				if (checked)
-			group.style.display = "block";
+					group.style.display = "block";
-		else
+				else
-			group.style.display = "none";
+					group.style.display = "none";
+			}
+		}
+		if (intern) {
+			var id = "invalidation_slice" + slice;
+			var div = intern.getElementById(id);
+			if (div) {
+				if (checked)
+					div.style.display = "block";
+				else
+					div.style.display = "none";
+			}
+		}
 	}
 }
 
@@ -104,8 +115,8 @@ function go_to_svg(index) {
     backbuffer = t;
     is_loading = false;
   }
-  backbuffer.setAttribute('data', svg_files[svg_index]);
   document.getElementById('intern').src = intern_files[svg_index];
+  backbuffer.setAttribute('data', svg_files[svg_index]);
 
   // also see https://stackoverflow.com/a/29915275
 }