From b981e4fd9e29e9b4781f1a4e6dbee38e2e253c2f Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Sun, 8 Dec 2013 17:31:59 +0100 Subject: [PATCH] sync webconsole with windows theme changes in Firefox 26 cycle --- LCARStrek/browser/devtools/webconsole.css | 236 +++++++++++++--------- 1 file changed, 143 insertions(+), 93 deletions(-) diff --git a/LCARStrek/browser/devtools/webconsole.css b/LCARStrek/browser/devtools/webconsole.css index 0f80962d..35b4c457 100644 --- a/LCARStrek/browser/devtools/webconsole.css +++ b/LCARStrek/browser/devtools/webconsole.css @@ -19,49 +19,54 @@ window { /* General output styles */ -.webconsole-timestamp { - color: #8050B0; - margin-top: 0; - margin-bottom: 0; -} - -.hud-msg-node { - list-style-image: url("chrome://browser/skin/devtools/webconsole.png"); - -moz-image-region: rect(0, 1px, 0, 0); -} - -.webconsole-msg-icon { - margin: 3px 4px; - width: 8px; - height: 8px; -} - -.hud-clickable { +a { + -moz-user-focus: normal; + -moz-user-input: enabled; cursor: pointer; text-decoration: underline; } -.webconsole-msg-body { - margin-top: 0; - margin-bottom: 3px; - -moz-margin-start: 3px; - -moz-margin-end: 6px; - white-space: pre-wrap; +/* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited + * assertion when loading HTML page with links in XUL iframe */ +*:visited { } + +.message { + display: flex; + flex: 0 0 auto; + -moz-margin-start: 6px; + -moz-margin-end: 8px; + width: calc(100% - 6px - 8px); } -.webconsole-msg-body-piece { - margin: 0; +.message > .timestamp { + flex: 0 0 auto; + color: #8050B0; + margin: 4px 0; } -.webconsole-msg-url { +.message > .icon { + background: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 0, 1, 0, 0) no-repeat; + background-position: center 0.5em; + flex: 0 0 auto; margin: 0 6px; + padding: 0 4px; + width: 8px; +} + +.message > .body { + flex: 1 1 100%; + white-space: pre-wrap; + word-wrap: break-word; + margin-top: 4px; } -/* Repeated messages */ -.webconsole-msg-repeat { - margin: 2px 0; - padding-left: 4px; - padding-right: 4px; +/* The red bubble that shows the number of times a message is repeated */ +.message > .repeats { + -moz-user-select: none; + flex: 0 0 auto; + margin: 2px 6px; + padding: 0 6px; + height: 1.25em; color: #000000; background-color: #FF0000; border-radius: 40px; @@ -70,32 +75,27 @@ window { font-weight: 600; } -/* TODO move this and other functional rules to content - bug 635359 */ -.webconsole-msg-repeat[value="1"] { +.message > .repeats[value="1"] { display: none; } -.webconsole-location { - margin-top: 0; - margin-bottom: 0; - -moz-margin-start: 0; - -moz-margin-end: 6px; +.message > .location { + -moz-margin-start: 6px; + flex: 0 0 auto; + align-self: flex-start; width: 10em; + margin-top: 4px; text-align: end; -} - -.webconsole-mixed-content { - color: #FF0000; -} - -.webconsole-mixed-content-link { color: #3333FF; - margin: 0; + text-overflow: ellipsis; + text-decoration: none; + overflow: hidden; + white-space: nowrap; } -.webconsole-learn-more-link { - color: #9C9CFF; - margin: 0 0 0 4px; +.message > .location:hover, +.message > .location:focus { + text-decoration: underline; } .hud-msg-node[selected="true"] > .webconsole-timestamp, @@ -103,14 +103,24 @@ window { color: inherit; } -.hud-output-node { - -moz-appearance: none; +#output-wrapper { + background: #000000; + color: #FF9F00; + direction: ltr; border-bottom: 1px solid #9C9CFF; - margin: 0; + overflow: auto; +} + +#output-container { + -moz-user-select: text; + -moz-box-flex: 1; + display: flex; + flex-direction: column; + align-items: flex-start; } -.hud-filtered-by-type, -.hud-filtered-by-string { +.filtered-by-type, +.filtered-by-string { display: none; } @@ -157,12 +167,44 @@ window { border-color: #FFCF00; } -.webconsole-msg-network > .webconsole-msg-icon-container { +.message[category=network] > .icon { -moz-border-start: solid #FFCF00 6px; } -.webconsole-msg-network.webconsole-msg-error { - -moz-image-region: rect(0, 16px, 8px, 8px); +.message[category=network][severity=error] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 0, 16, 8, 8); +} + +.message[category=network] > .body { + display: flex; +} + +.message[category=network] .method { + flex: 0 0 auto; +} + +.message[category=network]:not(.navigation-marker) .url { + flex: 1 1 auto; + /* Make sure the URL is very small initially, let flex change width as needed. */ + width: 100px; + min-width: 5em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.message[category=network] .status { + flex: 0 0 auto; + -moz-margin-start: 6px; +} + +.message[category=network].mixed-content .url { + color: #FF0000; +} + +.message .learn-more-link { + color: #3333FF; + margin: 0 6px; } /* CSS styles */ @@ -171,16 +213,16 @@ window { border-color: #9C9CFF; } -.webconsole-msg-cssparser > .webconsole-msg-icon-container { +.message[category=cssparser] > .icon { -moz-border-start: solid #9C9CFF 6px; } -.webconsole-msg-cssparser.webconsole-msg-error { - -moz-image-region: rect(8px, 16px, 16px, 8px); +.message[category=cssparser][severity=error] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 8, 16, 16, 8); } -.webconsole-msg-cssparser.webconsole-msg-warn { - -moz-image-region: rect(8px, 24px, 16px, 16px); +.message[category=cssparser][severity=warn] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 8, 24, 16, 16); } /* JS styles */ @@ -189,16 +231,16 @@ window { border-color: #FF9F00; } -.webconsole-msg-exception > .webconsole-msg-icon-container { +.message[category=exception] > .icon { -moz-border-start: solid #FF9F00 6px; } -.webconsole-msg-exception.webconsole-msg-error { - -moz-image-region: rect(16px, 16px, 24px, 8px); +.message[category=exception][severity=error] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 16, 16, 24, 8); } -.webconsole-msg-exception.webconsole-msg-warn { - -moz-image-region: rect(16px, 24px, 24px, 16px); +.message[category=exception][severity=warn] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 16, 24, 24, 16); } /* Web Developer styles */ @@ -207,35 +249,35 @@ window { border-color: #8050B0; } -.webconsole-msg-console > .webconsole-msg-icon-container { +.message[category=console] > .icon { -moz-border-start: solid #8050B0 6px; } -.webconsole-msg-console.webconsole-msg-error, -.webconsole-msg-output.webconsole-msg-error { - -moz-image-region: rect(24px, 16px, 32px, 8px); +.message[category=console][severity=error] > .icon, +.message[category=output][severity=error] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 16, 32, 8); } -.webconsole-msg-console.webconsole-msg-warn { - -moz-image-region: rect(24px, 24px, 32px, 16px); +.message[category=console][severity=warn] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 24, 32, 16); } -.webconsole-msg-console.webconsole-msg-info { - -moz-image-region: rect(24px, 32px, 32px, 24px); +.message[category=console][severity=info] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 32, 32, 24); } /* Input and output styles */ -.webconsole-msg-input > .webconsole-msg-icon-container, -.webconsole-msg-output > .webconsole-msg-icon-container { - border-left: solid #808080 6px; +.message[category=input] > .icon, +.message[category=output] > .icon { + -moz-border-start: solid #A09090 6px; } -.webconsole-msg-input { - -moz-image-region: rect(24px, 40px, 32px, 32px); +.message[category=input] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 40, 32, 32); } -.webconsole-msg-output { - -moz-image-region: rect(24px, 48px, 32px, 40px); +.message[category=output] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 48, 32, 40); } /* JSTerm Styles */ @@ -260,10 +302,17 @@ window { color: #8050B0; } -.webconsole-msg-inspector iframe { - height: 7em; +.inlined-variables-view .body { + display: flex; + flex-direction: column; +} + +.inlined-variables-view iframe { + display: block; + flex: 1; margin-bottom: 15px; -moz-margin-end: 15px; + border: 1px solid #9C9CFF; border-radius: 4px; } @@ -274,7 +323,7 @@ window { /* Security styles */ -.webconsole-msg-security > .webconsole-msg-icon-container { +.message[category=security] > .icon { -moz-border-start: solid #FF0000 6px; } @@ -283,23 +332,24 @@ window { border-color: #FFCF00; } -.webconsole-msg-security.webconsole-msg-error { - -moz-image-region: rect(32px, 16px, 40px, 8px); +.message[category=security][severity=error] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 32, 16, 40, 8); } -.webconsole-msg-security.webconsole-msg-warn { - -moz-image-region: rect(32px, 24px, 40px, 16px); +.message[category=security][severity=warn] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 32, 24, 40, 16); } .navigation-marker { color: #000000; background-color: #A09090; - -moz-margin-start: 3px; - -moz-margin-end: 6px; + margin-top: 6px; + margin-bottom: 6px; font-size: 0.9em; } .navigation-marker .url { background-color: #000000; - -moz-padding-end: 6px; + -moz-padding-end: 9px; + text-decoration: none; } -- 2.35.3