Bug 964263 - Get rid of unused blankspace in css computed-view when resizing the sidebar r=pbrosset
authorEmerson Veenstra <emerson@emersonveenstra.net>
Wed, 12 Feb 2014 09:22:40 +0100
changeset 168237 445dca4f26f044063a48b3d0ad8b5518786091a4
parent 168236 05d01f97ed0c3b83f7ae223a89e04ee7628c163d
child 168238 858730718af2dbba2230f20deb23757786eb56bb
push id26199
push userryanvm@gmail.com
push dateWed, 12 Feb 2014 13:33:20 +0000
treeherdermozilla-central@c11bd46b6a2a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbrosset
bugs964263
milestone30.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 964263 - Get rid of unused blankspace in css computed-view when resizing the sidebar r=pbrosset
browser/themes/linux/devtools/computedview.css
browser/themes/osx/devtools/computedview.css
browser/themes/windows/devtools/computedview.css
--- a/browser/themes/linux/devtools/computedview.css
+++ b/browser/themes/linux/devtools/computedview.css
@@ -36,26 +36,26 @@ body {
 }
 
 .property-view > * {
   display: inline-block;
   vertical-align: middle;
 }
 
 .property-name {
-  width: 50%;
+  /* -12px is so the expander triangle isn't pushed up above the property */
+  width: calc(100% - 12px);
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   outline: 0;
 }
 
 .property-value {
-  width: 50%;
-  max-width: 100%;
+  width: 100%;
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   background-image: url(arrow-e.png);
   background-repeat: no-repeat;
   background-size: 5px 8px;
   background-position: 2px center;
   padding-left: 10px;
@@ -70,17 +70,18 @@ body {
   padding-left: 8px;
 }
 
 @media (min-width: 400px) {
   .property-name {
     width: 200px;
   }
   .property-value {
-    width: auto;
+    /* -212px is accounting for the 200px property-name and the 12px triangle */
+    width: calc(100% - 212px);
   }
 }
 
 .property-content {
   padding-left: 17px;
 }
 
 /* From skin */
--- a/browser/themes/osx/devtools/computedview.css
+++ b/browser/themes/osx/devtools/computedview.css
@@ -54,26 +54,26 @@ body {
 }
 
 .property-view > * {
   display: inline-block;
   vertical-align: middle;
 }
 
 .property-name {
-  width: 50%;
+  /* -12px is so the expander triangle isn't pushed up above the property */
+  width: calc(100% - 12px);
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   outline: 0;
 }
 
 .property-value {
-  width: 50%;
-  max-width: 100%;
+  width: 100%;
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   background-image: url(arrow-e.png);
   background-repeat: no-repeat;
   background-size: 5px 8px;
   background-position: 2px center;
   padding-left: 10px;
@@ -88,17 +88,18 @@ body {
   padding-left: 8px;
 }
 
 @media (min-width: 400px) {
   .property-name {
     width: 200px;
   }
   .property-value {
-    width: auto;
+    /* -212px is accounting for the 200px property-name and the 12px triangle */
+    width: calc(100% - 212px);
   }
 }
 
 .property-content {
   padding-left: 17px;
 }
 
 /* From skin */
--- a/browser/themes/windows/devtools/computedview.css
+++ b/browser/themes/windows/devtools/computedview.css
@@ -54,26 +54,26 @@ body {
 }
 
 .property-view > * {
   display: inline-block;
   vertical-align: middle;
 }
 
 .property-name {
-  width: 50%;
+  /* -12px is so the expander triangle isn't pushed up above the property */
+  width: calc(100% - 12px);
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   outline: 0;
 }
 
 .property-value {
-  width: 50%;
-  max-width: 100%;
+  width: 100%;
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   background-image: url(arrow-e.png);
   background-repeat: no-repeat;
   background-size: 5px 8px;
   background-position: 2px center;
   padding-left: 10px;
@@ -88,17 +88,18 @@ body {
   padding-left: 8px;
 }
 
 @media (min-width: 400px) {
   .property-name {
     width: 200px;
   }
   .property-value {
-    width: auto;
+    /* -212px is accounting for the 200px property-name and the 12px triangle */
+    width: calc(100% - 212px);
   }
 }
 
 .property-content {
   padding-left: 17px;
 }
 
 /* From skin */