feat: Fancy decorations, simple or disabled

Decorations can now be set to "fancy" (colorful), "simple" (less flashy but just as informative as fancy) or "disabled".

Author: david-rodrigues

package.json

@@ -120,8 +120,18 @@
         },
         "npm-outdated.decorations": {
           "order": 3000,
-          "type": "boolean",
-          "default": true,
+          "type": "string",
+          "enum": [
+            "fancy",
+            "simple",
+            "disabled"
+          ],
+          "enumDescriptions": [
+            "%npm-outdated.configuration.decorations.fancy.description%",
+            "%npm-outdated.configuration.decorations.simple.description%",
+            "%npm-outdated.configuration.decorations.disabled.description%"
+          ],
+          "default": "fancy",
           "markdownDescription": "%npm-outdated.configuration.decorations.description%"
         },
         "npm-outdated.cacheLifetime": {

package.nls.json

@@ -5,6 +5,9 @@
   "npm-outdated.configuration.majorUpdateProtection.description": "Avoid suggesting that a package be upgraded to a `major` version directly. The suggestion will only happen if the user-defined version is the latest `minor` version available.",
   "npm-outdated.configuration.identifySecurityAdvisories.description": "Identifies packages used with known security advisories.",
   "npm-outdated.configuration.decorations.description": "Displays decorations on the right side of packages containing more details about upgrade possibilities.",
+  "npm-outdated.configuration.decorations.fancy.description": "Details are colorful and much easier to identify.",
+  "npm-outdated.configuration.decorations.simple.description": "Details are displayed in a simpler, less flashy, but still informative way. Helps performance if you don't care about colors.",
+  "npm-outdated.configuration.decorations.disabled.description": "Details will not be displayed directly, but you will still see it when hovering over the package version in a tooltip.",
   "npm-outdated.configuration.cacheLifetime.description": "Time in minutes in which the versions of packages already analyzed will be kept internally. Performance improvement.",
   "npm-outdated.configuration.parallelProcessesLimit.description": "Defines how much packages can be analyzed together. A high value processes faster but consumes much more CPU. Set `0` to disable this limit (but use with moderation)."
 }

package.nls.pt-br.json

@@ -4,7 +4,10 @@
   "npm-outdated.configuration.level.description": "Diferença mínima *semver* necessária para que uma dependência seja exibida como desatualizada. Veja a [documentação Semver](https://docs.npmjs.com/cli/v6/using-npm/semver) (*em inglês*) para mais detalhes.",
   "npm-outdated.configuration.majorUpdateProtection.description": "Evita que uma dependência possa atualizar para uma versão `major` diretamente. Uma sugestão deste tipo só acontecerá se a versão definida pelo usuário já estiver na última versão `minor` disponível.",
   "npm-outdated.configuration.identifySecurityAdvisories.description": "Identifica as dependências utilizadas com avisos de segurança conhecidos.",
-  "npm-outdated.configuration.decorations.description": "Exibe decorações ao lado direito dos pacotes contendo mais detalhes sobre as possibilidades de atualização.",
+  "npm-outdated.configuration.decorations.description": "Exibe decorações ao lado direito das dependências contendo mais detalhes sobre as possibilidades de atualização.",
+  "npm-outdated.configuration.decorations.fancy.description": "Os detalhes são coloridos e muito mais fáceis de identificar.",
+  "npm-outdated.configuration.decorations.simple.description": "Os detalhes são exibidos de uma forma mais simples, menos chamativa, mas ainda informativa. Ajuda na performance se você não se importa com as cores.",
+  "npm-outdated.configuration.decorations.disabled.description": "Os detalhes não serão exibidos diretamente, mas você ainda verá ao passar o mouse na versão da dependência em uma tooltip.",
   "npm-outdated.configuration.cacheLifetime.description": "Quantidade de minutos na qual as versões das dependências já analisadas poderão ser mantidas internamente em cache. Melhora o desempenho.",
   "npm-outdated.configuration.parallelProcessesLimit.description": "Define quantas dependências poderão ser analisadas ao mesmo tempo. Um valor alto torna o processo mais rápido, porém, consome mais CPU. Defina como `0` para desativar este limite (mas use com moderação)."
 }

src/Diagnostic.ts

