LibWeb+LibWebView: Add a button to the Inspector to export its contents

When working on the Inspector's HTML, it's often kind of tricky to debug
when an element is styled / positioned incorrectly. We don't have a way
to inspect the Inspector itself.

This adds a button to the Inspector to export its HTML/CSS/JS contents
to the downloads directory. This allows for more easily testing changes,
especially by opening the exported HTML in another browser's dev tools.

We will ultimately likely remove this button (or make it hidden) by the
time we are production-ready. But it's quite useful for now.

Base/res/ladybird/inspector.css

@@ -92,7 +92,7 @@ body {
 
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
 
     z-index: 100;
 }
@@ -134,6 +134,30 @@ body {
     border-left: 1px solid var(--tab-button-border);
 }
 
+.global-controls {
+    margin: 0 8px 0 8px;
+}
+
+.global-controls button {
+    width: 24px;
+    height: 24px;
+
+    border: none;
+    outline: none;
+    cursor: pointer;
+}
+
+#export-inspector-button {
+    background-image: url("resource://icons/16x16/download.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-color: var(--tab-controls);
+}
+
+#export-inspector-button:hover {
+    background-color: var(--tab-button-background);
+}
+
 .tab-content {
     height: calc(100% - 40px);
 

Base/res/ladybird/inspector.js

@@ -91,6 +91,11 @@ const scrollToElement = element => {
     window.scrollTo(0, position);
 };
 
+inspector.exportInspector = () => {
+    const html = document.documentElement.outerHTML;
+    inspector.exportInspectorHTML(html);
+};
+
 inspector.reset = () => {
     let domTree = document.getElementById("dom-tree");
     domTree.innerHTML = "";