Bug 1723583: add tab dialog box to screenshots component r=sfoster

Differential Revision: https://phabricator.services.mozilla.com/D120745
2021-08-05 16:50:03 +00:00 · 2021-08-05 16:50:03 +00:00 · c5375c273c
--- a/browser/components/screenshots/ScreenshotsUtils.jsm
+++ b/browser/components/screenshots/ScreenshotsUtils.jsm
@ -13,7 +13,15 @@ var ScreenshotsUtils = {
    Services.obs.addObserver(this, "menuitem-screenshot");
  },
  observe(subj, topic, data) {
-    let document = subj.document;
-    document.createXULElement("screenshots-div");
+    let { gBrowser } = subj;
+    let browser = gBrowser.selectedBrowser;
+
+    // init UI as a tab dialog box
+    let dialogBox = gBrowser.getTabDialogBox(browser);
+
+    return dialogBox.open(
+      `chrome://browser/content/screenshots/screenshots.html?browsingContextId=${browser.browsingContext.id}`,
+      { features: "resizable=no", sizeTo: "available" }
+    );
  },
 };
--- a/browser/components/screenshots/content/screenshots.css
+++ b/browser/components/screenshots/content/screenshots.css
@ -0,0 +1,11 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+html, body {
+  padding:  0;
+  margin:  0;
+  background-color: transparent;
+  height: 100vh;
+  width: 100vw;
+}
--- a/browser/components/screenshots/content/screenshots.html
+++ b/browser/components/screenshots/content/screenshots.html
@ -0,0 +1,22 @@
+<!doctype html>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this file,
+   - You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <meta http-equiv="Content-Security-Policy" content="default-src chrome:;img-src data:; object-src 'none'">
+
+    <link rel="localization" href="browser/screenshots.ftl">
+
+    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
+    <link rel="stylesheet" href="chrome://browser/content/screenshots/screenshots.css">
+    <script defer src="chrome://browser/content/screenshots/screenshots.js"></script>
+  </head>
+
+  <body>
+    <template id="screenshots-dialog-template"></template>
+    <screenshots-ui></screenshots-ui>
+  </body>
+</html>
--- a/browser/components/screenshots/content/screenshots.js
+++ b/browser/components/screenshots/content/screenshots.js
@ -8,10 +8,24 @@ class ScreenshotsUI extends HTMLElement {
  constructor() {
    super();
  }
-  get markup() {
-    return `
-    `;
+  connectedCallback() {
+    this.initialize();
+  }
+
+  initialize() {
+    if (this._initialized) {
+      return;
+    }
+    this._initialized = true;
+    let template = this.ownerDocument.getElementById(
+      "screenshots-dialog-template"
+    );
+    let templateContent = template.content;
+    this.appendChild(templateContent.cloneNode(true));
+  }
+
+  handleEvent(event) {
+    // TODO: handle button clicks
  }
 }
-
-customElements.define("screenshots-div", ScreenshotsUI);
+customElements.define("screenshots-ui", ScreenshotsUI);
--- a/browser/components/screenshots/jar.mn
+++ b/browser/components/screenshots/jar.mn
@ -12,3 +12,5 @@ browser.jar:
        content/browser/screenshots/menu-fullpage.svg                  (content/menu-fullpage.svg)
        content/browser/screenshots/menu-visible.svg                   (content/menu-visible.svg)
        content/browser/screenshots/screenshots.js                     (content/screenshots.js)
+        content/browser/screenshots/screenshots.css                    (content/screenshots.css)
+        content/browser/screenshots/screenshots.html                   (content/screenshots.html)