Trevor Parscal has uploaded a new change for review. https://gerrit.wikimedia.org/r/188951
Change subject: [BREAKING CHANGE] Remove window isolation ...................................................................... [BREAKING CHANGE] Remove window isolation Remove window isolation support from OO.ui.Window and OO.ui.WindowManager. Non-breaking changes: * Removed dead properties in OO.ui.Window and OO.ui.WindowManager * Now that there's no loading step, all initialization is done in the initialize method, rather than being broken into multiple places Breaking changes: * OO.ui.WindowManager's isolate option is no longer supported * OO.ui.Window's load, isLoading and isLoaded methods are gone, windows no longer need time to load * .oo-ui-window-load is now oo-ui-window-active Interesting changes: * You no longer need to use this.$ * Windows are now initialized by the window manager when added - when using a factory this has no change in timing, but if adding windows manually it may cause initialization to occur earlier than before * No more visibility trickery during window initialization, if toggle() gets moved from Widget to Element, the Window toggle method can be removed Bonus fixes: * OO.ui.Window's $body is always adjusted to move out of the way of the foot, not only when the actions orientation is changing - this fixes issues where the buttons aren't clickable because the body is z-indexed above and has bottom: 0 because the orientation wasn't technically changed when the items were added * Moved the opactiy transition to ready so that windows fade in and out together with the scaling effect instead of before and after it The amazing transplantStyles method has found a new home: https://gist.github.com/trevorparscal/c0bf02b02c96d98cfc56 Change-Id: I2bfa0138a34f60138da5a948be71053cce465c43 --- M demos/pages/dialogs.js M src/Window.js M src/WindowManager.js M src/dialogs/MessageDialog.js M src/styles/Window.less M src/styles/WindowManager.less M src/themes/apex/windows.less M src/themes/mediawiki/windows.less 8 files changed, 57 insertions(+), 417 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/51/188951/1 diff --git a/demos/pages/dialogs.js b/demos/pages/dialogs.js index 6483476..52b515b 100644 --- a/demos/pages/dialogs.js +++ b/demos/pages/dialogs.js @@ -2,11 +2,8 @@ var i, l, name, openButton, DialogClass, config, $demo = demo.$element, fieldset = new OO.ui.FieldsetLayout( { label: 'Dialogs' } ), - isolateSwitch = new OO.ui.ToggleSwitchWidget(), windows = {}, - isolatedWindows = {}, - windowManager = new OO.ui.WindowManager(), - isolatedWindowManager = new OO.ui.WindowManager( { isolate: true } ); + windowManager = new OO.ui.WindowManager(); function SimpleDialog( config ) { SimpleDialog.super.call( this, config ); @@ -519,19 +516,13 @@ ]; function openDialog( name, data ) { - if ( isolateSwitch.getValue() ) { - isolatedWindowManager.openWindow( name, data ); - } else { - windowManager.openWindow( name, data ); - } + windowManager.openWindow( name, data ); } - fieldset.addItems( [ new OO.ui.FieldLayout( isolateSwitch, { label: 'Isolate dialogs', align: 'top' } ) ] ); for ( i = 0, l = config.length; i < l; i++ ) { name = 'window_' + i; DialogClass = config[ i ].dialogClass || SimpleDialog; windows[ name ] = new DialogClass( config[ i ].config ); - isolatedWindows[ name ] = new DialogClass( config[ i ].config ); openButton = new OO.ui.ButtonWidget( { framed: false, icon: 'window', @@ -543,9 +534,8 @@ fieldset.addItems( [ new OO.ui.FieldLayout( openButton, { align: 'inline' } ) ] ); } windowManager.addWindows( windows ); - isolatedWindowManager.addWindows( isolatedWindows ); $demo.append( $( '<div class="oo-ui-demo-container"></div>' ).append( fieldset.$element ), - windowManager.$element, isolatedWindowManager.$element + windowManager.$element ); }; diff --git a/src/Window.js b/src/Window.js index 4f1451b..808dd48 100644 --- a/src/Window.js +++ b/src/Window.js @@ -50,25 +50,23 @@ // Properties this.manager = null; - this.initialized = false; - this.visible = true; - this.opening = null; - this.closing = null; - this.opened = null; - this.timing = null; - this.loading = null; + this.visible = false; this.size = config.size || this.constructor.static.size; this.$frame = this.$( '<div>' ); this.$overlay = this.$( '<div>' ); + this.$content = this.$( '<div>' ); // Initialization - this.$element - .addClass( 'oo-ui-window' ) - .append( this.$frame, this.$overlay ); - this.$frame.addClass( 'oo-ui-window-frame' ); this.$overlay.addClass( 'oo-ui-window-overlay' ); - - // NOTE: Additional initialization will occur when #setManager is called + this.$content + .addClass( 'oo-ui-window-content' ) + .attr( 'tabIndex', 0 ); + this.$frame + .addClass( 'oo-ui-window-frame' ) + .append( this.$content ); + this.$element + .addClass( 'oo-ui-window oo-ui-element-hidden' ) + .append( this.$frame, this.$overlay ); }; /* Setup */ @@ -89,118 +87,6 @@ */ OO.ui.Window.static.size = 'medium'; -/* Static Methods */ - -/** - * Transplant the CSS styles from as parent document to a frame's document. - * - * This loops over the style sheets in the parent document, and copies their nodes to the - * frame's document. It then polls the document to see when all styles have loaded, and once they - * have, resolves the promise. - * - * If the styles still haven't loaded after a long time (5 seconds by default), we give up waiting - * and resolve the promise anyway. This protects against cases like a display: none; iframe in - * Firefox, where the styles won't load until the iframe becomes visible. - * - * For details of how we arrived at the strategy used in this function, see #load. - * - * @static - * @inheritable - * @param {HTMLDocument} parentDoc Document to transplant styles from - * @param {HTMLDocument} frameDoc Document to transplant styles to - * @param {number} [timeout=5000] How long to wait before giving up (in ms). If 0, never give up. - * @return {jQuery.Promise} Promise resolved when styles have loaded - */ -OO.ui.Window.static.transplantStyles = function ( parentDoc, frameDoc, timeout ) { - var i, numSheets, styleNode, styleText, newNode, timeoutID, pollNodeId, $pendingPollNodes, - $pollNodes = $( [] ), - // Fake font-family value - fontFamily = 'oo-ui-frame-transplantStyles-loaded', - nextIndex = parentDoc.oouiFrameTransplantStylesNextIndex || 0, - deferred = $.Deferred(); - - for ( i = 0, numSheets = parentDoc.styleSheets.length; i < numSheets; i++ ) { - styleNode = parentDoc.styleSheets[ i ].ownerNode; - if ( styleNode.disabled ) { - continue; - } - - if ( styleNode.nodeName.toLowerCase() === 'link' ) { - // External stylesheet; use @import - styleText = '@import url(' + styleNode.href + ');'; - } else { - // Internal stylesheet; just copy the text - // For IE10 we need to fall back to .cssText, BUT that's undefined in - // other browsers, so fall back to '' rather than 'undefined' - styleText = styleNode.textContent || parentDoc.styleSheets[ i ].cssText || ''; - } - - // Create a node with a unique ID that we're going to monitor to see when the CSS - // has loaded - if ( styleNode.oouiFrameTransplantStylesId ) { - // If we're nesting transplantStyles operations and this node already has - // a CSS rule to wait for loading, reuse it - pollNodeId = styleNode.oouiFrameTransplantStylesId; - } else { - // Otherwise, create a new ID - pollNodeId = 'oo-ui-frame-transplantStyles-loaded-' + nextIndex; - nextIndex++; - - // Add #pollNodeId { font-family: ... } to the end of the stylesheet / after the @import - // The font-family rule will only take effect once the @import finishes - styleText += '\n' + '#' + pollNodeId + ' { font-family: ' + fontFamily + '; }'; - } - - // Create a node with id=pollNodeId - $pollNodes = $pollNodes.add( $( '<div>', frameDoc ) - .attr( 'id', pollNodeId ) - .appendTo( frameDoc.body ) - ); - - // Add our modified CSS as a <style> tag - newNode = frameDoc.createElement( 'style' ); - newNode.textContent = styleText; - newNode.oouiFrameTransplantStylesId = pollNodeId; - frameDoc.head.appendChild( newNode ); - } - frameDoc.oouiFrameTransplantStylesNextIndex = nextIndex; - - // Poll every 100ms until all external stylesheets have loaded - $pendingPollNodes = $pollNodes; - timeoutID = setTimeout( function pollExternalStylesheets() { - while ( - $pendingPollNodes.length > 0 && - $pendingPollNodes.eq( 0 ).css( 'font-family' ) === fontFamily - ) { - $pendingPollNodes = $pendingPollNodes.slice( 1 ); - } - - if ( $pendingPollNodes.length === 0 ) { - // We're done! - if ( timeoutID !== null ) { - timeoutID = null; - $pollNodes.remove(); - deferred.resolve(); - } - } else { - timeoutID = setTimeout( pollExternalStylesheets, 100 ); - } - }, 100 ); - // ...but give up after a while - if ( timeout !== 0 ) { - setTimeout( function () { - if ( timeoutID ) { - clearTimeout( timeoutID ); - timeoutID = null; - $pollNodes.remove(); - deferred.reject(); - } - }, timeout || 5000 ); - } - - return deferred.promise(); -}; - /* Methods */ /** @@ -218,10 +104,12 @@ /** * Check if window has been initialized. * + * Initialization occurs when a window is added to a manager. + * * @return {boolean} Window has been initialized */ OO.ui.Window.prototype.isInitialized = function () { - return this.initialized; + return !!this.manager; }; /** @@ -231,24 +119,6 @@ */ OO.ui.Window.prototype.isVisible = function () { return this.visible; -}; - -/** - * Check if window is loading. - * - * @return {boolean} Window is loading - */ -OO.ui.Window.prototype.isLoading = function () { - return this.loading && this.loading.state() === 'pending'; -}; - -/** - * Check if window is loaded. - * - * @return {boolean} Window is loaded - */ -OO.ui.Window.prototype.isLoaded = function () { - return this.loading && this.loading.state() === 'resolved'; }; /** @@ -449,9 +319,6 @@ /** * Toggle visibility of window. * - * If the window is isolated and hasn't fully loaded yet, the visibility property will be used - * instead of display. - * * @param {boolean} [show] Make window visible, omit to toggle visibility * @fires toggle * @chainable @@ -461,17 +328,7 @@ if ( show !== this.isVisible() ) { this.visible = show; - - if ( this.isolated && !this.isLoaded() ) { - // Hide the window using visibility instead of display until loading is complete - // Can't use display: none; because that prevents the iframe from loading in Firefox - this.$element - .css( 'visibility', show ? 'visible' : 'hidden' ); - } else { - this.$element - .toggleClass( 'oo-ui-element-hidden', !this.visible ) - .css( 'visibility', '' ); - } + this.$element.toggleClass( 'oo-ui-element-hidden', !this.visible ); this.emit( 'toggle', show ); } @@ -481,7 +338,7 @@ /** * Set the window manager. * - * This must be called before initialize. Calling it more than once will cause an error. + * This will cause the window to initialize. Calling it more than once will cause an error. * * @param {OO.ui.WindowManager} manager Manager for this window * @throws {Error} If called more than once @@ -492,29 +349,8 @@ throw new Error( 'Cannot set window manager, window already has a manager' ); } - // Properties this.manager = manager; - this.isolated = manager.shouldIsolate(); - - // Initialization - if ( this.isolated ) { - this.$iframe = this.$( '<iframe>' ); - this.$iframe.attr( { frameborder: 0, scrolling: 'no' } ); - this.$frame.append( this.$iframe ); - this.$ = function () { - throw new Error( 'this.$() cannot be used until the frame has been initialized.' ); - }; - // WARNING: Do not use this.$ again until #initialize is called - } else { - this.$content = this.$( '<div>' ); - this.$document = $( this.getElementDocument() ); - this.$content.addClass( 'oo-ui-window-content' ).attr( 'tabIndex', 0 ); - this.$frame.append( this.$content ); - } - this.toggle( false ); - - // Figure out directionality: - this.dir = OO.ui.Element.static.getDir( this.$iframe || this.$content ) || 'ltr'; + this.initialize(); return this; }; @@ -537,7 +373,10 @@ * @chainable */ OO.ui.Window.prototype.updateSize = function () { - this.manager.updateWindowSize( this ); + if ( this.manager ) { + this.manager.updateWindowSize( this ); + } + return this; }; @@ -605,6 +444,8 @@ this.$body = this.$( '<div>' ); this.$foot = this.$( '<div>' ); this.$innerOverlay = this.$( '<div>' ); + this.dir = OO.ui.Element.static.getDir( this.$content ) || 'ltr'; + this.$document = $( this.getElementDocument() ); // Events this.$element.on( 'mousedown', this.onMouseDown.bind( this ) ); @@ -630,6 +471,10 @@ * first argument will be a promise which will be resolved when the window begins closing */ OO.ui.Window.prototype.open = function ( data ) { + if ( !this.manager ) { + throw new Error( 'Cannot open window, must be attached to a manager' ); + } + return this.manager.openWindow( this, data ); }; @@ -643,6 +488,10 @@ * @return {jQuery.Promise} Promise resolved when window is closed */ OO.ui.Window.prototype.close = function ( data ) { + if ( !this.manager ) { + throw new Error( 'Cannot close window, must be attached to a manager' ); + } + return this.manager.closeWindow( this, data ); }; @@ -660,9 +509,10 @@ deferred = $.Deferred(); this.toggle( true ); + this.getSetupProcess( data ).execute().done( function () { // Force redraw by asking the browser to measure the elements' widths - win.$element.addClass( 'oo-ui-window-setup' ).width(); + win.$element.addClass( 'oo-ui-window-active oo-ui-window-setup' ).width(); win.$content.addClass( 'oo-ui-window-content-setup' ).width(); deferred.resolve(); } ); @@ -735,115 +585,14 @@ * @return {jQuery.Promise} Promise resolved when window is torn down */ OO.ui.Window.prototype.teardown = function ( data ) { - var win = this, - deferred = $.Deferred(); + var win = this; - this.getTeardownProcess( data ).execute().done( function () { - // Force redraw by asking the browser to measure the elements' widths - win.$element.removeClass( 'oo-ui-window-load oo-ui-window-setup' ).width(); - win.$content.removeClass( 'oo-ui-window-content-setup' ).width(); - win.$element.addClass( 'oo-ui-element-hidden' ); - win.visible = false; - deferred.resolve(); - } ); - - return deferred.promise(); -}; - -/** - * Load the frame contents. - * - * Once the iframe's stylesheets are loaded the returned promise will be resolved. Calling while - * loading will return a promise but not trigger a new loading cycle. Calling after loading is - * complete will return a promise that's already been resolved. - * - * Sounds simple right? Read on... - * - * When you create a dynamic iframe using open/write/close, the window.load event for the - * iframe is triggered when you call close, and there's no further load event to indicate that - * everything is actually loaded. - * - * In Chrome, stylesheets don't show up in document.styleSheets until they have loaded, so we could - * just poll that array and wait for it to have the right length. However, in Firefox, stylesheets - * are added to document.styleSheets immediately, and the only way you can determine whether they've - * loaded is to attempt to access .cssRules and wait for that to stop throwing an exception. But - * cross-domain stylesheets never allow .cssRules to be accessed even after they have loaded. - * - * The workaround is to change all `<link href="...">` tags to `<style>@import url(...)</style>` - * tags. Because `@import` is blocking, Chrome won't add the stylesheet to document.styleSheets - * until the `@import` has finished, and Firefox won't allow .cssRules to be accessed until the - * `@import` has finished. And because the contents of the `<style>` tag are from the same origin, - * accessing .cssRules is allowed. - * - * However, now that we control the styles we're injecting, we might as well do away with - * browser-specific polling hacks like document.styleSheets and .cssRules, and instead inject - * `<style>@import url(...); #foo { font-family: someValue; }</style>`, then create `<div id="foo">` - * and wait for its font-family to change to someValue. Because `@import` is blocking, the - * font-family rule is not applied until after the `@import` finishes. - * - * All this stylesheet injection and polling magic is in #transplantStyles. - * - * @return {jQuery.Promise} Promise resolved when loading is complete - */ -OO.ui.Window.prototype.load = function () { - var sub, doc, loading, - win = this; - - this.$element.addClass( 'oo-ui-window-load' ); - - // Non-isolated windows are already "loaded" - if ( !this.loading && !this.isolated ) { - this.loading = $.Deferred().resolve(); - this.initialize(); - // Set initialized state after so sub-classes aren't confused by it being set by calling - // their parent initialize method - this.initialized = true; - } - - // Return existing promise if already loading or loaded - if ( this.loading ) { - return this.loading.promise(); - } - - // Load the frame - loading = this.loading = $.Deferred(); - sub = this.$iframe.prop( 'contentWindow' ); - doc = sub.document; - - // Initialize contents - doc.open(); - doc.write( - '<!doctype html>' + - '<html>' + - '<body class="oo-ui-window-isolated oo-ui-' + this.dir + '"' + - ' style="direction:' + this.dir + ';" dir="' + this.dir + '">' + - '<div class="oo-ui-window-content"></div>' + - '</body>' + - '</html>' - ); - doc.close(); - - // Properties - this.$ = OO.ui.Element.static.getJQuery( doc, this.$iframe ); - this.$content = this.$( '.oo-ui-window-content' ).attr( 'tabIndex', 0 ); - this.$document = this.$( doc ); - - // Initialization - this.constructor.static.transplantStyles( this.getElementDocument(), this.$document[ 0 ] ) - .always( function () { - // Initialize isolated windows - win.initialize(); - // Set initialized state after so sub-classes aren't confused by it being set by calling - // their parent initialize method - win.initialized = true; - // Undo the visibility: hidden; hack and apply display: none; - // We can do this safely now that the iframe has initialized - // (don't do this from within #initialize because it has to happen - // after the all subclasses have been handled as well). - win.toggle( win.isVisible() ); - - loading.resolve(); + return this.getTeardownProcess( data ).execute() + .done( function () { + // Force redraw by asking the browser to measure the elements' widths + win.$element.removeClass( 'oo-ui-window-active oo-ui-window-setup' ).width(); + win.$content.removeClass( 'oo-ui-window-content-setup' ).width(); + win.$element.addClass( 'oo-ui-element-hidden' ); + win.visible = false; } ); - - return loading.promise(); }; diff --git a/src/WindowManager.js b/src/WindowManager.js index 7efff2d..bbada60 100644 --- a/src/WindowManager.js +++ b/src/WindowManager.js @@ -38,7 +38,6 @@ * * @constructor * @param {Object} [config] Configuration options - * @cfg {boolean} [isolate] Configure managed windows to isolate their content using inline frames * @cfg {OO.Factory} [factory] Window factory to use for automatic instantiation * @cfg {boolean} [modal=true] Prevent interaction outside the dialog */ @@ -55,22 +54,17 @@ // Properties this.factory = config.factory; this.modal = config.modal === undefined || !!config.modal; - this.isolate = !!config.isolate; this.windows = {}; this.opening = null; this.opened = null; this.closing = null; this.preparingToOpen = null; this.preparingToClose = null; - this.size = null; this.currentWindow = null; this.$ariaHidden = null; - this.requestedSize = null; this.onWindowResizeTimeout = null; this.onWindowResizeHandler = this.onWindowResize.bind( this ); this.afterWindowResizeHandler = this.afterWindowResize.bind( this ); - this.onWindowMouseWheelHandler = this.onWindowMouseWheel.bind( this ); - this.onDocumentKeyDownHandler = this.onDocumentKeyDown.bind( this ); // Initialization this.$element @@ -183,36 +177,6 @@ }; /** - * Handle window mouse wheel events. - * - * @param {jQuery.Event} e Mouse wheel event - */ -OO.ui.WindowManager.prototype.onWindowMouseWheel = function () { - // Kill all events in the parent window if the child window is isolated - return !this.shouldIsolate(); -}; - -/** - * Handle document key down events. - * - * @param {jQuery.Event} e Key down event - */ -OO.ui.WindowManager.prototype.onDocumentKeyDown = function ( e ) { - switch ( e.which ) { - case OO.ui.Keys.PAGEUP: - case OO.ui.Keys.PAGEDOWN: - case OO.ui.Keys.END: - case OO.ui.Keys.HOME: - case OO.ui.Keys.LEFT: - case OO.ui.Keys.UP: - case OO.ui.Keys.RIGHT: - case OO.ui.Keys.DOWN: - // Kill all events in the parent window if the child window is isolated - return !this.shouldIsolate(); - } -}; - -/** * Check if window is opening. * * @return {boolean} Window is opening @@ -237,17 +201,6 @@ */ OO.ui.WindowManager.prototype.isOpened = function ( win ) { return win === this.currentWindow && !!this.opened && this.opened.state() === 'pending'; -}; - -/** - * Check if window contents should be isolated. - * - * Window content isolation is done using inline frames. - * - * @return {boolean} Window contents should be isolated - */ -OO.ui.WindowManager.prototype.shouldIsolate = function () { - return this.isolate; }; /** @@ -369,7 +322,6 @@ */ OO.ui.WindowManager.prototype.openWindow = function ( win, data ) { var manager = this, - preparing = [], opening = $.Deferred(); // Argument handling @@ -392,17 +344,8 @@ // Window opening if ( opening.state() !== 'rejected' ) { - if ( !win.getManager() ) { - win.setManager( this ); - } - preparing.push( win.load() ); - - if ( this.closing ) { - // If a window is currently closing, wait for it to complete - preparing.push( this.closing ); - } - - this.preparingToOpen = $.when.apply( $, preparing ); + // If a window is currently closing, wait for it to complete + this.preparingToOpen = $.when( this.closing ); // Ensure handlers get called after preparingToOpen is set this.preparingToOpen.done( function () { if ( manager.modal ) { @@ -445,7 +388,6 @@ */ OO.ui.WindowManager.prototype.closeWindow = function ( win, data ) { var manager = this, - preparing = [], closing = $.Deferred(), opened; @@ -473,12 +415,8 @@ // Window closing if ( closing.state() !== 'rejected' ) { - if ( this.opening ) { - // If the window is currently opening, close it when it's done - preparing.push( this.opening ); - } - - this.preparingToClose = $.when.apply( $, preparing ); + // If the window is currently opening, close it when it's done + this.preparingToClose = $.when( this.opening ); // Ensure handlers get called after preparingToClose is set this.preparingToClose.done( function () { manager.closing = closing; @@ -539,6 +477,7 @@ win = list[ name ]; this.windows[ name ] = win.toggle( false ); this.$element.append( win.$element ); + win.setManager( this ); } }; @@ -628,37 +567,19 @@ if ( on ) { if ( !this.globalEvents ) { - this.$( this.getElementDocument() ).on( { - // Prevent scrolling by keys in top-level window - keydown: this.onDocumentKeyDownHandler - } ); this.$( this.getElementWindow() ).on( { - // Prevent scrolling by wheel in top-level window - mousewheel: this.onWindowMouseWheelHandler, // Start listening for top-level window dimension changes 'orientationchange resize': this.onWindowResizeHandler } ); - // Disable window scrolling in isolated windows - if ( !this.shouldIsolate() ) { - $( this.getElementDocument().body ).css( 'overflow', 'hidden' ); - } + $( this.getElementDocument().body ).css( 'overflow', 'hidden' ); this.globalEvents = true; } } else if ( this.globalEvents ) { - // Unbind global events - this.$( this.getElementDocument() ).off( { - // Allow scrolling by keys in top-level window - keydown: this.onDocumentKeyDownHandler - } ); this.$( this.getElementWindow() ).off( { - // Allow scrolling by wheel in top-level window - mousewheel: this.onWindowMouseWheelHandler, // Stop listening for top-level window dimension changes 'orientationchange resize': this.onWindowResizeHandler } ); - if ( !this.shouldIsolate() ) { - $( this.getElementDocument().body ).css( 'overflow', '' ); - } + $( this.getElementDocument().body ).css( 'overflow', '' ); this.globalEvents = false; } diff --git a/src/dialogs/MessageDialog.js b/src/dialogs/MessageDialog.js index 3d95e5d..86debd7 100644 --- a/src/dialogs/MessageDialog.js +++ b/src/dialogs/MessageDialog.js @@ -279,8 +279,10 @@ } } + // Move the body out of the way of the foot + this.$body.css( 'bottom', this.$foot.outerHeight( true ) ); + if ( this.verticalActionLayout !== previous ) { - this.$body.css( 'bottom', this.$foot.outerHeight( true ) ); // We changed the layout, window height might need to be updated. this.updateSize(); } diff --git a/src/styles/Window.less b/src/styles/Window.less index eed8a20..cece166 100644 --- a/src/styles/Window.less +++ b/src/styles/Window.less @@ -5,13 +5,6 @@ &-frame { .oo-ui-box-sizing(border-box); - - > iframe { - width: 100%; - height: 100%; - margin: 0; - padding: 0; - } } // Content div takes focus when opened, so hide outline diff --git a/src/styles/WindowManager.less b/src/styles/WindowManager.less index b8c9a9e..bd1e2ab 100644 --- a/src/styles/WindowManager.less +++ b/src/styles/WindowManager.less @@ -7,7 +7,7 @@ height: 0; overflow: hidden; - &.oo-ui-window-load { + &.oo-ui-window-active { width: auto; height: auto; top: 0; @@ -25,17 +25,6 @@ overflow: hidden; max-width: 100%; max-height: 100%; - - visibility: visible; - - > iframe { - width: 100%; - height: 100%; - } - } - - > .oo-ui-window-frame { - visibility: hidden; } } diff --git a/src/themes/apex/windows.less b/src/themes/apex/windows.less index 2b59842..adc3395 100644 --- a/src/themes/apex/windows.less +++ b/src/themes/apex/windows.less @@ -292,12 +292,10 @@ .oo-ui-transition(all 250ms ease-in-out); } - &.oo-ui-window-load { + &.oo-ui-window-ready { /* Fade window overlay */ opacity: 1; - } - &.oo-ui-window-ready { > .oo-ui-window-frame { /* Fade frame */ opacity: 1; diff --git a/src/themes/mediawiki/windows.less b/src/themes/mediawiki/windows.less index 9c51083..d080147 100644 --- a/src/themes/mediawiki/windows.less +++ b/src/themes/mediawiki/windows.less @@ -285,12 +285,10 @@ .oo-ui-transition(all 250ms ease-in-out); } - &.oo-ui-window-load { + &.oo-ui-window-ready { /* Fade window overlay */ opacity: 1; - } - &.oo-ui-window-ready { > .oo-ui-window-frame { /* Fade frame */ opacity: 1; -- To view, visit https://gerrit.wikimedia.org/r/188951 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I2bfa0138a34f60138da5a948be71053cce465c43 Gerrit-PatchSet: 1 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: Trevor Parscal <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
