Printer (GoogleChrome#858)

* Add printer status listener. * Show printer status in popup. * Fix Status display. * Implement cancelJob(). * Correct script typos. * Add important keyword to CSS. * Refactor element pointers. * Rewrite callbacks to promises. * Fix CSS. * Fix variable name. * Move Print button to front of line. * Restore old style of submitJob(). * Fix bugs. * adding print job table along with cancel button (GoogleChrome#847) * adding print job table along with cancel button * make cancel button hidden conditionally and scroll to buttom after print button is clicked * Fix spelling. * Update api-samples/printing/printers.js * Add README file. * Readme corrections. * Update api-samples/printing/README.md * Update api-samples/printing/README.md * Update api-samples/printing/README.md * Create an addCell() function. * Fix position of addCell(). * Rearange popup layout. * More rearranging. * Add a warning about the print job table. * Feedback from Patrick. * Lint and update strings. --------- Co-authored-by: rayxu-google <[email protected]>
ChiefUSA · Apr 5, 2023 · d7f3d83 · d7f3d83
1 parent 0c7e9b6
commit d7f3d83
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 21 deletions.
diff --git a/api-samples/printing/README.md b/api-samples/printing/README.md
@@ -0,0 +1,13 @@
+# chrome.printing
+
+This sample demonstrates all four methods of the `chrome.printing` namespace. 
+
+## Overview
+
+The `chrome.printing` namespace only works on ChromeOS. The sample demonstrates how to get a list of available printers and display it to a user. A 'Print' button sends a sample PDF to the selected printer and makes a 'Cancel Printing' visible. This button is visible while the print job's status is `"PENDING"` or `"IN_PROGRESS"`. Note that on some systems, the print job is passed to the printer so quickly that you may never see the 'Cancel Printing' button.
+
+If the extension is not listed in [`PrintingAPIExtensionsAllowlist`](https://chromeenterprise.google/policies/#PrintingAPIExtensionsAllowlist) policy, the user will be prompted to accept the print job.
+
+## Implementation Notes
+
+Note that the `submitJob()` function  throws an error when returning a promise ([crbug: 1422837](https://bugs.chromium.org/p/chromium/issues/detail?id=1422837)).
diff --git a/api-samples/printing/printers.html b/api-samples/printing/printers.html
@@ -12,7 +12,26 @@
   </head>
 
   <body>
+    <h2>Print Job:</h2>
+    <p>On some systems, the print job may leave the queue too quickly to be visible in this list.</p>
+    <div id="printJob">
+      <table id="printJobTable">
+        <thread>
+          <tr>
+            <th>Cancel</th>
+            <th>Job Id</th>
+            <th>Status</th>
+          </tr>
+        </thread>
+        <tbody id="printJobTbody"></tbody>
+      </table>
+    </div>
+
     <h2>Printers:</h2>
+    <div id="statusDiv">
+      <p id="jobStatus">JobId: <div id="jobIdDiv"></div></p>
+      <button id="cancelBtn">Cancel Printing</button>
+    </div>
     <div id="printers">
       <table id="printersTable">
         <thead>

diff --git a/api-samples/printing/printers.js b/api-samples/printing/printers.js
@@ -44,24 +44,40 @@ function onPrintButtonClicked(printerId, dpi) {
         if (chrome.runtime.lastError !== undefined) {
           console.log(chrome.runtime.lastError.message);
         }
+        window.scrollTo(0, document.body.scrollHeight);
       });
     });
 }
 
-function createPrintButton(onClicked) {
+function onCancelButtonClicked(jobId) {
+  chrome.printing.cancelJob(jobId).then((response) => {
+    if (response !== undefined) {
+      console.log(response.status);
+    }
+    if (chrome.runtime.lastError !== undefined) {
+      console.log(chrome.runtime.lastError.message);
+    }
+  });
+}
+
+function createButton(label, onClicked) {
   const button = document.createElement('button');
-  button.innerHTML = 'Print';
+  button.innerHTML = label;
   button.onclick = onClicked;
   return button;
 }
 
+function addCell(parent) {
+  const newCell = document.createElement('td');
+  parent.appendChild(newCell);
+  return newCell;
+}
+
 function createPrintersTable() {
-  chrome.printing.getPrinters(function (printers) {
+  chrome.printing.getPrinters().then((printers) => {
     const tbody = document.createElement('tbody');
-
-    for (let i = 0; i < printers.length; ++i) {
-      const printer = printers[i];
-      chrome.printing.getPrinterInfo(printer.id, function (response) {
+    printers.forEach((printer) => {
+      chrome.printing.getPrinterInfo(printer.id).then((printerInfo) => {
         const columnValues = [
           printer.id,
           printer.name,
@@ -70,38 +86,68 @@ function createPrintersTable() {
           printer.source,
           printer.isDefault,
           printer.recentlyUsedRank,
-          JSON.stringify(response.capabilities),
-          response.status
+          JSON.stringify(printerInfo.capabilities),
+          printerInfo.status
         ];
 
         let tr = document.createElement('tr');
-        for (const columnValue of columnValues) {
-          const td = document.createElement('td');
-          td.appendChild(document.createTextNode(columnValue));
-          td.setAttribute('align', 'center');
-          tr.appendChild(td);
-        }
-
         const printTd = document.createElement('td');
         printTd.appendChild(
-          createPrintButton(function () {
+          createButton('Print', () => {
             onPrintButtonClicked(
               printer.id,
-              response.capabilities.printer.dpi.option[0]
+              printerInfo.capabilities.printer.dpi.option[0]
             );
           })
         );
+
         tr.appendChild(printTd);
 
+        for (const columnValue of columnValues) {
+          const td = document.createElement('td');
+          td.appendChild(document.createTextNode(columnValue));
+          td.setAttribute('align', 'center');
+          tr.appendChild(td);
+        }
+
         tbody.appendChild(tr);
       });
-    }
-
+    });
     const table = document.getElementById('printersTable');
     table.appendChild(tbody);
   });
+
+  chrome.printing.onJobStatusChanged.addListener((jobId, status) => {
+    console.log(`jobId: ${jobId}, status: ${status}`);
+    let jobTr = document.getElementById(jobId);
+    if (jobTr == undefined) {
+      jobTr = document.createElement('tr');
+      jobTr.setAttribute('id', jobId);
+
+      const cancelTd = addCell(jobTr);
+      let cancelBtn = createButton('Cancel', () => {
+        onCancelButtonClicked(jobId);
+      });
+      cancelBtn.setAttribute(`id ${jobId}-cancelBtn`);
+      cancelTd.appendChild(cancelBtn);
+
+      const jobIdTd = addCell(jobTr);
+      jobIdTd.appendChild(document.createTextNode(jobId));
+
+      let jobStatusTd = addCell(jobTr);
+      jobStatusTd.id = `${jobId}-status`;
+      jobStatusTd.appendChild(document.createTextNode(status));
+
+      document.getElementById('printJobTbody').appendChild(jobTr);
+    } else {
+      document.getElementById(`jobId${-status}`).innerText = status;
+      if (status !== 'PENDING' && status !== 'IN_PROGRESS') {
+        jobTr.remove();
+      }
+    }
+  });
 }
 
-document.addEventListener('DOMContentLoaded', function () {
+document.addEventListener('DOMContentLoaded', () => {
   createPrintersTable();
 });