Bug 1617474 - Match json viewer toolbar height to devtools r=nchevobbe

Differential Revision: https://phabricator.services.mozilla.com/D160286

devtools/client/jsonview/components/MainTabbedArea.js

@@ -69,6 +69,7 @@ define(function(require, exports, module) {
         {
           activeTab: this.state.activeTab,
           onAfterChange: this.onTabChanged,
+          tall: true,
         },
         TabPanel(
           {

devtools/client/shared/components/tabs/Tabs.css

@@ -5,12 +5,17 @@
 /* Tabs General Styles */
 
 .tabs {
+  --tab-height: var(--theme-toolbar-height);
   height: 100%;
   background: var(--theme-sidebar-background);
   display: flex;
   flex-direction: column;
 }
 
+.tabs.tabs-tall {
+  --tab-height: var(--theme-toolbar-tall-height);
+}
+
 /* Hides the tab strip in the TabBar */
 div[hidetabs=true] .tabs .tabs-navigation {
   display: none;
@@ -20,7 +25,7 @@ div[hidetabs=true] .tabs .tabs-navigation {
   box-sizing: border-box;
   display: flex;
   /* Reserve 1px for the border */
-  height: calc(var(--theme-toolbar-height) + 1px);
+  height: calc(var(--tab-height) + 1px);
   position: relative;
   border-bottom: 1px solid var(--theme-splitter-color);
   background: var(--theme-tab-toolbar-background);
@@ -63,12 +68,16 @@ div[hidetabs=true] .tabs .tabs-navigation {
 }
 
 .tabs .tabs-menu-item a {
+  --text-height: 16px;
+  --devtools-tab-border-width: 1px;
   display: flex;
   justify-content: center;
-  padding: 3px 10px;
-  border: 1px solid transparent;
+  /* Vertically center text, calculate space remaining by taking the full height and removing
+  the block borders and text. Divide by 2 to distribute above and below.  */
+  padding: calc((var(--tab-height) - var(--text-height) - (var(--devtools-tab-border-width) * 2)) / 2) 10px;
+  border: var(--devtools-tab-border-width) solid transparent;
   font-size: 12px;
-  line-height: 16px;
+  line-height: var(--text-height);
   text-decoration: none;
   white-space: nowrap;
   cursor: default;

devtools/client/shared/components/tabs/Tabs.js

@@ -49,6 +49,7 @@ define(function(require, exports, module) {
         showAllTabsMenu: PropTypes.bool,
         allTabsMenuButtonTooltip: PropTypes.string,
         onAllTabsMenuClick: PropTypes.func,
+        tall: PropTypes.bool,
 
         // To render a sidebar toggle button before the tab menu provide a function that
         // returns a React component for the button.
@@ -424,7 +425,11 @@ define(function(require, exports, module) {
     render() {
       return dom.div(
         {
-          className: ["tabs", this.props.className].join(" "),
+          className: [
+            "tabs",
+            ...(this.props.tall ? ["tabs-tall"] : []),
+            this.props.className,
+          ].join(" "),
           ref: this.tabsEl,
         },
         this.renderMenuItems(),

devtools/client/themes/variables.css

@@ -19,6 +19,7 @@
 
   /* Toolbar size (excluding borders) */
   --theme-toolbar-height: 24px;
+  --theme-toolbar-tall-height: 28px;
 
   /* For accessibility purposes we want to enhance the focus styling. This
    * should improve keyboard navigation usability. */