Implement dynamic columns sizing to print management app

- Columns will now resize based on the app's window width thresholds.
- Small widths with result in "Printing" being displayed instead of the
  full ongoing status.

600px <= width < 768px: https://screenshot.googleplex.com/Gt1NOywa0D8
768px <= width < 960px: https://screenshot.googleplex.com/m2ObTzxwk0S
960px <= width < 1280px: https://screenshot.googleplex.com/aCBRd5CBBYx
<= 1280px: https://screenshot.googleplex.com/v1ucYjEi7Td

Bug: 1053704, 1101174
Change-Id: I67eabbb37845e25391cfe984b40a66cae474f312
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2270107
Commit-Queue: Jimmy Gong <jimmyxgong@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#784406}

chromeos/chromeos_strings.grd

@@ -406,6 +406,9 @@ Try tapping the mic to ask me anything.
       <message name="IDS_PRINT_MANAGEMENT_CANCELED_PRINT_JOB_ARIA_ANNOUNCEMENT" desc="The announcement said to notify ChromeVox that a print job was recently cancelled.">
         Cancelled print job <ph name="DOCUMENT_TITLE">$1<ex>my_essay.doc</ex></ph>
       </message>
+      <message name="IDS_PRINT_MANAGEMENT_COLLAPSE_PRINTING_STATUS" desc="A text that indicates to the user that the print job is currently printing. This text only appears if the width of the app's window is small and cannot display the entire ongoing printing status.">
+        Printing
+      </message>
     </messages>
   </release>
 </grit>

chromeos/chromeos_strings_grd/IDS_PRINT_MANAGEMENT_COLLAPSE_PRINTING_STATUS.png.sha1

+27f0e404b058a45c5ca6014985cd055838255618
\ No newline at end of file

chromeos/components/print_management/print_management_ui.cc

@@ -86,7 +86,7 @@ void AddPrintManagementStrings(content::WebUIDataSource* html_source) {
        IDS_PRINT_MANAGEMENT_CANCEL_PRINT_JOB_BUTTON_LABEL},
       {"cancelledPrintJob",
        IDS_PRINT_MANAGEMENT_CANCELED_PRINT_JOB_ARIA_ANNOUNCEMENT},
-  };
+      {"collapsedPrintingText", IDS_PRINT_MANAGEMENT_COLLAPSE_PRINTING_STATUS}};
 
   for (const auto& str : kLocalizedStrings) {
     html_source->AddLocalizedString(str.name, str.id);

chromeos/components/print_management/resources/print_job_entry.html

@@ -17,6 +17,7 @@
 
   .list-item {
     min-height: 40px;
+    overflow: hidden;
     padding: 0;
   }
 
@@ -26,6 +27,11 @@
     padding-bottom: 2px;
   }
 
+  #collapsedStatus {
+    @apply --print-management-header-font;
+    color: var(--google-blue-600);
+  }
+
   #fileIcon {
     margin-inline-end: 16px;
     margin-inline-start: 12px;
@@ -50,21 +56,23 @@
     <iron-icon id="fileIcon" class="flex-center"
         icon="[[getFileIcon_(jobTitle_)]]" alt="">
     </iron-icon>
-    <div id="jobTitle" class="long-text overflow-ellipsis" aria-hidden="true">
+    <div id="jobTitle" class="file-name-column overflow-ellipsis"
+        aria-hidden="true">
       [[jobTitle_]]
     </div>
     <div id="printerName"
-        class="medium-text overflow-ellipsis padded-left" aria-hidden="true">
+        class="printer-name-column overflow-ellipsis padded-left"
+        aria-hidden="true">
       [[printerName_]]
     </div>
-    <div id="creationTime" class="short-text overflow-ellipsis padded-left"
+    <div id="creationTime" class="date-column overflow-ellipsis padded-left"
         aria-hidden="true">
       [[creationTime_]]
     </div>
 
     <template is="dom-if" if="[[isCompletedPrintJob_(jobEntry)]]" restamp>
       <div id="completionStatus"
-          class="medium-text overflow-ellipsis padded-left"
+          class="status-column overflow-ellipsis padded-left"
           focus-row-control
           focus-type="completedStatus"
           aria-hidden="true">
@@ -73,17 +81,26 @@
     </template>
 
     <template is="dom-if" if="[[!isCompletedPrintJob_(jobEntry)]]" restamp>
+      <iron-media-query query="(min-width: 768px)"
+          query-matches="{{showFullOngoingStatus_}}">
+      </iron-media-query>
       <div id="activeStatusContainer"
-          class="medium-text padded-left flex-center">
-        <div id="numericalProgress" aria-hidden="true">
-          [[readableProgress_]]
-        </div>
-        <paper-progress
-            value="[[computePrintPagesProgress_(
-                jobEntry.activePrintJobInfo.printedPages,
-                jobEntry.numberOfPages)]]"
+          class="status-column padded-left flex-center">
+        <template is="dom-if" if="[[showFullOngoingStatus_]]">
+          <div id="numericalProgress" aria-hidden="true">
+            [[readableProgress_]]
+          </div>
+          <paper-progress
+              value="[[computePrintPagesProgress_(
+                  jobEntry.activePrintJobInfo.printedPages,
+                  jobEntry.numberOfPages)]]"
+              aria-hidden="true">
+          </paper-progress>
+        </template>
+        <div id="collapsedStatus" hidden="[[showFullOngoingStatus_]]"
             aria-hidden="true">
-        </paper-progress>
+          [[i18n('collapsedPrintingText')]]
+        </div>
         <cr-icon-button id="cancelPrintJobButton"
             iron-icon="print-management:cancel"
             focus-row-control

