Add tab for PackageReference (#5656)

* Add 'user-select: all' to make it easier to select the entire text

* Add PackageReference tab

* Add customizable CopyLabel property as 'command' doesn't fit XML node

Author: khellang

src/Bootstrap/dist/css/bootstrap-theme.css

@@ -172,6 +172,7 @@
           border-color: @panel-footer-bg;
           border-style: solid;
           border-width: 1px 0 1px 1px;
+          user-select: all;
         }
 
         .copy-button {

src/Bootstrap/less/theme/page-display-package.less

@@ -8,6 +8,12 @@ namespace NuGetGallery
     /// </summary>
     public class PackageManagerViewModel
     {
+        public PackageManagerViewModel(string name)
+        {
+            Name = name;
+            CopyLabel = string.Format("Copy the {0} command", name);
+        }
+
         /// <summary>
         /// The package manager's name.
         /// </summary>
@@ -37,6 +43,11 @@ public class PackageManagerViewModel
         /// The level with which the above message will be displayed.
         /// </summary>
         public AlertLevel AlertLevel { get; set; }
+
+        /// <summary>
+        /// The label for the copy button.
+        /// </summary>
+        public string CopyLabel { get; set; }
     }
 
     public enum AlertLevel

src/NuGetGallery/ViewModels/PackageManagerViewModel.cs

@@ -15,7 +15,7 @@ public class ThirdPartyPackageManagerViewModel : PackageManagerViewModel
         /// </summary>
         public string ContactUrl { get; set; }
 
-        public ThirdPartyPackageManagerViewModel(string contactUrl)
+        public ThirdPartyPackageManagerViewModel(string name, string contactUrl) : base(name)
         {
             ContactUrl = contactUrl;
             AlertLevel = AlertLevel.Warning;

src/NuGetGallery/ViewModels/ThirdPartyPackageManagerViewModel.cs

@@ -28,10 +28,9 @@
     {
         packageManagers = new PackageManagerViewModel[]
         {
-            new PackageManagerViewModel()
+            new PackageManagerViewModel(".NET CLI")
             {
                 Id = "dotnet-cli",
-                Name = ".NET CLI",
                 CommandPrefix = "> ",
                 InstallPackageCommand = string.Format("dotnet tool install --global {0} --version {1}", Model.Id, Model.Version),
                 AlertLevel = AlertLevel.Info,
@@ -43,26 +42,33 @@
     {
         packageManagers = new PackageManagerViewModel[]
         {
-            new PackageManagerViewModel()
+            new PackageManagerViewModel("Package Manager")
             {
                 Id = "package-manager",
-                Name = "Package Manager",
                 CommandPrefix = "PM> ",
                 InstallPackageCommand = string.Format("Install-Package {0} -Version {1}", Model.Id, Model.Version)
             },
 
-            new PackageManagerViewModel()
+            new PackageManagerViewModel(".NET CLI")
             {
                 Id = "dotnet-cli",
-                Name = ".NET CLI",
                 CommandPrefix = "> ",
                 InstallPackageCommand = string.Format("dotnet add package {0} --version {1}", Model.Id, Model.Version)
             },
 
-            new ThirdPartyPackageManagerViewModel("https://fsprojects.github.io/Paket/contact.html")
+            new PackageManagerViewModel("PackageReference")
+            {
+                Id = "package-reference",
+                InstallPackageCommand = string.Format("<PackageReference Include=\"{0}\" Version=\"{1}\" />", Model.Id, Model.Version),
+                AlertLevel = AlertLevel.Info,
+                AlertMessage = string.Format("For projects that support <a href=\"{0}\">PackageReference</a>, copy this XML node into the project file to reference the package.",
+                                             "https://docs.microsoft.com/en-us/nuget/consume-packages/package-references-in-project-files"),
+                CopyLabel = "Copy the PackageReference XML node",
+            },
+
+            new ThirdPartyPackageManagerViewModel("Paket CLI", "https://fsprojects.github.io/Paket/contact.html")
             {
                 Id = "paket-cli",
-                Name = "Paket CLI",
                 CommandPrefix = "> ",
                 InstallPackageCommand = string.Format("paket add {0} --version {1}", Model.Id, Model.Version),
             }
@@ -126,7 +132,7 @@
             <div class="copy-button">
                 <button id="@packageManager.Id-button" class="btn btn-default btn-warning" type="button"
                         data-toggle="popover" data-placement="bottom" data-content="Copied."
-                        aria-label="Copy the @packageManager.Name command">
+                        aria-label="@packageManager.CopyLabel">
                     <span class="ms-Icon ms-Icon--Copy" aria-hidden="true"></span>
                 </button>
             </div>
@@ -925,6 +931,11 @@ foreach (var owner in Model.Owners)
 
         foreach (var packageManager in packageManagers)
         {
+            if (string.IsNullOrWhiteSpace(packageManager.CommandPrefix))
+            {
+                continue;
+            }
+
             packageManagersCss += "#" + packageManager.Id + " .install-script span::before {";
             packageManagersCss += "    content: \"" + packageManager.CommandPrefix + "\"";
             packageManagersCss += "}";