mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-19 00:05:36 +00:00
Bug 1467572 - Part 12: Use native context menu instead of select element in the Device selector. r=Honza
- Removes all the unused styling for the <select> and <option> elements and the toolbar-dropdown class.
This commit is contained in:
Gabriel Luong
parent
df39a60dc7
commit
f401295f1f
@ -11,40 +11,32 @@
|
||||
# A good criteria is the language in which you'd find the best
|
||||
# documentation on web development on the web.
|
||||
|
||||
# LOCALIZATION NOTE (responsive.editDeviceList): option displayed in the device
|
||||
# selector
|
||||
responsive.editDeviceList=Edit list…
|
||||
# LOCALIZATION NOTE (responsive.editDeviceList2): Context menu item displayed in the
|
||||
# device selector.
|
||||
responsive.editDeviceList2=Edit List…
|
||||
|
||||
# LOCALIZATION NOTE (responsive.exit): tooltip text of the exit button.
|
||||
# LOCALIZATION NOTE (responsive.exit): Tooltip text of the exit button.
|
||||
responsive.exit=Close Responsive Design Mode
|
||||
|
||||
# LOCALIZATION NOTE (responsive.rotate): tooltip text of the rotate button.
|
||||
# LOCALIZATION NOTE (responsive.rotate): Tooltip text of the rotate button.
|
||||
responsive.rotate=Rotate viewport
|
||||
|
||||
# LOCALIZATION NOTE (responsive.deviceListLoading): placeholder text for
|
||||
# device selector when it's still fetching devices
|
||||
responsive.deviceListLoading=Loading…
|
||||
|
||||
# LOCALIZATION NOTE (responsive.deviceListError): placeholder text for
|
||||
# device selector when an error occurred
|
||||
responsive.deviceListError=No list available
|
||||
|
||||
# LOCALIZATION NOTE (responsive.done): button text in the device list modal
|
||||
# LOCALIZATION NOTE (responsive.done): Button text in the device list modal
|
||||
responsive.done=Done
|
||||
|
||||
# LOCALIZATION NOTE (responsive.noDeviceSelected): placeholder text for the
|
||||
# device selector
|
||||
responsive.noDeviceSelected=no device selected
|
||||
# LOCALIZATION NOTE (responsive.responsiveMode): Placeholder text for the
|
||||
# device selector.
|
||||
responsive.responsiveMode=Responsive
|
||||
|
||||
# LOCALIZATION NOTE (responsive.enableTouch): tooltip text for the touch
|
||||
# simulation button when it's disabled
|
||||
# LOCALIZATION NOTE (responsive.enableTouch): Tooltip text for the touch
|
||||
# simulation button when it's disabled.
|
||||
responsive.enableTouch=Enable touch simulation
|
||||
|
||||
# LOCALIZATION NOTE (responsive.disableTouch): tooltip text for the touch
|
||||
# simulation button when it's enabled
|
||||
# LOCALIZATION NOTE (responsive.disableTouch): Tooltip text for the touch
|
||||
# simulation button when it's enabled.
|
||||
responsive.disableTouch=Disable touch simulation
|
||||
|
||||
# LOCALIZATION NOTE (responsive.screenshot): tooltip of the screenshot button.
|
||||
# LOCALIZATION NOTE (responsive.screenshot): Tooltip of the screenshot button.
|
||||
responsive.screenshot=Take a screenshot of the viewport
|
||||
|
||||
# LOCALIZATION NOTE (responsive.screenshotGeneratedFilename): The auto generated
|
||||
@ -58,11 +50,11 @@ responsive.screenshotGeneratedFilename=Screen Shot %1$S at %2$S
|
||||
# non-remote tab.
|
||||
responsive.remoteOnly=Responsive Design Mode is only available for remote browser tabs, such as those used for web content in multi-process Firefox.
|
||||
|
||||
# LOCALIZATION NOTE (responsive.changeDevicePixelRatio): tooltip for the
|
||||
# LOCALIZATION NOTE (responsive.changeDevicePixelRatio): Tooltip for the
|
||||
# device pixel ratio dropdown when is enabled.
|
||||
responsive.changeDevicePixelRatio=Change device pixel ratio of the viewport
|
||||
|
||||
# LOCALIZATION NOTE (responsive.devicePixelRatio.auto): tooltip for the device pixel ratio
|
||||
# LOCALIZATION NOTE (responsive.devicePixelRatio.auto): Tooltip for the device pixel ratio
|
||||
# dropdown when it is disabled because a device is selected.
|
||||
# The argument (%1$S) is the selected device (e.g. iPhone 6) that set
|
||||
# automatically the device pixel ratio value.
|
||||
|
||||
@ -11,7 +11,7 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
|
||||
const { getStr } = require("../utils/l10n");
|
||||
const Types = require("../types");
|
||||
|
||||
const OPEN_DEVICE_MODAL_VALUE = "OPEN_DEVICE_MODAL";
|
||||
loader.lazyRequireGetter(this, "showMenu", "devtools/client/shared/components/menu/utils", true);
|
||||
|
||||
class DeviceSelector extends PureComponent {
|
||||
static get propTypes() {
|
||||
@ -27,31 +27,54 @@ class DeviceSelector extends PureComponent {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.onSelectChange = this.onSelectChange.bind(this);
|
||||
this.onShowDeviceMenu = this.onShowDeviceMenu.bind(this);
|
||||
}
|
||||
|
||||
onSelectChange({ target }) {
|
||||
onShowDeviceMenu(event) {
|
||||
const {
|
||||
devices,
|
||||
selectedDevice,
|
||||
viewportId,
|
||||
onChangeDevice,
|
||||
onResizeViewport,
|
||||
onUpdateDeviceModal,
|
||||
} = this.props;
|
||||
|
||||
if (target.value === OPEN_DEVICE_MODAL_VALUE) {
|
||||
onUpdateDeviceModal(true, viewportId);
|
||||
return;
|
||||
}
|
||||
const menuItems = [];
|
||||
|
||||
for (const type of devices.types) {
|
||||
for (const device of devices[type]) {
|
||||
if (device.name === target.value) {
|
||||
onResizeViewport(viewportId, device.width, device.height);
|
||||
onChangeDevice(viewportId, device, type);
|
||||
return;
|
||||
if (device.displayed) {
|
||||
menuItems.push({
|
||||
label: device.name,
|
||||
type: "checkbox",
|
||||
checked: selectedDevice === device.name,
|
||||
click: () => {
|
||||
onResizeViewport(viewportId, device.width, device.height);
|
||||
onChangeDevice(viewportId, device, type);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
menuItems.sort(function(a, b) {
|
||||
return a.label.localeCompare(b.label);
|
||||
});
|
||||
|
||||
if (menuItems.length > 0) {
|
||||
menuItems.push("-");
|
||||
}
|
||||
|
||||
menuItems.push({
|
||||
label: getStr("responsive.editDeviceList2"),
|
||||
click: () => onUpdateDeviceModal(true, viewportId),
|
||||
});
|
||||
|
||||
showMenu(menuItems, {
|
||||
button: event.target,
|
||||
useTopLevelWindow: true,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -60,72 +83,19 @@ class DeviceSelector extends PureComponent {
|
||||
selectedDevice,
|
||||
} = this.props;
|
||||
|
||||
const options = [];
|
||||
for (const type of devices.types) {
|
||||
for (const device of devices[type]) {
|
||||
if (device.displayed) {
|
||||
options.push(device);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
options.sort(function(a, b) {
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
let selectClass = "toolbar-dropdown";
|
||||
if (selectedDevice) {
|
||||
selectClass += " selected";
|
||||
}
|
||||
|
||||
const state = devices.listState;
|
||||
let listContent;
|
||||
|
||||
if (state == Types.loadableState.LOADED) {
|
||||
listContent = [
|
||||
dom.option({
|
||||
value: "",
|
||||
title: "",
|
||||
disabled: true,
|
||||
hidden: true,
|
||||
return (
|
||||
dom.button(
|
||||
{
|
||||
id: "device-selector",
|
||||
className: "devtools-button devtools-dropdown-button",
|
||||
disabled: devices.listState !== Types.loadableState.LOADED,
|
||||
title: selectedDevice,
|
||||
onClick: this.onShowDeviceMenu,
|
||||
},
|
||||
getStr("responsive.noDeviceSelected")),
|
||||
options.map(device => {
|
||||
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.loadableState.LOADING
|
||||
|| state == Types.loadableState.INITIALIZED) {
|
||||
listContent = [dom.option({
|
||||
value: "",
|
||||
title: "",
|
||||
disabled: true,
|
||||
}, getStr("responsive.deviceListLoading"))];
|
||||
} else if (state == Types.loadableState.ERROR) {
|
||||
listContent = [dom.option({
|
||||
value: "",
|
||||
title: "",
|
||||
disabled: true,
|
||||
}, getStr("responsive.deviceListError"))];
|
||||
}
|
||||
|
||||
return dom.select(
|
||||
{
|
||||
id: "device-selector",
|
||||
className: selectClass,
|
||||
value: selectedDevice,
|
||||
title: selectedDevice,
|
||||
onChange: this.onSelectChange,
|
||||
disabled: (state !== Types.loadableState.LOADED),
|
||||
},
|
||||
...listContent
|
||||
dom.span({ className: "title" },
|
||||
selectedDevice || getStr("responsive.responsiveMode")
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,7 +29,6 @@
|
||||
|
||||
:root,
|
||||
input,
|
||||
select,
|
||||
button {
|
||||
font-size: 12px;
|
||||
}
|
||||
@ -89,70 +88,6 @@ body,
|
||||
color: var(--viewport-hover-color);
|
||||
}
|
||||
|
||||
select {
|
||||
-moz-appearance: none;
|
||||
color: var(--viewport-color);
|
||||
border: none;
|
||||
height: 100%;
|
||||
padding: 0 8px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
select.selected {
|
||||
color: var(--viewport-active-color);
|
||||
}
|
||||
|
||||
select:not(:disabled):hover {
|
||||
color: var(--viewport-hover-color);
|
||||
}
|
||||
|
||||
/* This is (believed to be?) separate from the identical select.selected rule
|
||||
set so that it overrides select:hover because of file ordering once the
|
||||
select is focused. It's unclear whether the visual effect that results here
|
||||
is intentional and desired. */
|
||||
select:focus {
|
||||
color: var(--viewport-active-color);
|
||||
}
|
||||
|
||||
select > option {
|
||||
text-align: left;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
select > option,
|
||||
select > option:hover {
|
||||
color: var(--viewport-active-color);
|
||||
}
|
||||
|
||||
select > option.divider {
|
||||
border-top: 1px solid var(--theme-splitter-color);
|
||||
height: 0px;
|
||||
padding: 0;
|
||||
font-size: 0px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Common background for dropdowns like select and toggle menu
|
||||
*/
|
||||
|
||||
.toolbar-dropdown,
|
||||
.toolbar-dropdown.devtools-button,
|
||||
.toolbar-dropdown.devtools-button:hover:not(:empty):not(:disabled):not(.checked) {
|
||||
background-color: var(--theme-toolbar-background);
|
||||
background-image: var(--select-arrow-image);
|
||||
background-position: 100% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 7px;
|
||||
-moz-context-properties: fill;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.toolbar-dropdown {
|
||||
background-position-x: right 5px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Toolbar
|
||||
*/
|
||||
@ -212,6 +147,18 @@ select > option.divider {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
#device-selector {
|
||||
align-self: center;
|
||||
background-position: right 4px center;
|
||||
margin-inline-start: 4px;
|
||||
padding-left: 0;
|
||||
width: 8em;
|
||||
}
|
||||
|
||||
#device-selector .title {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
#device-pixel-ratio-menu {
|
||||
width: 6em;
|
||||
/* `max-width` is here to keep the UI compact if the device pixel ratio changes to a
|
||||
|
||||
Loading…
Reference in New Issue
Block a user