Bug 1200682 - Fix CSS for sidebar view. r=jryans
authorJennifer Fong <jfong@mozilla.com>
Tue, 08 Sep 2015 08:21:32 -0700
changeset 294040 ce582bee57cb1a7a81303dc3b41289c01345b06a
parent 294039 e009d40f03dce35125867be0b32840888c3356b9
child 294041 2fd91dc12a4219ac7d7631455774a31483d85cb4
push id5245
push userraliiev@mozilla.com
push dateThu, 29 Oct 2015 11:30:51 +0000
treeherdermozilla-beta@dac831dc1bd0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjryans
bugs1200682
milestone43.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 1200682 - Fix CSS for sidebar view. r=jryans
browser/devtools/webide/content/webide.xul
browser/devtools/webide/modules/project-list.js
browser/devtools/webide/themes/config-view.css
browser/devtools/webide/themes/deck.css
browser/devtools/webide/themes/panel-listing.css
browser/devtools/webide/themes/webide.css
--- a/browser/devtools/webide/content/webide.xul
+++ b/browser/devtools/webide/content/webide.xul
@@ -18,17 +18,17 @@
 <window id="webide" onclose="return UI.canCloseProject();"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml"
         title="&windowTitle;"
         windowtype="devtools:webide"
         macanimationtype="document"
         fullscreenbutton="true"
         screenX="4" screenY="4"
-        width="640" height="480"
+        width="800" height="600"
         persist="screenX screenY width height sizemode">
 
   <script type="application/javascript" src="chrome://global/content/globalOverlay.js"></script>
   <script type="application/javascript" src="project-panel.js"></script>
   <script type="application/javascript" src="runtime-panel.js"></script>
   <script type="application/javascript" src="webide.js"></script>
 
   <commandset id="mainCommandSet">
--- a/browser/devtools/webide/modules/project-list.js
+++ b/browser/devtools/webide/modules/project-list.js
@@ -137,16 +137,17 @@ ProjectList.prototype = {
     if (this._sidebarsEnabled && this._doc !== this._parentWindow.document) {
       let span = opts.panel.querySelector("span") || this._doc.createElement("span");
       span.textContent = opts.name;
       let icon = opts.panel.querySelector("img") || this._doc.createElement("img");
       icon.className = "project-image";
       icon.setAttribute("src", opts.icon);
       opts.panel.appendChild(icon);
       opts.panel.appendChild(span);
+      opts.panel.setAttribute("title", opts.name);
     } else {
       opts.panel.setAttribute("label", opts.name);
       opts.panel.setAttribute("image", opts.icon);
     }
   },
 
   refreshTabs: function() {
     if (AppManager.connected) {
--- a/browser/devtools/webide/themes/config-view.css
+++ b/browser/devtools/webide/themes/config-view.css
@@ -18,38 +18,40 @@ html, body {
   font-family: sans-serif;
   padding-left: 6px;
   width: 100%;
   table-layout: auto;
   margin-top: 110px;
 }
 
 #custom-value-name {
-  width: 70%;
+  width: 50%;
 }
 
 header {
   background-color: rgba(255, 255, 255, 0.8);
   border-bottom: 1px solid #EEE;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 90px;
   padding: 10px 20px;
 }
 
 #device-fields td {
-  background-color: #f1f1f1;
-  border-bottom: 1px solid #ccc;
-  border-right: 1px solid #fff;
+  background-color: #F9F9F9;
+  border-bottom: 1px solid #CCC;
+  border-right: 1px solid #FFF;
+  font-size: 0.75em;
 }
 
 #device-fields td:first-child {
-  min-width: 400px;
+  max-width: 250px;
+  min-width: 150px;
 }
 
 #device-fields td.preference-name, #device-fields td.setting-name {
   width: 50%;
   min-width: 400px;
   word-break: break-all;
 }
 
@@ -60,17 +62,17 @@ header {
   white-space: nowrap;
 }
 
 #device-fields tr.hide, #device-fields button.hide {
   display: none;
 }
 
 #device-fields .custom-input {
-  width: 300px;
+  width: 130px;
 }
 
 #search {
   margin-bottom: 20px;
   width: 100%;
 }
 
 #search-bar {
