Standardized Plugins Downloads and Center Icons

packages/core/i18n/nls.json

@@ -390,6 +390,9 @@
         "update-version-version-error": "Failed to install version {0} of {1}."
       }
     },
+    "vsx-extension": {
+      "averageRating": "Average rating: {0} out of 5"
+    },
     "webview": {
       "goToReadme": "Go To README",
       "messageWarning": "            The {0} endpoint's host pattern has been changed to `{1}`; changing the pattern can lead to security vulnerabilities.             See `{2}` for more information."

packages/core/i18n/nls.zh-cn.json

@@ -390,6 +390,9 @@
         "update-version-version-error": "{0} 在安装{1} 的版本时失败。"
       }
     },
+    "vsx-extension": {
+      "averageRating": "平均评分：{0} 分(共 5 分)"
+    },
     "webview": {
       "goToReadme": "转到README",
       "messageWarning": "            {0}端点的主机模式已改为`{1}`;改变模式可能导致安全漏洞。             参见`{2}`以了解更多信息。"

packages/vsx-registry/src/browser/style/index.css

@@ -91,6 +91,12 @@
     font-size: 110%;
 }
 
+.theia-vsx-extension-content .title .stat .download-count,
+.theia-vsx-extension-content .title .stat .average-rating {
+    display: inline-flex;
+    align-items: center;
+}
+
 .theia-vsx-extension-content .title .stat .average-rating > i {
     color: #ff8e00;
 }

packages/vsx-registry/src/browser/vsx-extension.tsx

@@ -282,7 +282,7 @@ export class VSXExtension implements VSXExtensionData, TreeElement {
         }
 
         if (this.averageRating) {
-            md += `  \rAverage Rating: ${this.averageRating.toFixed(1)}`;
+            md += `  \r${getAverageRatingTitle(this.averageRating)}`;
         }
 
         return markdownit().render(md);
@@ -443,7 +443,10 @@ export namespace AbstractVSXExtensionComponent {
 
 const downloadFormatter = new Intl.NumberFormat();
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const downloadCompactFormatter = new Intl.NumberFormat(undefined, { notation: 'compact', compactDisplay: 'short' } as any);
+const downloadCompactFormatter = new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' } as any);
+const averageRatingFormatter = (averageRating: number): number => Math.round(averageRating * 2) / 2;
+const getAverageRatingTitle = (averageRating: number): string =>
+    nls.localize('theia/vsx-extension/averageRating', 'Average rating: {0} out of 5', averageRatingFormatter(averageRating));
 
 export namespace VSXExtensionComponent {
     export interface Props extends AbstractVSXExtensionComponent.Props {
@@ -466,7 +469,7 @@ export class VSXExtensionComponent<Props extends VSXExtensionComponent.Props = V
                     </div>
                     <div className='stat'>
                         {!!downloadCount && <span className='download-count'><i className={codicon('cloud-download')} />{downloadCompactFormatter.format(downloadCount)}</span>}
-                        {!!averageRating && <span className='average-rating'><i className={codicon('star-full')} />{averageRating.toFixed(1)}</span>}
+                        {!!averageRating && <span className='average-rating'><i className={codicon('star-full')} />{averageRatingFormatter(averageRating)}</span>}
                     </div>
                 </div>
                 <div className='noWrapInfo theia-vsx-extension-description'>{description}</div>
@@ -516,7 +519,10 @@ export class VSXExtensionEditorComponent extends AbstractVSXExtensionComponent {
                         </span>
                         {!!downloadCount && <span className='download-count' onClick={this.openExtension}>
                             <i className={codicon('cloud-download')} />{downloadFormatter.format(downloadCount)}</span>}
-                        {averageRating !== undefined && <span className='average-rating' onClick={this.openAverageRating}>{this.renderStars()}</span>}
+                        {
+                            averageRating !== undefined &&
+                            <span className='average-rating' title={getAverageRatingTitle(averageRating)} onClick={this.openAverageRating}>{this.renderStars()}</span>
+                        }
                         {repository && <span className='repository' onClick={this.openRepository}>Repository</span>}
                         {license && <span className='license' onClick={this.openLicense}>{license}</span>}
                         {version && <span className='version'>{VSXExtension.formatVersion(version)}</span>}
@@ -527,7 +533,7 @@ export class VSXExtensionEditorComponent extends AbstractVSXExtensionComponent {
             </div>
             {
                 sanitizedReadme &&
-                < div className='scroll-container'
+                <div className='scroll-container'
                     style={scrollStyle}
                     ref={ref => this._scrollContainer = (ref || undefined)}>
                     <div className='body'