-.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;