Bug 905312 - Make monospace font consistent across devtools; r=paul

2013-08-26 10:24:41 +02:00 · 2013-08-26 10:24:41 +02:00 · ed6d8cdd5e
--- a/browser/devtools/debugger/debugger-panes.js
+++ b/browser/devtools/debugger/debugger-panes.js
@ -466,7 +466,8 @@ SourcesView.prototype = Heritage.extend(WidgetMethods, {

    let container = document.createElement("hbox");
    container.id = "breakpoint-" + aOptions.actor;
-    container.className = "dbg-breakpoint side-menu-widget-item-other";
+    container.className = "dbg-breakpoint devtools-monospace" +
+                          " side-menu-widget-item-other";
    container.setAttribute("align", "center");
    container.setAttribute("flex", "1");

@ -1429,7 +1430,7 @@ WatchExpressionsView.prototype = Heritage.extend(WidgetMethods, {
    arrowNode.className = "dbg-expression-arrow";

    let inputNode = document.createElement("textbox");
-    inputNode.className = "plain dbg-expression-input";
+    inputNode.className = "plain dbg-expression-input devtools-monospace";
    inputNode.setAttribute("value", aAttachment.initialExpression);
    inputNode.setAttribute("flex", "1");

@ -2194,9 +2195,10 @@ LineResults.prototype = {
    let lineLength = 0;
    let firstMatch = null;

-    lineNumberNode.className = "plain dbg-results-line-number";
+    lineNumberNode.className = "plain dbg-results-line-number devtools-monospace";
    lineNumberNode.setAttribute("value", aLineNumber + 1);
-    lineContentsNode.className = "light list-widget-item dbg-results-line-contents";
+    lineContentsNode.className = "light list-widget-item devtools-monospace" +
+                                 " dbg-results-line-contents";
    lineContentsNode.setAttribute("flex", "1");

    for (let chunk of this._store) {
--- a/browser/devtools/debugger/debugger.xul
+++ b/browser/devtools/debugger/debugger.xul
@ -347,35 +347,35 @@
             value="&debuggerUI.searchPanelOperators;"/>
      <hbox align="center">
        <button id="global-operator-button"
-                class="searchbox-panel-operator-button"
+                class="searchbox-panel-operator-button devtools-monospace"
                command="globalSearchCommand"/>
        <label id="global-operator-label"
               class="plain searchbox-panel-operator-label"/>
      </hbox>
      <hbox align="center">
        <button id="function-operator-button"
-                class="searchbox-panel-operator-button"
+                class="searchbox-panel-operator-button devtools-monospace"
                command="functionSearchCommand"/>
        <label id="function-operator-label"
               class="plain searchbox-panel-operator-label"/>
      </hbox>
      <hbox align="center">
        <button id="token-operator-button"
-                class="searchbox-panel-operator-button"
+                class="searchbox-panel-operator-button devtools-monospace"
                command="tokenSearchCommand"/>
        <label id="token-operator-label"
               class="plain searchbox-panel-operator-label"/>
      </hbox>
      <hbox align="center">
        <button id="line-operator-button"
-                class="searchbox-panel-operator-button"
+                class="searchbox-panel-operator-button devtools-monospace"
                command="lineSearchCommand"/>
        <label id="line-operator-label"
               class="plain searchbox-panel-operator-label"/>
      </hbox>
      <hbox align="center">
        <button id="variable-operator-button"
-                class="searchbox-panel-operator-button"
+                class="searchbox-panel-operator-button devtools-monospace"
                command="variableSearchCommand"/>
        <label id="variable-operator-label"
               class="plain searchbox-panel-operator-label"/>
--- a/browser/devtools/layoutview/view.css
+++ b/browser/devtools/layoutview/view.css
@ -15,7 +15,6 @@ body {

 #header {
  -moz-box-sizing: border-box;
-  font: 12px/16px monospace;
  width: 100%;
  padding: 6px 9px;
  display: -moz-box;
@ -44,7 +43,6 @@ body {
  width: calc(100% - 2 * 10px);
  position: absolute;
  border-width: 1px;
-  font: 10px/12px monospace;
 }

@media (min-width: 320px) {
--- a/browser/devtools/layoutview/view.xhtml
+++ b/browser/devtools/layoutview/view.xhtml
@ -65,11 +65,12 @@
    ]]>
    </script>

+    <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
    <link rel="stylesheet" href="chrome://browser/skin/devtools/layoutview.css" type="text/css"/>
    <link rel="stylesheet" href="view.css" type="text/css"/>

  </head>
-  <body class="theme-body">
+  <body class="theme-body devtools-monospace">

    <p id="header">
        <span id="element-size"></span>
--- a/browser/devtools/netmonitor/netmonitor.xul
+++ b/browser/devtools/netmonitor/netmonitor.xul
@ -288,7 +288,7 @@
                <label class="plain tabpanel-summary-label"
                       value="&netmonitorUI.summary.url;"/>
                <label id="headers-summary-url-value"
-                       class="plain tabpanel-summary-value"
+                       class="plain tabpanel-summary-value devtools-monospace"
                       crop="end"
                       flex="1"/>
              </hbox>
@ -298,7 +298,7 @@
                <label class="plain tabpanel-summary-label"
                       value="&netmonitorUI.summary.method;"/>
                <label id="headers-summary-method-value"
-                       class="plain tabpanel-summary-value"
+                       class="plain tabpanel-summary-value devtools-monospace"
                       crop="end"
                       flex="1"/>
              </hbox>
@ -310,7 +310,7 @@
                <box id="headers-summary-status-circle"
                     class="requests-menu-status"/>
                <label id="headers-summary-status-value"
-                       class="plain tabpanel-summary-value"
+                       class="plain tabpanel-summary-value devtools-monospace"
                       crop="end"
                       flex="1"/>
                <button id="headers-summary-resend"
@ -324,7 +324,7 @@
                <label class="plain tabpanel-summary-label"
                       value="&netmonitorUI.summary.version;"/>
                <label id="headers-summary-version-value"
-                       class="plain tabpanel-summary-value"
+                       class="plain tabpanel-summary-value devtools-monospace"
                       crop="end"
                       flex="1"/>
              </hbox>
@ -364,7 +364,7 @@
                  <label class="plain tabpanel-summary-label"
                         value="&netmonitorUI.response.name;"/>
                  <label id="response-content-image-name-value"
-                         class="plain tabpanel-summary-value"
+                         class="plain tabpanel-summary-value devtools-monospace"
                         crop="end"
                         flex="1"/>
                </hbox>
@ -372,7 +372,7 @@
                  <label class="plain tabpanel-summary-label"
                         value="&netmonitorUI.response.dimensions;"/>
                  <label id="response-content-image-dimensions-value"
-                         class="plain tabpanel-summary-value"
+                         class="plain tabpanel-summary-value devtools-monospace"
                         crop="end"
                         flex="1"/>
                </hbox>
@ -380,7 +380,7 @@
                  <label class="plain tabpanel-summary-label"
                         value="&netmonitorUI.response.mime;"/>
                  <label id="response-content-image-mime-value"
-                         class="plain tabpanel-summary-value"
+                         class="plain tabpanel-summary-value devtools-monospace"
                         crop="end"
                         flex="1"/>
                </hbox>
@ -388,7 +388,7 @@
                  <label class="plain tabpanel-summary-label"
                         value="&netmonitorUI.response.encoding;"/>
                  <label id="response-content-image-encoding-value"
-                         class="plain tabpanel-summary-value"
+                         class="plain tabpanel-summary-value devtools-monospace"
                         crop="end"
                         flex="1"/>
                </hbox>
--- a/browser/devtools/shared/autocomplete-popup.js
+++ b/browser/devtools/shared/autocomplete-popup.js
@ -59,7 +59,8 @@ function AutocompletePopup(aDocument, aOptions = {})
  if (!this._panel) {
    this._panel = this._document.createElementNS(XUL_NS, "panel");
    this._panel.setAttribute("id", id);
-    this._panel.className = "devtools-autocomplete-popup " + theme + "-theme";
+    this._panel.className = "devtools-autocomplete-popup devtools-monospace "
+                            + theme + "-theme";

    this._panel.setAttribute("noautofocus", "true");
    this._panel.setAttribute("level", "top");
--- a/browser/devtools/webconsole/console-output.js
+++ b/browser/devtools/webconsole/console-output.js
@ -228,6 +228,7 @@ Messages.BaseMessage.prototype = {
    let body = doc.createElementNS(XUL_NS, "description");
    body.flex = 1;
    body.classList.add("webconsole-msg-body");
+    body.classList.add("devtools-monospace");
    container.appendChild(body);

    return container;
--- a/browser/devtools/webconsole/webconsole.js
+++ b/browser/devtools/webconsole/webconsole.js
@ -2304,6 +2304,7 @@ WebConsoleFrame.prototype = {
    let bodyNode = this.document.createElementNS(XUL_NS, "description");
    bodyNode.flex = 1;
    bodyNode.classList.add("webconsole-msg-body");
+    bodyNode.classList.add("devtools-monospace");

    // Store the body text, since it is needed later for the variables view.
    let body = aBody;
@ -2350,6 +2351,8 @@ WebConsoleFrame.prototype = {
    // Create the timestamp.
    let timestampNode = this.document.createElementNS(XUL_NS, "label");
    timestampNode.classList.add("webconsole-timestamp");
+    timestampNode.classList.add("devtools-monospace");
+
    let timestamp = aTimeStamp || Date.now();
    let timestampString = l10n.timestampString(timestamp);
    timestampNode.setAttribute("value", timestampString);
@ -2574,6 +2577,7 @@ WebConsoleFrame.prototype = {
    locationNode.setAttribute("tooltiptext", aSourceURL);
    locationNode.classList.add("webconsole-location");
    locationNode.classList.add("text-link");
+    locationNode.classList.add("devtools-monospace");

    // Make the location clickable.
    locationNode.addEventListener("click", () => {
--- a/browser/devtools/webconsole/webconsole.xul
+++ b/browser/devtools/webconsole/webconsole.xul
@ -169,9 +169,10 @@ function goUpdateConsoleCommands() {

      <hbox class="jsterm-input-container" style="direction:ltr">
        <stack class="jsterm-stack-node" flex="1">
-          <textbox class="jsterm-complete-node" multiline="true" rows="1"
-                   tabindex="-1"/>
-          <textbox class="jsterm-input-node" multiline="true" rows="1" tabindex="0"/>
+          <textbox class="jsterm-complete-node devtools-monospace"
+                   multiline="true" rows="1" tabindex="-1"/>
+          <textbox class="jsterm-input-node devtools-monospace"
+                   multiline="true" rows="1" tabindex="0"/>
        </stack>
      </hbox>
    </vbox>
--- a/browser/themes/linux/devtools/common.css
+++ b/browser/themes/linux/devtools/common.css
@ -11,7 +11,7 @@

 .devtools-monospace {
  font-family: monospace;
-  font-size: 85%;
+  font-size: 80%;
 }

 /* Toolbar and Toolbar items */
--- a/browser/themes/linux/devtools/debugger.css
+++ b/browser/themes/linux/devtools/debugger.css
@ -132,7 +132,6 @@
 /* Sources and breakpoints view */

 .dbg-breakpoint {
-  font-family: monospace;
  -moz-margin-start: -14px;
 }

@ -164,7 +163,6 @@

 .dbg-expression-input {
  -moz-padding-start: 2px !important;
-  font-family: Menlo, Monaco, monospace;
 }

 /* Searchbox and the search operations help panel */
@ -191,7 +189,6 @@
  -moz-margin-start: 2px;
  -moz-margin-end: 6px;
  text-align: center;
-  font-family: Menlo, Monaco, monospace;
 }

 .searchbox-panel-operator-label {
@ -289,7 +286,6 @@
  -moz-padding-end: 4px;
  padding-top: 2px;
  text-align: end;
-  font-family: monospace;
  color: #8c8c8c;
 }

@ -297,7 +293,6 @@
  -moz-padding-start: 4px;
  padding-top: 1px;
  padding-bottom: 1px;
-  font-family: monospace;
 }

 .dbg-results-line-contents-string {
--- a/browser/themes/linux/devtools/font-inspector.css
+++ b/browser/themes/linux/devtools/font-inspector.css
@ -8,7 +8,7 @@ body {
 }

 #all-fonts {
-  padding: 0 5px;
+  padding: 0;
  margin: 0;
 }

@ -23,8 +23,7 @@ body {
 }

 .font {
-  padding: 10px 5px;
-  font-size: 0;
+  padding: 10px 10px;
 }

 .theme-dark .font {
@ -51,7 +50,6 @@ body {
 }

 .font-info {
-  font-size: 1rem;
  display: block;
 }

--- a/browser/themes/linux/devtools/netmonitor.css
+++ b/browser/themes/linux/devtools/netmonitor.css
@ -365,7 +365,6 @@ box.requests-menu-status[code^="5"] {

 .tabpanel-summary-value {
  -moz-padding-start: 3px;
-  font-family: Menlo, Monaco, monospace;
 }

 .variable-or-property:not(:focus) > .title > .token-string {
--- a/browser/themes/linux/devtools/webconsole.css
+++ b/browser/themes/linux/devtools/webconsole.css
@ -4,20 +4,6 @@

 %include ../../shared/devtools/webconsole.inc.css

-.webconsole-timestamp,
-.webconsole-msg-body {
-  font-family: "DejaVu Sans Mono", monospace;
-}
-
-.jsterm-input-node,
-.jsterm-complete-node {
-  font: 0.9em "DejaVu Sans Mono", monospace;
-}
-
-.hud-output-node {
-  font-size: 0.9em;
-}
-
 .jsterm-input-node {
  width: 98%;
 }
--- a/browser/themes/osx/devtools/common.css
+++ b/browser/themes/osx/devtools/common.css
@ -13,6 +13,7 @@

 .devtools-monospace {
  font-family: monospace;
+  font-size: 108%;
 }

 /* Toolbar and Toolbar items */
--- a/browser/themes/osx/devtools/debugger.css
+++ b/browser/themes/osx/devtools/debugger.css
@ -130,7 +130,6 @@
 /* Sources and breakpoints view */

 .dbg-breakpoint {
-  font-family: monospace;
  -moz-margin-start: -14px;
 }

@ -162,7 +161,6 @@

 .dbg-expression-input {
  -moz-padding-start: 2px !important;
-  font-family: Menlo, Monaco, monospace;
 }

 /* Searchbox and the search operations help panel */
@ -189,7 +187,6 @@
  -moz-margin-start: 2px;
  -moz-margin-end: 6px;
  text-align: center;
-  font-family: Menlo, Monaco, monospace;
 }

 .searchbox-panel-operator-label {
@ -287,7 +284,6 @@
  -moz-padding-end: 4px;
  padding-top: 2px;
  text-align: end;
-  font-family: monospace;
  color: #8c8c8c;
 }

@ -295,7 +291,6 @@
  -moz-padding-start: 4px;
  padding-top: 1px;
  padding-bottom: 1px;
-  font-family: monospace;
 }

 .dbg-results-line-contents-string {
--- a/browser/themes/osx/devtools/font-inspector.css
+++ b/browser/themes/osx/devtools/font-inspector.css
@ -8,7 +8,7 @@ body {
 }

 #all-fonts {
-  padding: 0 5px;
+  padding: 0;
  margin: 0;
 }

@ -23,8 +23,7 @@ body {
 }

 .font {
-  padding: 10px 5px;
-  font-size: 0;
+  padding: 10px 10px;
 }

 .theme-dark .font {
@ -51,7 +50,6 @@ body {
 }

 .font-info {
-  font-size: 1rem;
  display: block;
 }

--- a/browser/themes/osx/devtools/netmonitor.css
+++ b/browser/themes/osx/devtools/netmonitor.css
@ -365,7 +365,6 @@ box.requests-menu-status[code^="5"] {

 .tabpanel-summary-value {
  -moz-padding-start: 3px;
-  font-family: Menlo, Monaco, monospace;
 }

 .variable-or-property:not(:focus) > .title > .token-string {
--- a/browser/themes/osx/devtools/webconsole.css
+++ b/browser/themes/osx/devtools/webconsole.css
@ -3,16 +3,4 @@
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

 %include ../shared.inc
-%include ../../shared/devtools/webconsole.inc.css
-
-/* General output styles */
-
-.webconsole-timestamp,
-.webconsole-msg-body {
-  font-family: Menlo, Monaco, monospace;
-}
-
-.jsterm-input-node,
-.jsterm-complete-node {
-  font: 1em Menlo, Monaco, monospace;
-}
+%include ../../shared/devtools/webconsole.inc.css
--- a/browser/themes/shared/devtools/webconsole.inc.css
+++ b/browser/themes/shared/devtools/webconsole.inc.css
@ -8,7 +8,6 @@
  color: GrayText;
  margin-top: 0;
  margin-bottom: 0;
-  font-family: monospace;
 }

 .hud-msg-node {
@ -33,7 +32,6 @@
  -moz-margin-start: 3px;
  -moz-margin-end: 6px;
  white-space: pre-wrap;
-  font-family: monospace;
 }

 .webconsole-msg-body-piece {
@ -93,11 +91,6 @@
  background: white;
 }

-.jsterm-input-node,
-.jsterm-complete-node {
-  font-family: monospace;
-}
-
 .hud-output-node {
  -moz-appearance: none;
  border-bottom: 1px solid ThreeDShadow;
--- a/browser/themes/windows/devtools/debugger.css
+++ b/browser/themes/windows/devtools/debugger.css
@ -128,7 +128,6 @@
 /* Sources and breakpoints view */

 .dbg-breakpoint {
-  font-family: monospace;
  -moz-margin-start: -14px;
 }

@ -160,7 +159,6 @@

 .dbg-expression-input {
  -moz-padding-start: 2px !important;
-  font-family: Menlo, Monaco, monospace;
 }

 /* Searchbox and the search operations help panel */
@ -187,7 +185,6 @@
  -moz-margin-start: 2px;
  -moz-margin-end: 6px;
  text-align: center;
-  font-family: Menlo, Monaco, monospace;
 }

 .searchbox-panel-operator-label {
@ -285,7 +282,6 @@
  -moz-padding-end: 4px;
  padding-top: 2px;
  text-align: end;
-  font-family: monospace;
  color: #8c8c8c;
 }

@ -293,7 +289,6 @@
  -moz-padding-start: 4px;
  padding-top: 1px;
  padding-bottom: 1px;
-  font-family: monospace;
 }

 .dbg-results-line-contents-string {
--- a/browser/themes/windows/devtools/font-inspector.css
+++ b/browser/themes/windows/devtools/font-inspector.css
@ -8,7 +8,7 @@ body {
 }

 #all-fonts {
-  padding: 0 5px;
+  padding: 0;
  margin: 0;
 }

@ -23,8 +23,7 @@ body {
 }

 .font {
-  padding: 10px 5px;
-  font-size: 0;
+  padding: 10px 10px;
 }

 .theme-dark .font {
@ -51,7 +50,6 @@ body {
 }

 .font-info {
-  font-size: 1rem;
  display: block;
 }

--- a/browser/themes/windows/devtools/netmonitor.css
+++ b/browser/themes/windows/devtools/netmonitor.css
@ -365,7 +365,6 @@ box.requests-menu-status[code^="5"] {

 .tabpanel-summary-value {
  -moz-padding-start: 3px;
-  font-family: Menlo, Monaco, monospace;
 }

 .variable-or-property:not(:focus) > .title > .token-string {
--- a/browser/themes/windows/devtools/webconsole.css
+++ b/browser/themes/windows/devtools/webconsole.css
@ -4,13 +4,6 @@

 %include ../../shared/devtools/webconsole.inc.css

-.webconsole-timestamp,
-.webconsole-msg-body,
-.jsterm-input-node,
-.jsterm-complete-node {
-  font-family: Consolas, Lucida Console, monospace;
-}
-
 /*
 * This hardcoded width likely due to a toolkit Windows specific bug.
 * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7