Bug 1254390 - Flexible sizing for device selector to display full device names; r=gl

devtools/client/responsive.html/components/device-selector.js

@@ -79,6 +79,7 @@ module.exports = createClass({
     if (state == Types.deviceListState.LOADED) {
       listContent = [dom.option({
         value: "",
+        title: "",
         disabled: true,
         hidden: true,
       }, getStr("responsive.noDeviceSelected")),
@@ -86,20 +87,24 @@ module.exports = createClass({
           return dom.option({
             key: device.name,
             value: device.name,
+            title: "",
           }, device.name);
         }),
         dom.option({
           value: OPEN_DEVICE_MODAL_VALUE,
+          title: "",
         }, getStr("responsive.editDeviceList"))];
     } else if (state == Types.deviceListState.LOADING
       || state == Types.deviceListState.INITIALIZED) {
       listContent = [dom.option({
         value: "",
+        title: "",
         disabled: true,
       }, getStr("responsive.deviceListLoading"))];
     } else if (state == Types.deviceListState.ERROR) {
       listContent = [dom.option({
         value: "",
+        title: "",
         disabled: true,
       }, getStr("responsive.deviceListError"))];
     }
@@ -108,6 +113,7 @@ module.exports = createClass({
       {
         className: selectClass,
         value: selectedDevice,
+        title: selectedDevice,
         onChange: this.onSelectChange,
         disabled: (state !== Types.deviceListState.LOADED),
       },

devtools/client/responsive.html/index.css

@@ -177,17 +177,18 @@ html, body {
   -moz-appearance: none;
   background-color: var(--theme-toolbar-background);
   background-image: var(--viewport-selection-arrow);
-  background-position: 136px;
+  background-position: 100% 52%;
   background-repeat: no-repeat;
   background-size: 7px;
   border: none;
   color: var(--viewport-color);
   height: 100%;
-  padding: 0 16px 0 0;
+  padding: 0 8px 0 8px;
   text-align: center;
   text-overflow: ellipsis;
   width: 150px;
   font-size: 11px;
+  width: -moz-fit-content;
 }
 
 .viewport-device-selector.selected {