Bug 1458224 - Fix Linux root font size in DevTools; r=pbro,nchevobbe

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

--HG--
extra : moz-landing-system : lando

devtools/client/application/src/components/App.css

@@ -6,11 +6,6 @@
  * General styles
  */
 
-:root[platform="linux"],
-:root[platform="linux"] button {
-  font-size: 11px;
-}
-
 h1 {
   font-size: 22px;
   font-weight: normal;

devtools/client/inspector/markup/test/helper_events_test_runner.js

@@ -120,7 +120,8 @@ async function checkEventsForNode(test, inspector, testActor) {
     // Make sure the header is not hidden by scrollbars before clicking.
     header.scrollIntoView();
 
-    EventUtils.synthesizeMouseAtCenter(header, {}, type.ownerGlobal);
+    // Avoid clicking the header's center (could hit the debugger button)
+    EventUtils.synthesizeMouse(header, 2, 2, {}, type.ownerGlobal);
     await tooltip.once("event-tooltip-ready");
 
     is(header.classList.contains("content-expanded"), true,

devtools/client/inspector/test/browser_inspector_textbox-menu.js

@@ -45,7 +45,7 @@ add_task(async function() {
   info("Testing the rule-view selector");
   const ruleView = inspector.getPanel("ruleview").view;
   const cssRuleEditor = getRuleViewRuleEditor(ruleView, 1);
-  EventUtils.synthesizeMouse(cssRuleEditor.selectorText, 0, 0, {}, inspector.panelWin);
+  EventUtils.synthesizeMouseAtCenter(cssRuleEditor.selectorText, {}, inspector.panelWin);
   await checkTextBox(inspector.panelDoc.activeElement, toolbox);
 
   info("Testing the rule-view property name");

devtools/client/jsonview/css/main.css

@@ -39,10 +39,6 @@
   font-family: var(--monospace-font-family);
 }
 
-:root[platform="linux"] .treeTable {
-  font-size: 80%; /* To handle big monospace font */
-}
-
 /* Make sure there is a little space between label and value columns. */
 .panelContent .treeTable .treeLabelCell {
   padding-right: 17px;

devtools/client/jsonview/css/text-panel.css

@@ -16,7 +16,3 @@
   font-family: var(--monospace-font-family);
   color: var(--theme-content-color1);
 }
-
-:root[platform="linux"] .textPanelBox .data {
-  font-size: 80%; /* To handle big monospace font */
-}

devtools/client/jsonview/css/toolbar.css

@@ -9,7 +9,6 @@
 .toolbar {
   display: flex;
   height: 22px;
-  font: message-box;
   padding: 1px;
   padding-inline-start: 2px;
   background: var(--theme-toolbar-background);

devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css

@@ -231,6 +231,7 @@
   width: 100%;
   height: 50vh;
   font: message-box;
+  font-size: var(--theme-body-font-size);
   resize: none;
 }
 
@@ -411,6 +412,7 @@
 .network-monitor .custom-request-panel textarea {
   resize: none;
   font: message-box;
+  font-size: var(--theme-body-font-size);
 }
 
 .network-monitor .custom-header,

devtools/client/netmonitor/src/assets/styles/RequestList.css

@@ -628,8 +628,4 @@
   .requests-list-waterfall {
     display: none;
   }
-
-  :root[platform="linux"] .requests-list-header-button {
-    font-size: 85%;
-  }
 }

devtools/client/themes/common.css

@@ -6,7 +6,12 @@
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 :root {
+  /* Bug 1458224: the initial `font-size` is different on Mac/Windows
+   * (appears fixed to 11px) and Linux (bigger, depends on user settings).
+   * Workaround: specify font-size on root, on form inputs, and whenever
+   * we're using the `font` shorthand. */
   font: message-box;
+  font-size: var(--theme-body-font-size);
 
   --clear-icon-url: url("chrome://devtools/skin/images/clear.svg");
   --tab-line-hover-color: rgba(0,0,0,.2);
@@ -35,15 +40,16 @@
 
 .devtools-monospace {
   font-family: var(--monospace-font-family);
+  font-size: var(--theme-code-font-size);
 }
 
-:root[platform="linux"] .devtools-monospace {
-  font-size: 11px;
-}
-
-/* Override wrong system font from forms.css */
-html|button, html|select {
+/**
+ * Override wrong system font from forms.css
+ * Bug 1458224: buttons use a wrong default font-size on Linux
+ */
+html|button, html|select, html|input {
   font: message-box;
+  font-size: var(--theme-body-font-size);
 }
 
 /* Autocomplete Popup */
@@ -65,11 +71,6 @@ html|button, html|select {
   margin: 0;
 }
 
-:root[platform="linux"] .devtools-autocomplete-listbox {
-  /* Root font size is bigger on Linux, adjust rem-based values. */
-  max-height: 16rem;
-}
-
 .devtools-autocomplete-listbox {
   --autocomplete-item-padding-inline: 8px;
   -moz-appearance: none !important;
@@ -423,6 +424,7 @@ checkbox:-moz-focusring {
   padding: 4px 6px;
   border-color: var(--theme-splitter-color);
   font: message-box;
+  font-size: var(--theme-body-font-size);
 }
 
 :root[platform="mac"] .devtools-textinput,

devtools/client/themes/inspector.css

@@ -160,7 +160,6 @@ window {
 #inspector-breadcrumbs .breadcrumbs-widget-item {
   white-space: nowrap;
   flex-shrink: 0;
-  font: message-box;
 }
 
 #inspector-rules-container,

devtools/client/themes/variables.css

@@ -190,6 +190,10 @@
   --theme-focus-border-color-textbox: #0675d3;
   --theme-textbox-box-shadow: rgba(97,181,255,.75);
 
+  /* Text sizes */
+  --theme-body-font-size: 11px;
+  --theme-code-font-size: 11px;
+
   /* For accessibility purposes we want to enhance the focus styling. This
    * should improve keyboard navigation usability. */
   --theme-focus-outline: 1px dotted var(--theme-focus-outline-color);