[Policy] Enhance buttons UI

It can be useful to provide a link to the Policy Logs page on the Policy page. Adding an extra button broke the already dated button UI. The problem can be solved by using a dropdown and updating buttons look. The same changes are also applied on the Policy Logs page. screenshot: https://drive.google.com/file/d/1ilLDFemQ7o0yY8NoVChhGp_QXGmnMSh-/view?usp=sharing R=esalma@google.com Change-Id: Ia384e9ac696347a8801a35cbf00c3a1829a04add Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4760284 Reviewed-by: Salma Elmahallawy <esalma@google.com> Reviewed-by: Mike Dougherty <michaeldo@chromium.org> Reviewed-by: John Lee <johntlee@chromium.org> Commit-Queue: Aryan Kaushik <aryankaushik2023@gmail.com> Reviewed-by: Yann Dago <ydago@chromium.org> Cr-Commit-Position: refs/heads/main@{#1187695}
chromium · Aug 24, 2023 · 17637fd · 17637fd
1 parent 0b26e87
commit 17637fd
Show file tree

Hide file tree

Showing 10 changed files with 137 additions and 9 deletions.
diff --git a/chrome/browser/ui/webui/policy/policy_ui.cc b/chrome/browser/ui/webui/policy/policy_ui.cc
@@ -115,6 +115,7 @@ void CreateAndAddPolicyUIHtmlSource(Profile* profile) {
     {"labelUsername", IDS_POLICY_LABEL_USERNAME},
     {"labelManagedBy", IDS_POLICY_LABEL_MANAGED_BY},
     {"labelVersion", IDS_POLICY_LABEL_VERSION},
+    {"moreActions", IDS_POLICY_MORE_ACTIONS},
     {"noPoliciesSet", IDS_POLICY_NO_POLICIES_SET},
     {"offHoursActive", IDS_POLICY_OFFHOURS_ACTIVE},
     {"offHoursNotActive", IDS_POLICY_OFFHOURS_NOT_ACTIVE},
@@ -140,6 +141,7 @@ void CreateAndAddPolicyUIHtmlSource(Profile* profile) {
 #if !BUILDFLAG(IS_CHROMEOS)
     {"uploadReport", IDS_UPLOAD_REPORT},
 #endif  // !BUILDFLAG(IS_CHROMEOS)
+    {"viewLogs", IDS_VIEW_POLICY_LOGS},
   };
   source->AddLocalizedStrings(kStrings);
 

diff --git a/components/policy/resources/webui/logs/policy_logs.html b/components/policy/resources/webui/logs/policy_logs.html
@@ -17,6 +17,24 @@
       align-items: center;
       display: flex;
       height: 56px;
+      flex-wrap: nowrap;
+      gap: 8px;
+    }
+
+    button {
+      align-items: center;
+      border-radius: 4px;
+      border: 1px solid rgb(128, 134, 139);
+      background: rgb(241, 243, 244); /* Google grey 100 */
+      box-sizing: border-box;
+      cursor: pointer;
+      display: inline-flex;
+      flex-shrink: 0;
+      height: 32px;
+      justify-content: center;
+      outline-width: 0;
+      padding: 8px 16px;
+      user-select: none;
     }
 
     .label {

diff --git a/components/policy/resources/webui/policy.css b/components/policy/resources/webui/policy.css
@@ -59,6 +59,77 @@ body > header {
 .action-row-buttons {
   display: flex;
   flex-wrap: nowrap;
+  gap: 8px;
+}
+
+#more-actions-dropdown {
+  float: left;
+  overflow: hidden;
+}
+
+#more-actions-dropdown #more-actions-button {
+  cursor: pointer;
+}
+
+#more-actions-list {
+  position: absolute;
+  background-color: white;
+  min-width: 130px;
+  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),
+              0 6px 10px 0 rgba(0,0,0,.14),
+              0 1px 18px 0 rgba(0,0,0,.12);
+  z-index: 1;
+}
+
+#more-actions-list button,
+#more-actions-list a {
+  background-color: rgb(255, 255, 255);
+  border: none;
+  color: black;
+  display: block;
+  float: none;
+  padding: 12px 16px;
+  text-align: left;
+  text-decoration: none;
+}
+
+#more-actions-list button {
+  width: 100%;
+}
+
+#more-actions-list button:hover,
+#more-actions-list a:hover {
+  background-color: rgb(247, 248, 248);
+}
+
+.more-actions-visibility {
+  display: none;
+}
+
+#more-actions-button {
+  padding: 8px 8px 8px 16px;
+}
+
+#dropdown-icon {
+  background-image: url(chrome://resources/images/icon_arrow_dropdown.svg);
+  background-size: cover;
+  width: 20px;
+  height: 20px;
+}
+
+.action-row-button {
+  align-items: center;
+  border-radius: 4px;
+  border: 1px solid rgb(128, 134, 139);
+  background: rgb(241, 243, 244); /* Google grey 100 */
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  height: 32px;
+  justify-content: center;
+  outline-width: 0;
+  padding: 8px 16px;
+  user-select: none;
 }
 
 #topbar {

diff --git a/components/policy/resources/webui/policy.html b/components/policy/resources/webui/policy.html
@@ -33,12 +33,23 @@ <h1 id="topbar-title">$i18n{title}</h1>
     </div>
     <div class="header-row action-header-row">
       <div class="action-row-buttons">