chromeos/components/print_management/resources/print_job_entry.js

@@ -10,6 +10,7 @@ import 'chrome://resources/mojo/mojo/public/mojom/base/string16.mojom-lite.js';
 import 'chrome://resources/mojo/mojo/public/mojom/base/time.mojom-lite.js';
 import 'chrome://resources/mojo/url/mojom/url.mojom-lite.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
+import 'chrome://resources/polymer/v3_0/iron-media-query/iron-media-query.js';
 import 'chrome://resources/polymer/v3_0/paper-progress/paper-progress.js';
 import './icons.js';
 import './print_management_fonts_css.js';
@@ -211,7 +212,13 @@ Polymer({
       computed: 'getJobEntryAriaLabel_(jobEntry, jobTitle_, printerName_, ' +
           'creationTime_, completionStatus_, ' +
           'jobEntry.activePrintJobinfo.printedPages, jobEntry.numberOfPages)',
-    }
+    },
+
+    /**
+     * This is only updated by media queries from window width changes.
+     * @private
+     */
+    showFullOngoingStatus_: Boolean,
   },
 
   /** @override */

chromeos/components/print_management/resources/print_management.html

@@ -34,10 +34,6 @@
     margin-inline-end: 4px;
   }
 
-  #fileNameColumn {
-    width: 368px;
-  }
-
   #headerContainer {
     border-bottom: 1px solid rgba(0,0,0,0.14); /* 14% black */
     display: flex;
@@ -81,7 +77,7 @@
   }
 </style>
 
-<div class="main-container cr-centered-card-container">
+<div class="main-container margin-border">
   <div id="headerContainer">
     <h1 id="printJobTitle">[[i18n('printJobTitle')]]</h1>
     <div id="clearAllContainer">
@@ -106,19 +102,20 @@
 
   <div class="column-headers flex-center"
       aria-labeledby="fileNameColumn printerNameColumn dateColumn statusColumn">
-    <div id="fileNameColumn" class="overflow-ellipsis" aria-hidden="true">
+    <div id="fileNameColumn" class="file-name-header-column overflow-ellipsis"
+        aria-hidden="true">
       [[i18n('fileNameColumn')]]
     </div>
     <div id="printerNameColumn"
-        class="medium-text overflow-ellipsis padded-left"
+        class="printer-name-column overflow-ellipsis padded-left"
         aria-hidden="true">
       [[i18n('printerNameColumn')]]
     </div>
-    <div id="dateColumn" class="short-text overflow-ellipsis padded-left"
+    <div id="dateColumn" class="date-column overflow-ellipsis padded-left"
         aria-hidden="true">
       [[i18n('dateColumn')]]
     </div>
-    <div id="statusColumn" class="medium-text overflow-ellipsis padded-left"
+    <div id="statusColumn" class="status-column overflow-ellipsis padded-left"
         aria-hidden="true">
       [[i18n('statusColumn')]]
     </div>

chromeos/components/print_management/resources/print_management_shared_css.html

@@ -13,26 +13,130 @@
       display: flex;
     }
 
-    .long-text {
-      width: 320px;
-    }
-
-    .medium-text {
-      width: 200px;
-    }
-
     .overflow-ellipsis {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
-    .padded-left {
-      margin-inline-start: 48px;
+    @media (min-width:600px) and (max-width: 767px) {
+      .date-column {
+        width: 56px;
+      }
+
+      .file-name-column {
+        width: 176px;
+      }
+
+      .file-name-header-column {
+        width: 224px;
+      }
+
+      .margin-border {
+        margin: 0px 40px 0px 40px;
+      }
+
+      .padded-left {
+        margin-inline-start: 32px;
+      }
+
+      .printer-name-column {
+        width: 68px;
+      }
+
+      .status-column {
+        width: 124px;
+      }
+    }
+
+    @media (min-width:768px) and (max-width: 959px) {
+      .date-column {
+        width: 82px;
+      }
+
+      .file-name-column {
+        width: 216px;
+      }
+
+      .file-name-header-column {
+        width: 264px;
+      }
+
+      .margin-border {
+        margin: 0px 40px 0px 40px;
+      }
+
+      .padded-left {
+        margin-inline-start: 40px;
+      }
+
+      .printer-name-column {
+        width: 88px;
+      }
+
+      .status-column {
+        width: 182px;
+      }
+    }
+
+    @media (min-width:960px) and (max-width: 1279px) {
+      .date-column {
+        width: 82px;
+      }
+
+      .file-name-column {
+        width: 272px;
+      }
+
+      .file-name-header-column {
+        width: 320px;
+      }
+
+      .margin-border {
+        margin: 0px 64px 0px 64px;
+      }
+
+      .padded-left {
+        margin-inline-start: 48px;
+      }
+
+      .printer-name-column {
+        width: 152px;
+      }
+
+      .status-column {
+        width: 182px;
+      }
     }
 
-    .short-text {
-      width: 100px;
+    @media (min-width:1280px) {
+      .date-column {
+        width: 144px;
+      }
+
+      .file-name-column {
+        width: 308px;
+      }
+
+      .file-name-header-column {
+        width: 356px;
+      }
+
+      .margin-border {
+        margin: 0px 144px 0px 144px;
+      }
+
+      .padded-left {
+        margin-inline-start: 56px;
+      }
+
+      .printer-name-column {
+        width: 190px;
+      }
+
+      .status-column {
+        width: 182px;
+      }
     }
   </style>
-</template>
\ No newline at end of file
+</template>