Fix: use simpler charaters for progress bar to avoid overflows (yarnp…

…kg#4317)

**Summary**
Fixes yarnpkg#2530. This patch replaces the 2-byte progress bar characters with `-` and `#` wrapped in a pair of `[` and `]` symbols to make it looks like a progress bar on the console with "simple", one-byte characters.

The reason for preferring one-byte characters is the inconsistent width calculation on certain terminal emulators causing the calculated progress bar width to overflow the available terminal width, causing the progress bar to split into multiple lines.

It now looks like this:
![new progress bar chars](https://i.imgur.com/d8XA4yS.gif)

**Test plan**

Manual verification and updating of existing test snapshots.

__tests__/reporters/__snapshots__/console-reporter.js.snap

@@ -58,7 +58,7 @@ Object {
 
 exports[`ConsoleReporter.progress 1`] = `
 Object {
-  "stderr": "[2K[1G[1G░░ 0/2[1G█░ 1/2[2K[1G",
+  "stderr": "[2K[1G[1G[--] 0/2[1G[#-] 1/2[2K[1G",
   "stdout": "",
 }
 `;
@@ -132,11 +132,11 @@ Object {
 }
 `;
 
-exports[`ProgressBar 1`] = `"[2K[1G[1G░░ 0/2"`;
+exports[`ProgressBar 1`] = `"[2K[1G[1G[--] 0/2"`;
 
-exports[`ProgressBar 2`] = `"[2K[1G[1G░░ 0/2[1G█░ 1/2"`;
+exports[`ProgressBar 2`] = `"[2K[1G[1G[--] 0/2[1G[#-] 1/2"`;
 
-exports[`ProgressBar 3`] = `"[2K[1G[1G░░ 0/2[1G█░ 1/2[1G██ 2/2"`;
+exports[`ProgressBar 3`] = `"[2K[1G[1G[--] 0/2[1G[#-] 1/2[1G[##] 2/2"`;
 
 exports[`Spinner 1`] = `"⠁ "`;
 
@@ -148,7 +148,7 @@ exports[`Spinner 4`] = `"⠁ ⠂ foo⠄ bar"`;
 
 exports[`close 1`] = `
 Object {
-  "stderr": "[2K[1G[1G░░ 0/2[1G█░ 1/2[1G⠁ [0K[2K[1G[2K[1G",
+  "stderr": "[2K[1G[1G[--] 0/2[1G[#-] 1/2[1G⠁ [0K[2K[1G[2K[1G",
   "stdout": "",
 }
 `;

src/reporters/console/progress-bar.js

@@ -23,7 +23,7 @@ export default class ProgressBar {
   id: ?number;
   _callback: ?(progressBar: ProgressBar) => void;
 
-  static bars = [['█', '░']];
+  static bars = [['#', '-']];
 
   tick() {
     if (this.curr >= this.total) {
@@ -68,12 +68,12 @@ export default class ProgressBar {
 
     // calculate size of actual bar
     // $FlowFixMe: investigate process.stderr.columns flow error
-    const availableSpace = Math.max(0, this.stdout.columns - bar.length - 1);
+    const availableSpace = Math.max(0, this.stdout.columns - bar.length - 3);
     const width = Math.min(this.total, availableSpace);
     const completeLength = Math.round(width * ratio);
     const complete = this.chars[0].repeat(completeLength);
     const incomplete = this.chars[1].repeat(width - completeLength);
-    bar = `${complete}${incomplete}${bar}`;
+    bar = `[${complete}${incomplete}]${bar}`;
 
     toStartOfLine(this.stdout);
     this.stdout.write(bar);