From b5329c06bd1e95fe39fc193c76f5f6df6e95acf6 Mon Sep 17 00:00:00 2001 From: pfeldman Date: Tue, 12 Jan 2016 11:40:36 -0800 Subject: [PATCH] Revert of [DevTools] Device Mode polish. (patchset #1 id:1 of https://codereview.chromium.org/1564363005/ ) Reason for revert: Breaks responsive design mode. Original issue's description: > [DevTools] Device Mode polish. > > - removed blueprints; > - reworked zoom; > - allowed sticky height (empty value); > - resizing on toggling rulers; > - layout adjustments; > - fixed wrong values in options menu. > > BUG=540864 > > Committed: https://crrev.com/22d8f1d01fc461524258b9856f326697f9b84b0c > Cr-Commit-Position: refs/heads/master@{#368686} TBR=dgozman@chromium.org # Skipping CQ checks because original CL landed less than 1 days ago. NOPRESUBMIT=true NOTREECHECKS=true NOTRY=true BUG=540864 Review URL: https://codereview.chromium.org/1581763002 Cr-Commit-Position: refs/heads/master@{#368952} --- front_end/emulation/DeviceModeModel.js | 60 +++++++------ front_end/emulation/DeviceModeView.js | 111 ++++++++++++------------- front_end/emulation/deviceModeView.css | 52 +++++++++++- front_end/ui/Toolbar.js | 8 +- front_end/ui/toolbar.css | 40 ++++----- 5 files changed, 159 insertions(+), 112 deletions(-) diff --git a/front_end/emulation/DeviceModeModel.js b/front_end/emulation/DeviceModeModel.js index e9b66f3e6e..b97379f116 100644 --- a/front_end/emulation/DeviceModeModel.js +++ b/front_end/emulation/DeviceModeModel.js @@ -13,17 +13,17 @@ WebInspector.DeviceModeModel = function(updateCallback) this._screenRect = new WebInspector.Rect(0, 0, 1, 1); this._visiblePageRect = new WebInspector.Rect(0, 0, 1, 1); this._availableSize = new Size(1, 1); - this._preferredSize = new Size(1, 1); this._deviceMetricsThrottler = new WebInspector.Throttler(0); this._appliedDeviceSize = new Size(1, 1); this._currentDeviceScaleFactor = window.devicePixelRatio; this._appliedDeviceScaleFactor = 0; + // Zero means "fit". this._scaleSetting = WebInspector.settings.createSetting("emulation.deviceScale", 1); this._scaleSetting.addChangeListener(this._scaleSettingChanged, this); this._widthSetting = WebInspector.settings.createSetting("emulation.deviceWidth", 400); this._widthSetting.addChangeListener(this._widthSettingChanged, this); - this._heightSetting = WebInspector.settings.createSetting("emulation.deviceHeight", 0); + this._heightSetting = WebInspector.settings.createSetting("emulation.deviceHeight", 700); this._heightSetting.addChangeListener(this._heightSettingChanged, this); this._uaSetting = WebInspector.settings.createSetting("emulation.deviceUA", WebInspector.DeviceModeModel.UA.Mobile); this._uaSetting.addChangeListener(this._uaSettingChanged, this); @@ -43,7 +43,7 @@ WebInspector.DeviceModeModel = function(updateCallback) /** @type {string} */ this._screenOrientation = ""; /** @type {number} */ - this._fitScale = 1; + this._fixedScale = 0; /** @type {?WebInspector.Target} */ this._target = null; @@ -83,13 +83,11 @@ WebInspector.DeviceModeModel._defaultMobileScaleFactor = 2; WebInspector.DeviceModeModel.prototype = { /** - * @param {!Size} availableSize - * @param {!Size} preferredSize + * @param {!Size} size */ - setAvailableSize: function(availableSize, preferredSize) + setAvailableSize: function(size) { - this._availableSize = availableSize; - this._preferredSize = preferredSize; + this._availableSize = size; this._calculateAndEmulate(false); }, @@ -172,12 +170,15 @@ WebInspector.DeviceModeModel.prototype = { return this._scale; }, - /** - * @return {number} - */ - fitScale: function() + suspendScaleChanges: function() + { + ++this._fixedScale; + }, + + resumeScaleChanges: function() { - return this._fitScale; + if (!--this._fixedScale) + this._calculateAndEmulate(false); }, /** @@ -252,9 +253,9 @@ WebInspector.DeviceModeModel.prototype = { reset: function() { this._deviceScaleFactorSetting.set(0); - this._scaleSetting.set(1); + this._scaleSetting.set(0); this._widthSetting.set(400); - this._heightSetting.set(0); + this._heightSetting.set(700); this._uaSetting.set(WebInspector.DeviceModeModel.UA.Mobile); }, @@ -334,7 +335,8 @@ WebInspector.DeviceModeModel.prototype = { var orientation = this._device.orientationByName(this._mode.orientation); var screenWidth = orientation.width; var screenHeight = orientation.height; - this._applyDeviceMetrics(new Size(screenWidth, screenHeight), this._mode.insets, this._scaleSetting.get(), this._device.deviceScaleFactor, this._device.mobile(), resetScrollAndPageScale); + var scale = this._calculateScale(screenWidth, screenHeight); + this._applyDeviceMetrics(new Size(screenWidth, screenHeight), this._mode.insets, scale, this._device.deviceScaleFactor, this._device.mobile(), resetScrollAndPageScale); this._applyUserAgent(this._device.userAgent); this._applyTouch(this._device.touch(), this._device.mobile()); this._applyScreenOrientation(this._mode.orientation == WebInspector.EmulatedDevice.Horizontal ? "landscapePrimary" : "portraitPrimary"); @@ -344,11 +346,12 @@ WebInspector.DeviceModeModel.prototype = { this._applyTouch(false, false); this._applyScreenOrientation(""); } else if (this._type === WebInspector.DeviceModeModel.Type.Responsive) { - var screenWidth = this._widthSetting.get() || this._preferredSize.width / (this._scaleSetting.get() || 1); - var screenHeight = this._heightSetting.get() || this._preferredSize.height / (this._scaleSetting.get() || 1); + var screenWidth = this._widthSetting.get(); + var screenHeight = this._heightSetting.get(); + var scale = this._calculateScale(screenWidth, screenHeight); var mobile = this._uaSetting.get() === WebInspector.DeviceModeModel.UA.Mobile; var defaultDeviceScaleFactor = mobile ? WebInspector.DeviceModeModel._defaultMobileScaleFactor : 0; - this._applyDeviceMetrics(new Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0), this._scaleSetting.get(), this._deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobile, resetScrollAndPageScale); + this._applyDeviceMetrics(new Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0), scale, this._deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobile, resetScrollAndPageScale); this._applyUserAgent(mobile ? WebInspector.DeviceModeModel._defaultMobileUserAgent : ""); this._applyTouch(this._uaSetting.get() !== WebInspector.DeviceModeModel.UA.Desktop, mobile); this._applyScreenOrientation(screenHeight >= screenWidth ? "portraitPrimary" : "landscapePrimary"); @@ -361,10 +364,19 @@ WebInspector.DeviceModeModel.prototype = { * @param {number} screenHeight * @return {number} */ - _calculateFitScale: function(screenWidth, screenHeight) - { - var scale = Math.min(screenWidth ? this._preferredSize.width / screenWidth: 1, screenHeight ? this._preferredSize.height / screenHeight : 1); - return Math.min(scale, 1); + _calculateScale: function(screenWidth, screenHeight) + { + var scale = this._scaleSetting.get(); + if (!scale) { + if (this._fixedScale) { + scale = this._scale; + } else { + scale = 1; + while (this._availableSize.width < screenWidth * scale || this._availableSize.height < screenHeight * scale) + scale *= 0.8; + } + } + return scale; }, /** @@ -387,8 +399,6 @@ WebInspector.DeviceModeModel.prototype = { { screenSize.width = Math.max(1, Math.floor(screenSize.width)); screenSize.height = Math.max(1, Math.floor(screenSize.height)); - this._fitScale = this._calculateFitScale(screenSize.width, screenSize.height); - var pageWidth = screenSize.width - insets.left - insets.right; var pageHeight = screenSize.height - insets.top - insets.bottom; var positionX = insets.left; diff --git a/front_end/emulation/DeviceModeView.js b/front_end/emulation/DeviceModeView.js index ce4b16800a..8ecb6079f7 100644 --- a/front_end/emulation/DeviceModeView.js +++ b/front_end/emulation/DeviceModeView.js @@ -39,6 +39,8 @@ WebInspector.DeviceModeView.prototype = { this._contentClip = this.contentElement.createChild("div", "device-mode-content-clip vbox"); this._mediaInspectorContainer = this._contentClip.createChild("div", "device-mode-media-container"); this._contentArea = this._contentClip.createChild("div", "device-mode-content-area"); + this._deviceBlueprints = this._contentArea.createChild("div", "fill"); + WebInspector.emulatedDevicesList.addEventListener(WebInspector.EmulatedDevicesList.Events.StandardDevicesUpdated, this._updateBlueprints, this); this._screenArea = this._contentArea.createChild("div", "device-mode-screen-area"); this._screenImage = this._screenArea.createChild("img", "device-mode-screen-image hidden"); @@ -56,7 +58,6 @@ WebInspector.DeviceModeView.prototype = { this._heightResizerElement = this._screenArea.createChild("div", "device-mode-resizer device-mode-height-resizer"); this._heightResizerElement.createChild("div", ""); this._createResizer(this._heightResizerElement, false, true); - this._heightResizerElement.addEventListener("dblclick", this._model.heightSetting().set.bind(this._model.heightSetting(), 0), false); this._pageArea = this._screenArea.createChild("div", "device-mode-page-area"); this._pageArea.createChild("content"); @@ -92,6 +93,7 @@ WebInspector.DeviceModeView.prototype = { this._slowPositionStart = null; /** @type {!Size} */ this._resizeStart = this._model.screenRect().size(); + this._model.suspendScaleChanges(); }, /** @@ -134,6 +136,7 @@ WebInspector.DeviceModeView.prototype = { _onResizeEnd: function(event) { delete this._resizeStart; + this._model.resumeScaleChanges(); WebInspector.userMetrics.actionTaken(WebInspector.UserMetrics.Action.ResizedViewInResponsiveMode); }, @@ -158,6 +161,12 @@ WebInspector.DeviceModeView.prototype = { var contentAreaResized = false; var updateRulers = false; + if (this._cachedModelType !== this._model.type() || this._cachedModelScale !== this._model.scale()) { + this._updateBlueprints(); + this._cachedModelType = this._model.type(); + this._cachedModelScale = this._model.scale(); + } + var cssScreenRect = this._model.screenRect().scale(1 / zoomFactor); if (!cssScreenRect.isEqual(this._cachedCssScreenRect)) { this._screenArea.style.left = cssScreenRect.left + "px"; @@ -208,7 +217,6 @@ WebInspector.DeviceModeView.prototype = { this._topRuler.detach(); this._leftRuler.detach(); } - contentAreaResized = true; callDoResize = true; this._cachedShowRulers = showRulers; } @@ -231,6 +239,28 @@ WebInspector.DeviceModeView.prototype = { this._contentAreaResized(); }, + _updateBlueprints: function() + { + this._deviceBlueprints.removeChildren(); + if (this._model.type() !== WebInspector.DeviceModeModel.Type.Responsive) + return; + var devices = WebInspector.emulatedDevicesList.standard(); + devices.sort((device1, device2) => device2.vertical.width * device2.vertical.height - device1.vertical.width * device1.vertical.height); + var scale = this._model.scale(); + for (var device of devices) { + if (!device.show()) + continue; + var blueprintContainer = this._deviceBlueprints.createChild("div", "device-mode-blueprint-container fill"); + var blueprint = blueprintContainer.createChild("div", "device-mode-blueprint"); + blueprint.style.width = device.vertical.width * scale + "px"; + blueprint.style.height = device.vertical.height * scale + "px"; + var clickable = blueprint.createChild("div", "device-mode-blueprint-border"); + clickable.createChild("span").textContent = device.title; + clickable.addEventListener("dblclick", this._resizeTo.bind(this, device.vertical.width, device.vertical.height), false); + blueprint.createChild("div", "device-mode-blueprint-inside"); + } + }, + /** * @param {string} srcset */ @@ -255,11 +285,7 @@ WebInspector.DeviceModeView.prototype = { { var zoomFactor = WebInspector.zoomManager.zoomFactor(); var rect = this._contentArea.getBoundingClientRect(); - var handleWidth = this._widthResizerElement.offsetWidth; - var handleHeight = this._heightResizerElement.offsetHeight; - var availableSize = new Size(Math.max(rect.width * zoomFactor, 1), Math.max(rect.height * zoomFactor, 1)); - var preferredSize = new Size(Math.max((rect.width - 2 * handleWidth) * zoomFactor, 1), Math.max((rect.height - handleHeight) * zoomFactor, 1)); - this._model.setAvailableSize(availableSize, preferredSize); + this._model.setAvailableSize(new Size(Math.max(rect.width * zoomFactor, 1), Math.max(rect.height * zoomFactor, 1))); }, /** @@ -308,8 +334,6 @@ WebInspector.DeviceModeView.Toolbar = function(model, showMediaInspectorSetting, this._lastDevice = null; /** @type {!Array} */ this._appliedSizeItems = []; - /** @type {!Array} */ - this._scaleItems = []; /** @type {?Element} */ this._visibleToolbar = null; @@ -337,6 +361,11 @@ WebInspector.DeviceModeView.Toolbar = function(model, showMediaInspectorSetting, rightContainer.createChild("div", "device-mode-toolbar-spacer"); var rightToolbar = new WebInspector.Toolbar("", rightContainer); rightToolbar.makeWrappable(true); + this._scaleItem = new WebInspector.ToolbarMenuButton(this._appendScaleMenuItems.bind(this)); + this._scaleItem.setTitle(WebInspector.UIString("Click to change zoom")); + this._scaleItem.setGlyph(""); + this._scaleItem.setBold(false); + rightToolbar.appendToolbarItem(this._scaleItem); rightToolbar.appendSeparator(); var moreOptionsButton = new WebInspector.ToolbarMenuButton(this._appendMenuItems.bind(this)); moreOptionsButton.setTitle(WebInspector.UIString("More options")); @@ -392,23 +421,11 @@ WebInspector.DeviceModeView.Toolbar.prototype = { var heightInput = createElementWithClass("input", "device-mode-size-input"); heightInput.maxLength = 5; - heightInput.title = WebInspector.UIString("Height (leave empty to fit)"); - WebInspector.SettingsUI.bindSettingInputField(heightInput, this._model.heightSetting(), true, validateHeight, true, true); + heightInput.title = WebInspector.UIString("Height"); + WebInspector.SettingsUI.bindSettingInputField(heightInput, this._model.heightSetting(), true, WebInspector.DeviceModeModel.deviceSizeValidator, true); toolbar.appendToolbarItem(this._wrapToolbarItem(heightInput)); - this._heightInput = heightInput; - toolbar.appendSeparator(); - this._appendScaleItem(toolbar); return toolbar; - - /** - * @param {string} value - * @return {string} - */ - function validateHeight(value) - { - return !value ? "" : WebInspector.DeviceModeModel.deviceSizeValidator(value); - } }, /** @@ -427,8 +444,6 @@ WebInspector.DeviceModeView.Toolbar.prototype = { toolbar.appendSeparator(); this._appendAppliedSizeItems(toolbar); - toolbar.appendSeparator(); - this._appendScaleItem(toolbar); return toolbar; }, @@ -443,33 +458,19 @@ WebInspector.DeviceModeView.Toolbar.prototype = { toolbar.appendToolbarItem(item); }, - /** - * @param {!WebInspector.Toolbar} toolbar - */ - _appendScaleItem: function(toolbar) - { - var scaleItem = new WebInspector.ToolbarMenuButton(this._appendScaleMenuItems.bind(this)); - scaleItem.setTitle(WebInspector.UIString("Click to change zoom")); - scaleItem.setGlyph(""); - scaleItem.setBold(false); - scaleItem.addDropDownArrow(); - toolbar.appendToolbarItem(scaleItem); - this._scaleItems.push(scaleItem); - }, - /** * @param {!WebInspector.ContextMenu} contextMenu */ _appendScaleMenuItems: function(contextMenu) { var scaleSetting = this._model.scaleSetting(); + appendScaleItem(WebInspector.UIString("Fit"), 0); + contextMenu.appendSeparator(); appendScaleItem(WebInspector.UIString("25%"), 0.25); appendScaleItem(WebInspector.UIString("50%"), 0.5); appendScaleItem(WebInspector.UIString("100%"), 1); appendScaleItem(WebInspector.UIString("150%"), 1.5); appendScaleItem(WebInspector.UIString("200%"), 2); - contextMenu.appendSeparator(); - contextMenu.appendItem(WebInspector.UIString("Fit (%.0f%%)", this._model.fitScale() * 100), scaleSetting.set.bind(scaleSetting, this._model.fitScale()), false); /** * @param {string} title @@ -489,11 +490,6 @@ WebInspector.DeviceModeView.Toolbar.prototype = { var uaDisabled = this._model.type() !== WebInspector.DeviceModeModel.Type.Responsive; var uaSetting = this._model.uaSetting(); var uaSubmenu = contextMenu.appendSubMenuItem(WebInspector.UIString("User agent type"), false); - var uaValue = this._model.uaSetting().get(); - if (this._model.type() === WebInspector.DeviceModeModel.Type.None) - uaValue = WebInspector.DeviceModeModel.UA.Desktop; - if (this._model.type() === WebInspector.DeviceModeModel.Type.Device) - uaValue = this._model.device().mobile() ? WebInspector.DeviceModeModel.UA.Mobile : this._model.device().touch() ? WebInspector.DeviceModeModel.UA.DesktopTouch : WebInspector.DeviceModeModel.UA.Desktop; appendUAItem(WebInspector.UIString("Mobile"), WebInspector.DeviceModeModel.UA.Mobile); appendUAItem(WebInspector.UIString("Desktop"), WebInspector.DeviceModeModel.UA.Desktop); appendUAItem(WebInspector.UIString("Desktop with touch"), WebInspector.DeviceModeModel.UA.DesktopTouch); @@ -504,13 +500,12 @@ WebInspector.DeviceModeView.Toolbar.prototype = { */ function appendUAItem(title, value) { - uaSubmenu.appendCheckboxItem(title, uaSetting.set.bind(uaSetting, value), uaValue === value, uaDisabled); + uaSubmenu.appendCheckboxItem(title, uaSetting.set.bind(uaSetting, value), uaSetting.get() === value, uaDisabled); } var deviceScaleFactorDisabled = this._model.type() !== WebInspector.DeviceModeModel.Type.Responsive; var deviceScaleFactorSubmenu = contextMenu.appendSubMenuItem(WebInspector.UIString("Device pixel ratio"), false); var deviceScaleFactorSetting = this._model.deviceScaleFactorSetting(); - var deviceScaleFactorValue = deviceScaleFactorDisabled ? 0 : deviceScaleFactorSetting.get(); appendDeviceScaleFactorItem(WebInspector.UIString("Default: %f", this._model.defaultDeviceScaleFactor()), 0); deviceScaleFactorSubmenu.appendSeparator(); appendDeviceScaleFactorItem(WebInspector.UIString("1"), 1); @@ -523,7 +518,7 @@ WebInspector.DeviceModeView.Toolbar.prototype = { */ function appendDeviceScaleFactorItem(title, value) { - deviceScaleFactorSubmenu.appendCheckboxItem(title, deviceScaleFactorSetting.set.bind(deviceScaleFactorSetting, value), deviceScaleFactorValue === value, deviceScaleFactorDisabled); + deviceScaleFactorSubmenu.appendCheckboxItem(title, deviceScaleFactorSetting.set.bind(deviceScaleFactorSetting, value), deviceScaleFactorSetting.get() === value, deviceScaleFactorDisabled); } contextMenu.appendItem(WebInspector.UIString("Reset to defaults"), this._model.reset.bind(this._model), this._model.type() !== WebInspector.DeviceModeModel.Type.Responsive); @@ -759,6 +754,7 @@ WebInspector.DeviceModeView.Toolbar.prototype = { this._noneItem.setToggled(this._model.type() === WebInspector.DeviceModeModel.Type.None); this._responsiveItem.setToggled(this._model.type() === WebInspector.DeviceModeModel.Type.Responsive); this._deviceItem.setToggled(this._model.type() === WebInspector.DeviceModeModel.Type.Device); + this._scaleItem.setVisible(this._model.type() !== WebInspector.DeviceModeModel.Type.None); var toolbar = null; if (this._model.type() === WebInspector.DeviceModeModel.Type.None) @@ -783,17 +779,18 @@ WebInspector.DeviceModeView.Toolbar.prototype = { updatePersistence = true; } - var size = this._model.appliedDeviceSize(); - if (!size.isEqual(this._cachedSize)) { - for (var item of this._appliedSizeItems) - item.setText(WebInspector.UIString("%d \u00D7 %d", size.width, size.height)); - this._heightInput.placeholder = size.height; - this._cachedSize = size; + if (this._model.type() !== WebInspector.DeviceModeModel.Type.Responsive) { + var size = this._model.appliedDeviceSize(); + if (!size.isEqual(this._cachedSize)) { + for (var item of this._appliedSizeItems) + item.setText(WebInspector.UIString("%d \u00D7 %d", size.width, size.height)); + this._cachedSize = size; + } } if (this._model.scale() !== this._cachedScale) { - for (var item of this._scaleItems) - item.setText(WebInspector.UIString("%.0f%%", this._model.scale() * 100)); + this._scaleItem.setText(WebInspector.UIString("Zoom: %.0f%%", this._model.scale() * 100)); + this._scaleItem.setDimmed(this._model.scale() === 1); this._cachedScale = this._model.scale(); } diff --git a/front_end/emulation/deviceModeView.css b/front_end/emulation/deviceModeView.css index f067fcaa3c..57bb35c2d8 100644 --- a/front_end/emulation/deviceModeView.css +++ b/front_end/emulation/deviceModeView.css @@ -39,7 +39,7 @@ } .device-mode-toolbar-middle-container { - flex: 1 1 160px; + flex: 1 1 120px; position: relative; } @@ -154,6 +154,56 @@ background-color: #fcfcfc; } +.device-mode-blueprint-container { + display: flex; + justify-content: center; + pointer-events: none; +} + +.device-mode-blueprint { + flex-direction: column; + justify-content: flex-end; + flex: none; + position: relative; + pointer-events: auto; +} + +.device-mode-blueprint-border { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + display: flex; + align-items: flex-end; + justify-content: flex-end; + color: #aaa; + border: 1px solid #dcdcdc; + margin-top: -1px; +} + +.device-mode-blueprint-border:hover { + border-color: #aaa; +} + +.device-mode-blueprint-border > span { + transition: opacity 150ms; + opacity: 0; + padding: 3px; +} + +.device-mode-blueprint-border:hover > span { + opacity: 1; +} + +.device-mode-blueprint-inside { + position: absolute; + left: 20px; + right: 20px; + top: 20px; + bottom: 20px; +} + .device-mode-ruler { pointer-events: none; position: relative; diff --git a/front_end/ui/Toolbar.js b/front_end/ui/Toolbar.js index 02804461d5..d7105d0f6a 100644 --- a/front_end/ui/Toolbar.js +++ b/front_end/ui/Toolbar.js @@ -334,12 +334,6 @@ WebInspector.ToolbarLabel.prototype = { this.element.classList.toggle("toolbar-dimmed", dimmed); }, - addDropDownArrow: function() - { - this.element.classList.add("toolbar-has-dropdown"); - this.element.createChild("div", "toolbar-dropdown-arrow"); - }, - __proto__: WebInspector.ToolbarItem.prototype } @@ -726,7 +720,7 @@ WebInspector.ToolbarComboBox = function(changeHandler, className) WebInspector.ToolbarItem.call(this, createElementWithClass("span", "toolbar-select-container")); this._selectElement = this.element.createChild("select", "toolbar-item"); - this.element.createChild("div", "toolbar-dropdown-arrow"); + this.element.createChild("div", "toolbar-select-arrow"); if (changeHandler) this._selectElement.addEventListener("change", changeHandler, false); if (className) diff --git a/front_end/ui/toolbar.css b/front_end/ui/toolbar.css index 3d7b2e0770..dc3babb651 100644 --- a/front_end/ui/toolbar.css +++ b/front_end/ui/toolbar.css @@ -47,24 +47,6 @@ color: #5a5a5a; } -.toolbar-dropdown-arrow { - -webkit-mask-image: url(Images/toolbarButtonGlyphs.png); - -webkit-mask-size: 352px 168px; - -webkit-mask-position: -18px -96px; - background-color: #444; - width: 12px; - height: 12px; - display: inline-block; - pointer-events: none; - margin: auto 0; -} - -@media (-webkit-min-device-pixel-ratio: 1.5) { - .toolbar-dropdown-arrow { - -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png); - } -} /* media */ - /* Text-glyph item */ .toolbar-text-glyph { @@ -80,10 +62,6 @@ color: #5a5a5a; } -.toolbar-has-dropdown .toolbar-text { - margin-right: 1px; -} - .toolbar-has-glyph .toolbar-text { margin-left: 0; } @@ -178,6 +156,24 @@ margin-right: 6px; } +.toolbar-select-arrow { + -webkit-mask-image: url(Images/toolbarButtonGlyphs.png); + -webkit-mask-size: 352px 168px; + -webkit-mask-position: -18px -96px; + background-color: #444; + width: 12px; + height: 12px; + display: inline-block; + pointer-events: none; + margin: auto 0; +} + +@media (-webkit-min-device-pixel-ratio: 1.5) { +.toolbar-select-arrow { + -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png); +} +} /* media */ + select.toolbar-item { min-width: 48px; -webkit-appearance: none;