Add 'Managed by' UI on chrome://downloads

Adds a message for managed users at the top of the chrome://downloads
page.

Enterprise users will now see a message that says "Your browser is
managed by your organization", with a link they can click to view a help
center article.

The new UI is hidden behind a flag so that most users don't see this WIP
feature just yet.

Bug: 893628
Change-Id: I23781e239e3b87e7b8d4f59a679292774eea54a3
Reviewed-on: https://chromium-review.googlesource.com/c/1352616Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Nicolas Ouellet-Payeur <nicolaso@chromium.org>
Cr-Commit-Position: refs/heads/master@{#615900}

chrome/browser/resources/md_downloads/i18n_setup.html

-<script src="chrome://resources/js/load_time_data.js"></script>
+<link rel="import" href="chrome://resources/html/load_time_data.html">
+
 <script src="chrome://downloads/strings.js"></script>

chrome/browser/resources/md_downloads/manager.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_components/managed_footnote/managed_footnote.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
@@ -44,10 +45,6 @@
       #downloadsList {
         min-width: calc(
           var(--downloads-card-width) + 2 * var(--downloads-card-margin));
-        /* TODO(dbeam): we're not setting scrollTarget explicitly, yet
-         * style="overflow: auto" is still being set by <iron-list>'s JS. Weird.
-         */
-        overflow-y: overlay !important;
       }
 
       #no-downloads,
@@ -84,7 +81,25 @@
       #mainContainer {
         display: flex;
         flex: 1;
-        overflow: auto;
+        flex-direction: column;
+        height: 100%;
+        overflow-y: overlay;
+      }
+
+      managed-footnote {
+        border-top: none;
+        /* margin-bottom is needed to compensate for the next element's 21px
+         * margin at the top and 8px padding at the top. This leaves a 12px
+         * padding between this element's content and the top of the next
+         * element's text. */
+        margin-bottom: calc(-21px - 8px);
+        min-width: calc(
+            var(--downloads-card-width) + 2 * var(--downloads-card-margin));
+        padding-bottom: 12px;
+        padding-top: 12px;
+        /* The next element spills over this element. This ensures the link
+         * is clickable. */
+        z-index: 1;
       }
     </style>
 
@@ -92,9 +107,10 @@
         role="none" on-search-changed="onSearchChanged_">
     </downloads-toolbar>
     <div id="drop-shadow"></div>
-    <div id="mainContainer">
+    <div id="mainContainer" on-scroll="onScroll_">
+      <managed-footnote hidden="[[inSearchMode_]]"></managed-footnote>
       <iron-list id="downloadsList" items="[[items_]]"
-          hidden="[[!hasDownloads_]]" on-scroll="onListScroll_">
+          hidden="[[!hasDownloads_]]" scroll-target="mainContainer">
         <template>
           <downloads-item data="[[item]]"></downloads-item>
         </template>

chrome/browser/resources/md_downloads/manager.js

@@ -194,13 +194,15 @@ cr.define('downloads', function() {
     },
 
     /** @private */
-    onListScroll_: function() {
-      const list = this.$.downloadsList;
-      if (list.scrollHeight - list.scrollTop - list.offsetHeight <= 100) {
+    onScroll_: function() {
+      const container = this.$.downloadsList.scrollTarget;
+      const distanceToBottom =
+          container.scrollHeight - container.scrollTop - container.offsetHeight;
+      if (distanceToBottom <= 100) {
         // Approaching the end of the scrollback. Attempt to load more items.
         this.searchService_.loadMore();
       }
-      this.hasShadow_ = list.scrollTop > 0;
+      this.hasShadow_ = container.scrollTop > 0;
     },
 
     /**
@@ -226,7 +228,7 @@ cr.define('downloads', function() {
      * @private
      */
     removeItem_: function(index) {
-      let removed = this.items_.splice(index, 1);
+      const removed = this.items_.splice(index, 1);
       this.updateHideDates_(index, index);
       this.notifySplices('items_', [{
                            index: index,
@@ -235,7 +237,7 @@ cr.define('downloads', function() {
                            type: 'splice',
                            removed: removed,
                          }]);
-      this.onListScroll_();
+      this.onScroll_();
     },
 
     /**

chrome/browser/ui/webui/md_downloads/md_downloads_ui.cc

@@ -13,6 +13,7 @@
 #include "base/values.h"
 #include "chrome/browser/defaults.h"
 #include "chrome/browser/profiles/profile.h"
+#include "chrome/browser/ui/managed_ui.h"
 #include "chrome/browser/ui/webui/dark_mode_handler.h"
 #include "chrome/browser/ui/webui/md_downloads/md_downloads_dom_handler.h"
 #include "chrome/browser/ui/webui/metrics_handler.h"
@@ -108,6 +109,9 @@ content::WebUIDataSource* CreateDownloadsUIHTMLSource(Profile* profile) {
   source->AddResourcePath("md_downloads.mojom-lite.js",
                           IDR_MD_DOWNLOADS_MOJO_LITE_JS);
 
+  source->AddBoolean("isManaged", chrome::ShouldDisplayManagedUi(profile));
+  source->AddLocalizedString("managedByOrg", IDS_MANAGED_BY_ORG_WITH_HYPERLINK);
+
 #if BUILDFLAG(OPTIMIZE_WEBUI)
   source->UseGzip({"1x/incognito_marker.png", "1x/no_downloads.png",
                    "2x/incognito_marker.png", "2x/no_downloads.png",

chrome/test/data/webui/md_downloads/manager_tests.js

@@ -118,4 +118,10 @@ suite('manager tests', function() {
           assertTrue(list.hidden);
         });
   });
+
+  test('loadTimeData contains isManaged and managedByOrg', function() {
+    // Check that loadTimeData contains these values.
+    loadTimeData.getBoolean('isManaged');
+    loadTimeData.getString('managedByOrg');
+  });
 });

ui/webui/resources/cr_components/managed_footnote/managed_footnote.html

@@ -26,10 +26,6 @@
         display: flex;
       }
 
-      :host([noborder]) {
-        border-top: none;
-      }
-
       a[href] {
         color: var(--google-blue-500);
         text-decoration: none;