@@ -37,9 +37,9 @@ import {
 import { PackageInfo } from "./PackageInfo"
 import { name as packageName } from "./plugin.json"
 import {
+  getDecorationsMode,
   getParallelProcessesLimit,
   identifySecurityAdvisories,
-  isDecorationsEnabled,
 } from "./Settings"
 import { Icons } from "./Theme"
 import { promiseLimit } from "./Utils"
@@ -228,9 +228,10 @@ export const generatePackagesDiagnostics = async (
   // Read dependencies from package.json to get the name of packages used.
   const packagesInfos = Object.values(await getDocumentPackages(document))
 
-  const documentDecorations = isDecorationsEnabled()
-    ? new DocumentDecoration(document)
-    : undefined
+  const documentDecorations =
+    getDecorationsMode() !== "disabled"
+      ? new DocumentDecoration(document)
+      : undefined
 
   const documentDiagnostics = new DocumentDiagnostics(
     document,

src/DocumentDecoration.ts

@@ -14,6 +14,7 @@ import {
 import { PackageRelatedDiagnostic } from "./Diagnostic"
 import { PackageAdvisory } from "./NPM"
 import { PackageInfo } from "./PackageInfo"
+import { getDecorationsMode } from "./Settings"
 import { Icons, Margins, ThemeDark, ThemeLight } from "./Theme"
 import { lazyCallback } from "./Utils"
 
@@ -131,29 +132,47 @@ export class DocumentDecoration {
       decorationManager.flushLine(line)
     }
 
-    messages.forEach((message, messageIndex) => {
-      const decorationLayer = decorationManager.getLayer(messageIndex)
+    if (getDecorationsMode() === "simple") {
+      const decorationLayer = decorationManager.getLayer(0)
 
       decorationLayer.lines.set(line, {
         range: new Range(line, 4096, line, 4096),
         renderOptions: {
           after: {
-            contentText: message.message,
+            contentText: messages.map((message) => message.message).join(" "),
             ...ThemeLight.DEFAULT,
-            ...(messageIndex === 0
-              ? Margins.MARGIN_INITIAL
-              : Margins.MARGIN_THEN),
-            ...message.styleDefault,
+            ...Margins.MARGIN_INITIAL,
           },
           dark: {
+            after: { ...ThemeDark.DEFAULT },
+          },
+        },
+      })
+    } else {
+      messages.forEach((message, messageIndex) => {
+        const decorationLayer = decorationManager.getLayer(messageIndex)
+
+        decorationLayer.lines.set(line, {
+          range: new Range(line, 4096, line, 4096),
+          renderOptions: {
             after: {
-              ...ThemeDark.DEFAULT,
-              ...message.styleDark,
+              contentText: message.message,
+              ...ThemeLight.DEFAULT,
+              ...(messageIndex === 0
+                ? Margins.MARGIN_INITIAL
+                : Margins.MARGIN_THEN),
+              ...message.styleDefault,
+            },
+            dark: {
+              after: {
+                ...ThemeDark.DEFAULT,
+                ...message.styleDark,
+              },
             },
           },
-        },
+        })
       })
-    })
+    }
 
     this.render()
   }

src/Settings.ts

@@ -24,8 +24,8 @@ export const identifySecurityAdvisories = (): boolean =>
 
 // Displays decorations on the right side of packages.
 // Default: true.
-export const isDecorationsEnabled = (): boolean =>
-  workspace.getConfiguration().get<boolean>(`${packageName}.decorations`)!
+export const getDecorationsMode = (): "fancy" | "simple" | "disabled" =>
+  workspace.getConfiguration().get(`${packageName}.decorations`)!
 
 // Time in minutes in which the versions of packages already analyzed will be kept internally.
 // Default: 60 minutes.

src/TestUtils.ts

@@ -33,7 +33,7 @@ jest.mock("./Utils", () => ({
 
 interface PluginConfigurations {
   cacheLifetime?: number
-  decorations?: boolean
+  decorations?: "fancy" | "simple" | "disabled"
   identifySecurityAdvisories?: boolean
   level?: ReleaseType
   majorUpdateProtection?: boolean
@@ -42,7 +42,7 @@ interface PluginConfigurations {
 
 const DefaultPluginConfigurations: PluginConfigurations = {
   cacheLifetime: 0,
-  decorations: true,
+  decorations: "fancy",
   identifySecurityAdvisories: true,
   level: "patch",
   majorUpdateProtection: true,

src/extension.test.ts

@@ -280,16 +280,28 @@ describe("package diagnostics", () => {
     expect(decorations).toStrictEqual([])
   })
 
+  it("decorations simple", async () => {
+    const { decorations } = await vscodeSimulator({
+      configurations: { decorations: "simple" },
+      packageJson: { devDependencies: { "npm-outdated": "^1.0.0" } },
+      packagesInstalled: { "npm-outdated": "1.0.0" },
+      packagesRepository: { "npm-outdated": ["1.0.0", "1.0.1"] },
+    })
+
+    expect(decorations[0]).toContain(
+      `${Icons.UPDATABLE} Update available: 1.0.1`
+    )
+  })
+
   it("decorations disabled", async () => {
     const { decorations } = await vscodeSimulator({
-      configurations: { decorations: false },
+      configurations: { decorations: "disabled" },
       packageJson: { devDependencies: { "npm-outdated": "^1.0.0" } },
       packagesInstalled: { "npm-outdated": "1.0.0" },
       packagesRepository: { "npm-outdated": ["1.0.0", "1.0.1"] },
     })
 
     expect(decorations).toStrictEqual([])
-    expect(decorations).toStrictEqual([])
   })
 
   it("package dependes on auth, so npm view will be used (found)", async () => {