--- a/browser/devtools/webide/themes/deck.css
+++ b/browser/devtools/webide/themes/deck.css
@@ -1,15 +1,15 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 html {
   font: message-box;
-  font-size: 15px;
+  font-size: 0.9em;
   font-weight: normal;
   margin: 0;
   height: 100%;
   color: #737980;
   background-color: #ededed;
 }
 
 body {
@@ -23,17 +23,17 @@ body {
 }
 
 .text-input input {
   flex: 0.5;
   margin-left: 5px;
 }
 
 h1 {
-  font-size: 2.5em;
+  font-size: 2em;
   font-weight: lighter;
   line-height: 1.2;
   margin: 0;
   margin-bottom: .5em;
 }
 
 #controls {
   position: absolute;
@@ -55,17 +55,17 @@ table {
 }
 
 th, td {
   padding: 5px;
   border: 1px solid #eee;
 }
 
 th {
-  min-width: 130px;
+  min-width: 100px;
 }
 
 th:first-of-type, td:first-of-type {
   text-align: left;
 }
 
 li {
   list-style: none;
--- a/browser/devtools/webide/themes/panel-listing.css
+++ b/browser/devtools/webide/themes/panel-listing.css
@@ -1,15 +1,15 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 html {
   font: message-box;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 400;
 }
 
 label,
 .panel-item,
 #project-panel-projects,
 #runtime-panel-projects {
   display: block;
@@ -48,65 +48,82 @@ label,
 }
 
 #runtime-panel-simulator,
 .panel-item-complex {
   clear: both;
   position: relative;
 }
 
+.panel-item span {
+  display: block;
+  float: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 75%;
+  white-space: nowrap;
+}
+
 .panel-item {
   padding: 3%;
   display: block;
-  background-color: #fff;
-  border-bottom: 1px solid #ccc;
-  border-right: 1px solid #ccc;
-  border-top: 1px solid #ededed;
+  width: 94%;
+  cursor: pointer;
+  border-top: 1px solid transparent;
   border-left: 0;
-  width: 94%;
+  border-bottom: 1px solid #CCC;
+  border-right: 0;
+  background-color: transparent;
 }
 
 button.panel-item {
-  background-position: 8px 8px;
+  background-position: 5px 5px;
   background-repeat: no-repeat;
   background-size: 14px 14px;
   padding-left: 25px;
   width: 100%;
 }
 
-button.project-panel-item-refreshtabs {
+.panel-item:disabled {
+  background-color: #FFF;
+  color: #5A5A5A;
+  opacity: 0.5;
+  cursor: default;
+}
+
+#refresh-tabs {
+  background-color: #FFF;
+  border-top: 1px solid #EDEDED;
   display: inline-block;
   float: right;
   padding: 3px;
   text-transform: none;
+  border-right: 1px solid #CCC;
   width: auto;
   margin: 0 4px 5px 5px;
 }
 
-.panel-item:disabled {
-  background-color: #FFF;
-  color: #5A5A5A;
-  opacity: 0.5;
-}
-
-.panel-item:not(:disabled):hover {
+.panel-item:not(:disabled):hover,
+button.panel-item:not(:disabled):hover,
+#refresh-tabs:hover {
   background-color: #CCF0FD;
+  border-top: 1px solid #EDEDED;
 }
 
 .configure-button {
   display: inline-block;
   height: 30px;
   width: 30px;
   background-color: transparent;
   background-image: -moz-image-rect(url("icons.png"), 104, 462, 129, 438);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 14px 14px;
   position: absolute;
-  top: 0;
+  top: -2px;
   right: 0;
   border: 0;
 }
 
 .configure-button:hover {
   cursor: pointer;
 }
 
--- a/browser/devtools/webide/themes/webide.css
+++ b/browser/devtools/webide/themes/webide.css
@@ -157,20 +157,24 @@ panel > .panel-arrowcontainer > .panel-a
   padding: 12px 0;
   min-width: 200px;
   max-width: 400px;
 }
 
 .panel-list {
   display: none;
   position: relative;
-  max-width: 250px;
+  max-width: 180px;
   overflow: hidden;
 }
 
+#project-listing-panel.panel-list {
+  max-width: 165px;
+}
+
 .panel-list-wrapper {
   height: 100%;
   width: 100%;
   min-width: 100px;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;