-        <button id="reload-policies">$i18n{reloadPolicies}</button>
-        <button id="export-policies">$i18n{exportPoliciesJSON}</button>
-        <button id="copy-policies">$i18n{copyPoliciesJSON}</button>
-        <if expr="not is_chromeos">
-          <button id="upload-report">$i18n{uploadReport}</button>
-        </if>
+        <button id="reload-policies" class="action-row-button">
+          $i18n{reloadPolicies}
+        </button>
+        <div id="more-actions-dropdown">
+          <button id="more-actions-button" class="action-row-button">
+            $i18n{moreActions}
+            <div id="dropdown-icon"></div>
+          </button>
+          <div id="more-actions-list" class="more-actions-visibility">
+              <button id="export-policies">$i18n{exportPoliciesJSON}</button>
+              <button id="copy-policies">$i18n{copyPoliciesJSON}</button>
+              <if expr="not is_chromeos">
+                <button id="upload-report">$i18n{uploadReport}</button>
+              </if>
+              <a href="chrome://policy/logs" id="view-logs">$i18n{viewLogs}</a>
+          </div>
+        </div>
       </div>
       <div id="show-unset-container" class="show-unset-checkbox">
         <label>

diff --git a/components/policy/resources/webui/policy_base.ts b/components/policy/resources/webui/policy_base.ts
@@ -82,6 +82,23 @@ export class Page {
       sendWithPromise('reloadPolicies');
     };
 
+    const moreActionsButton =
+        getRequiredElement('more-actions-button') as HTMLButtonElement;
+    const moreActionsIcon = getRequiredElement('dropdown-icon') as HTMLElement;
+    const moreActionsList =
+        getRequiredElement('more-actions-list') as HTMLElement;
+    moreActionsButton.onclick = () => {
+      moreActionsList!.classList.toggle('more-actions-visibility');
+    };
+
+    // Close dropdown if user clicks anywhere on page.
+    document.addEventListener('click', function(event) {
+      if (moreActionsList && event.target !== moreActionsButton &&
+          event.target !== moreActionsIcon) {
+        moreActionsList.classList.add('more-actions-visibility');
+      }
+    });
+
     const exportButton = getRequiredElement('export-policies');
     const hideExportButton = loadTimeData.valueExists('hideExportButton') &&
         loadTimeData.getBoolean('hideExportButton');
@@ -259,7 +276,7 @@ export class Page {
    */
   updateReportButton(enabled: boolean) {
     getRequiredElement('upload-report').style.display =
-        enabled ? 'inline-block' : 'none';
+        enabled ? 'block' : 'none';
   }
   // </if>
 

diff --git a/components/policy_strings.grdp b/components/policy_strings.grdp
@@ -725,6 +725,12 @@ Additional details:
   <message name="IDS_COPY_POLICIES_JSON" desc="Label for the button that copies policies in JSON format.">
     Copy as JSON
   </message>
+  <message name="IDS_VIEW_POLICY_LOGS" desc="Label for the button that redirects from chrome://policy to chrome://policy/logs.">
+    View logs
+  </message>
+  <message name="IDS_POLICY_MORE_ACTIONS" desc="Label for the dropdown menu on the chrome://policy page that offers additional actions such as downloading policy data as a JSON file, uploading report or showing policy logs.">
+    More actions
+  </message>
 
   <!-- Strings for chrome://policy/logs -->
   <message name="IDS_POLICY_LOGS_TITLE" desc="Title for the page.">

diff --git a/components/policy_strings_grdp/IDS_POLICY_MORE_ACTIONS.png.sha1 b/components/policy_strings_grdp/IDS_POLICY_MORE_ACTIONS.png.sha1
@@ -0,0 +1 @@
+0a0ae7252ba154f431a917c2aab385eafb7af7f9
diff --git a/components/policy_strings_grdp/IDS_VIEW_POLICY_LOGS.png.sha1 b/components/policy_strings_grdp/IDS_VIEW_POLICY_LOGS.png.sha1
@@ -0,0 +1 @@
+0a0ae7252ba154f431a917c2aab385eafb7af7f9
diff --git a/ios/chrome/browser/ui/webui/policy/policy_ui.mm b/ios/chrome/browser/ui/webui/policy/policy_ui.mm
@@ -82,6 +82,7 @@
       {"labelUsername", IDS_POLICY_LABEL_USERNAME},
       {"labelManagedBy", IDS_POLICY_LABEL_MANAGED_BY},
       {"labelVersion", IDS_POLICY_LABEL_VERSION},
+      {"moreActions", IDS_POLICY_MORE_ACTIONS},
       {"noPoliciesSet", IDS_POLICY_NO_POLICIES_SET},
       {"offHoursActive", IDS_POLICY_OFFHOURS_ACTIVE},
       {"offHoursNotActive", IDS_POLICY_OFFHOURS_NOT_ACTIVE},
@@ -102,7 +103,7 @@
       {"statusMachine", IDS_POLICY_STATUS_MACHINE},
       {"statusUser", IDS_POLICY_STATUS_USER},
       {"uploadReport", IDS_UPLOAD_REPORT},
-
+      {"viewLogs", IDS_VIEW_POLICY_LOGS},
   };
   source->AddLocalizedStrings(kStrings);
 

diff --git a/ui/webui/resources/images/BUILD.gn b/ui/webui/resources/images/BUILD.gn
@@ -25,6 +25,7 @@ generate_grd("build_grdp") {
     "error.svg",
     "error_yellow900.svg",
     "extension.svg",
+    "icon_arrow_dropdown.svg",
     "icon_cancel.svg",
     "icon_copy_content.svg",
     "icon_file.png",
@@ -52,7 +53,6 @@ generate_grd("build_grdp") {
       "chrome_logo_dark.svg",
       "dark/arrow_down.svg",
       "icon_arrow_back.svg",
-      "icon_arrow_dropdown.svg",
       "icon_bookmark.svg",
       "icon_clear.svg",
       "icon_clock.svg",