Devtools:-Removed unused CSS (#27032)

Biki-das · web-flow · commit 53ac21937864 · 2023-07-03T12:16:04.000+01:00
I tried to check out for the CSS bundle using the [eslint-plugin-css-modules](https://www.npmjs.com/package/eslint-plugin-css-modules), and ran it locally , seems like There are lot of unused styles and classes present . I have attached the output below after running the lint command. https://gist.github.com/Biki-das/647ceb7383b43cca9c8619e1dc33fe0d All the shared.css files should not be touched i feel as they are being used randomly by some file Thoughts @hoxyq
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.css b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.css
@@ -33,8 +33,3 @@
   background-color: var(--color-button-background-focus);
   outline: none;
 }
-
-.ResetButton {
-  flex: 0 0 auto;
-  padding: 0 0.5rem;
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.css b/packages/react-devtools-shared/src/devtools/views/Components/Element.css
@@ -22,11 +22,6 @@
   user-select: none;
 }
 
-.ScrollAnchor {
-  height: 100%;
-  width: 0;
-}
-
 .SelectedElement {
   background-color: var(--color-background-selected);
   color: var(--color-text-selected);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -264,24 +264,20 @@ export default function InspectedElementWrapper(_: Props): React.Node {
           <div
             className={
               element.isStrictModeNonCompliant
-                ? styles.StrictModeNonCompliantComponent
+                ? styles.StrictModeNonCompliant
                 : styles.Component
             }
             title={element.displayName}>
             {element.displayName}
           </div>
         </div>
         {canOpenInEditor && (
-          <Button
-            className={styles.IconButton}
-            onClick={onOpenInEditor}
-            title="Open in editor">
+          <Button onClick={onOpenInEditor} title="Open in editor">
             <ButtonIcon type="editor" />
           </Button>
         )}
         {canToggleError && (
           <Toggle
-            className={styles.IconButton}
             isChecked={isErrored}
             onChange={toggleErrored}
             title={
@@ -294,7 +290,6 @@ export default function InspectedElementWrapper(_: Props): React.Node {
         )}
         {canToggleSuspense && (
           <Toggle
-            className={styles.IconButton}
             isChecked={isSuspended}
             onChange={toggleSuspended}
             title={
@@ -307,23 +302,20 @@ export default function InspectedElementWrapper(_: Props): React.Node {
         )}
         {store.supportsNativeInspection && (
           <Button
-            className={styles.IconButton}
             onClick={highlightElement}
             title="Inspect the matching DOM element">
             <ButtonIcon type="view-dom" />
           </Button>
         )}
         {!hideLogAction && (
           <Button
-            className={styles.IconButton}
             onClick={logElement}
             title="Log this component data to the console">
             <ButtonIcon type="log-data" />
           </Button>
         )}
         {!hideViewSourceAction && (
           <Button
-            className={styles.IconButton}
             disabled={!canViewSource}
             onClick={viewSource}
             title="View source for this element">
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
@@ -2,10 +2,6 @@
   display: flex;
 }
 
-.DisabledItem {
-  opacity: 0.5;
-}
-
 .Name {
   color: var(--color-attribute-name-not-editable);
   flex: 0 0 auto;
@@ -40,20 +36,11 @@
   flex: 1;
 }
 
-.None {
-  color: var(--color-dimmer);
-  font-style: italic;
-}
-
 .ExpandCollapseToggleSpacer {
   flex: 0 0 1rem;
   width: 1rem;
 }
 
-.Empty {
-  color: var(--color-dimmer);
-}
-
 .DeleteArrayItemButton {
   padding: 0;
   margin-right: 0.125rem;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
@@ -50,9 +50,3 @@
   box-shadow: 0px 1px 3px var(--color-shadow);
 }
 
-.Empty {
-  color: var(--color-dimmer);
-  font-style: italic;
-  user-select: none;
-  padding-left: 1rem;
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.css b/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.css
@@ -13,7 +13,6 @@
   color: var(--color-text-invalid) !important;
 }
 
-.Input:focus,
 .Invalid:focus {
   background-color: var(--color-button-background-focus);
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
@@ -191,10 +191,7 @@ export default function OwnerStack(): React.Node {
           ))}
       </div>
       <div className={styles.VRule} />
-      <Button
-        className={styles.IconButton}
-        onClick={() => selectOwner(null)}
-        title="Back to tree view">
+      <Button onClick={() => selectOwner(null)} title="Back to tree view">
         <ButtonIcon type="close" />
       </Button>
     </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
@@ -22,10 +22,6 @@
   text-overflow: ellipsis;
 }
 
-.Label {
-  font-weight: bold;
-}
-
 .CurrentCommit {
   margin: 0.25rem 0;
   display: block;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
@@ -13,10 +13,6 @@
   overflow-y: auto;
 }
 
-.WhatChanged {
-  margin-bottom: 1rem;
-}
-
 .Component {
   flex: 1;
   color: var(--color-component-name);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -108,7 +108,6 @@ export default function SidebarSelectedFiberInfo(_: Props): React.Node {
         </div>
 
         <Button
-          className={styles.IconButton}
           onClick={() => selectFiber(null, null)}
           title="Back to commit view">
           <ButtonIcon type="close" />
diff --git a/packages/react-devtools-shared/src/devtools/views/SearchInput.css b/packages/react-devtools-shared/src/devtools/views/SearchInput.css
@@ -28,15 +28,11 @@
   white-space: pre;
 }
 
-.LeftVRule,
-.RightVRule {
+.LeftVRule{
   height: 20px;
   width: 1px;
   background-color: var(--color-border);
 }
 .LeftVRule {
   margin: 0 0.25rem 0 0.5rem;
 }
-.RightVRule {
-  margin: 0 0.5rem 0 0.25rem;
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/SearchInput.js b/packages/react-devtools-shared/src/devtools/views/SearchInput.js
@@ -104,7 +104,6 @@ export default function SearchInput({
           <div className={styles.LeftVRule} />
           <Button
             data-testname={testName ? `${testName}-PreviousButton` : undefined}
-            className={styles.IconButton}
             disabled={!searchText}
             onClick={goToPreviousResult}
             title={
@@ -117,7 +116,6 @@ export default function SearchInput({
           </Button>
           <Button
             data-testname={testName ? `${testName}-NextButton` : undefined}
-            className={styles.IconButton}
             disabled={!searchText}
             onClick={goToNextResult}
             title={
@@ -129,7 +127,6 @@ export default function SearchInput({
           </Button>
           <Button
             data-testname={testName ? `${testName}-ResetButton` : undefined}
-            className={styles.IconButton}
             disabled={!searchText}
             onClick={resetSearch}
             title="Reset search">
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
@@ -38,9 +38,6 @@
   height: 0.5rem;
 }
 
-.Select {
-}
-
 .CheckboxOption {
   display: block;
   padding: 0 0 0.5rem;
diff --git a/packages/react-devtools-shared/src/devtools/views/Toggle.css b/packages/react-devtools-shared/src/devtools/views/Toggle.css
@@ -46,9 +46,3 @@
   color: var(--color-button-disabled);
   cursor: default;
 }
-
-.Input {
-  width: 0;
-  margin: 0;
-  opacity: 0;
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.css b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.css
@@ -8,10 +8,6 @@
   margin-bottom: 0.5rem;  
 } 
 
-.ReleaseNotesLink { 
-  color: var(--color-button-active);  
-}
-
 .Version {
   color: var(--color-bridge-version-number);
   font-weight: bold;
diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.css b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.css
@@ -4,12 +4,6 @@
   align-items: center;  
 } 
 
-.Column { 
-  display: flex;  
-  flex-direction: column; 
-  align-items: center;  
-} 
-
 .Title {  
   font-size: var(--font-size-sans-large); 
   margin-bottom: 0.5rem;  
diff --git a/packages/react-devtools-timeline/src/EventTooltip.css b/packages/react-devtools-timeline/src/EventTooltip.css
@@ -75,7 +75,6 @@
   margin-right: 0.25rem;
 }
 
-.InfoText,
 .WarningText {
   color: var(--color-warning-text-color);
 }
diff --git a/packages/react-devtools-timeline/src/Timeline.css b/packages/react-devtools-timeline/src/Timeline.css
@@ -8,9 +8,6 @@
   justify-content: center;
 }
 
-.Paragraph {
-  text-align: center;
-}
 
 .ErrorMessage {
   margin: 0.5rem 0;
@@ -35,28 +32,3 @@
   font-size: var(--font-size-sans-large);
   margin-bottom: 0.5rem;
 }
-
-.WelcomeInstructionsList {
-}
-
-.WelcomeInstructionsListItem {
-  display: flex;
-  align-items: center;
-  line-height: 1.5rem;
-  counter-increment: li;
-}
-
-.WelcomeInstructionsListItem::before {
-  content: counter(li);
-  margin-right: 0.5rem;
-}
-
-.WelcomeInstructionsListItemLink {
-  color: var(--color-link);
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.ImportButtonLabel {
-  margin-left: 0.25rem;
-}

Original file line number	Diff line number	Diff line change
`@@ -33,8 +33,3 @@`
`33`	`33`	`background-color: var(--color-button-background-focus);`
`34`	`34`	`outline: none;`
`35`	`35`	`}`
`36`		`-`
`37`		`-.ResetButton {`
`38`		`- flex: 0 0 auto;`
`39`		`- padding: 0 0.5rem;`
`40`		`-}`
Original file line number	Diff line number	Diff line change
`@@ -50,9 +50,3 @@`
`50`	`50`	`box-shadow: 0px 1px 3px var(--color-shadow);`
`51`	`51`	`}`
`52`	`52`
`53`		`-.Empty {`
`54`		`- color: var(--color-dimmer);`
`55`		`- font-style: italic;`
`56`		`- user-select: none;`
`57`		`- padding-left: 1rem;`
`58`		`-}`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,6 @@`
`13`	`13`	`color: var(--color-text-invalid) !important;`
`14`	`14`	`}`
`15`	`15`
`16`		`-.Input:focus,`
`17`	`16`	`.Invalid:focus {`
`18`	`17`	`background-color: var(--color-button-background-focus);`
`19`	`18`	`}`