Add overflow ellipses and tooltips to available view list

Signed-off-by: Yining Wang <yining.wang@ericsson.com>
eclipse-cdt-cloud · Nov 5, 2021 · c65cd41 · c65cd41
1 parent 15bf563
commit c65cd41
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/packages/react-components/src/trace-explorer/trace-explorer-views-widget.tsx b/packages/react-components/src/trace-explorer/trace-explorer-views-widget.tsx
@@ -90,6 +90,7 @@ export class ReactAvailableViewsWidget extends React.Component<ReactAvailableVie
             traceContainerClassName = traceContainerClassName + ' theia-mod-selected';
         }
         return <div className={traceContainerClassName}
+            title={outputName + ':\n' + outputDescription}
             id={`${traceContainerClassName}-${props.index}`}
             key={props.key}
             style={props.style}
@@ -137,7 +138,7 @@ export class ReactAvailableViewsWidget extends React.Component<ReactAvailableVie
     protected doExperimentSelected(experiment: Experiment | undefined): void {
         if (this._selectedExperiment?.UUID !== experiment?.UUID) {
             this._selectedExperiment = experiment;
-            this.setState({availableOutputDescriptors: []});
+            this.setState({ availableOutputDescriptors: [] });
             this.updateAvailableViews();
         }
     }

diff --git a/packages/react-components/style/trace-explorer.css b/packages/react-components/style/trace-explorer.css
@@ -74,12 +74,16 @@
 }
 
 .trace-element-name, .outputs-element-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
     font-weight: bold;
     margin: unset;
     height: var(--trace-extension-list-line-height);
 }
 
 .trace-element-path-container, .outputs-element-description {
+    overflow: hidden;
+    text-overflow: ellipsis;
     margin: unset;
     color: var(--theia-ui-font-color2);
     /* color: rgb(160, 160, 160); */