158537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)// Copyright 2013 The Chromium Authors. All rights reserved. 258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)// Use of this source code is governed by a BSD-style license that can be 358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)// found in the LICENSE file. 458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)/** 658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) * @fileoverview First run UI. 758537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) */ 858537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)<include src="step.js"> 1058537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 115d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles)// Transitions durations. 125d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles)/** @const */ var DEFAULT_TRANSITION_DURATION_MS = 400; 135d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles)/** @const */ var BG_TRANSITION_DURATION_MS = 800; 145d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) 155d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles)/** 165d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) * Changes visibility of element with animated transition. 175d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) * @param {Element} element Element which visibility should be changed. 185d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) * @param {boolean} visible Whether element should be visible after transition. 195d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) * @param {number=} opt_transitionDuration Time length of transition in 205d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) * milliseconds. Default value is DEFAULT_TRANSITION_DURATION_MS. 215d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) * @param {function()=} opt_onFinished Called after transition has finished. 225d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) */ 235d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles)function changeVisibility( 245d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) element, visible, opt_transitionDuration, opt_onFinished) { 255d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) var classes = element.classList; 265d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) // If target visibility is the same as current element visibility. 275d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) if (classes.contains('transparent') === !visible) { 285d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) if (opt_onFinished) 295d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) opt_onFinished(); 305d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) return; 315d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) } 325d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) var transitionDuration = (opt_transitionDuration === undefined) ? 335d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) cr.FirstRun.getDefaultTransitionDuration() : opt_transitionDuration; 345d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) var style = element.style; 355d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) var oldDurationValue = style.getPropertyValue('transition-duration'); 365d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) style.setProperty('transition-duration', transitionDuration + 'ms'); 375d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) var transition = visible ? 'show-animated' : 'hide-animated'; 385d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) classes.add(transition); 395d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) classes.toggle('transparent'); 405d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) element.addEventListener('webkitTransitionEnd', function f() { 415d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) element.removeEventListener('webkitTransitionEnd', f); 425d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) classes.remove(transition); 435d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) if (oldDurationValue) 445d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) style.setProperty('transition-duration', oldDurationValue); 455d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) else 465d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) style.removeProperty('transition-duration'); 475d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) if (opt_onFinished) 485d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) opt_onFinished(); 495d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) }); 505d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) ensureTransitionEndEvent(element, transitionDuration); 515d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles)} 525d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) 5358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)cr.define('cr.FirstRun', function() { 5458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) return { 555d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) // Whether animated transitions are enabled. 565d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) transitionsEnabled_: false, 575d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) 5858537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) // SVG element representing UI background. 5958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) background_: null, 6058537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 61f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) // Container for background. 62f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) backgroundContainer_: null, 63f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) 6458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) // Mask element describing transparent "holes" in background. 6558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) mask_: null, 6658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 67f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) // Pattern used for creating rectangular holes. 68f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) rectangularHolePattern_: null, 69f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) 70f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) // Pattern used for creating round holes. 71f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) roundHolePattern_: null, 7258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 7358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) // Dictionary keeping all available tutorial steps by their names. 7458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) steps_: {}, 7558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 7658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) // Element representing step currently shown for user. 7758537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) currentStep_: null, 7858537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 7958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) /** 8058537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) * Initializes internal structures and preparing steps. 8158537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) */ 8258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) initialize: function() { 8358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) disableTextSelectAndDrag(); 845d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) this.transitionsEnabled_ = loadTimeData.getBoolean('transitionsEnabled'); 8558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) this.background_ = $('background'); 86f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) this.backgroundContainer_ = $('background-container'); 8758537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) this.mask_ = $('mask'); 88f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) this.rectangularHolePattern_ = $('rectangular-hole-pattern'); 89f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) this.rectangularHolePattern_.removeAttribute('id'); 90f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) this.roundHolePattern_ = $('round-hole-pattern'); 91f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) this.roundHolePattern_.removeAttribute('id'); 9258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) var stepElements = document.getElementsByClassName('step'); 9358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) for (var i = 0; i < stepElements.length; ++i) { 9458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) var step = stepElements[i]; 95f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) cr.FirstRun.DecorateStep(step); 9658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) this.steps_[step.getName()] = step; 9758537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) } 985d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) this.setBackgroundVisible(true, function() { 995d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) chrome.send('initialized'); 1005d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) }); 1015d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) }, 1025d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) 1035d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) /** 1045d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) * Hides all elements and background. 1055d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) */ 1065d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) finalize: function() { 1075d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) // At first we hide holes (job 1) and current step (job 2) simultaneously, 1085d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) // then background. 1095d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) var jobsLeft = 2; 1105d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) var onJobDone = function() { 1115d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) --jobsLeft; 1125d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) if (jobsLeft) 1135d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) return; 1145d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) this.setBackgroundVisible(false, function() { 1155d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) chrome.send('finalized'); 1165d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) }); 1175d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) }.bind(this); 1185d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) this.doHideCurrentStep_(function(name) { 1195d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) if (name) 1205d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) chrome.send('stepHidden', [name]); 1215d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) onJobDone(); 1225d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) }); 1235d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) this.removeHoles(onJobDone); 12458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) }, 12558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 12658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) /** 127f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) * Adds transparent rectangular hole to background. 12858537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) * @param {number} x X coordinate of top-left corner of hole. 12958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) * @param {number} y Y coordinate of top-left corner of hole. 13058537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) * @param {number} widht Width of hole. 13158537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) * @param {number} height Height of hole. 13258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) */ 133f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) addRectangularHole: function(x, y, width, height) { 134f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) var hole = this.rectangularHolePattern_.cloneNode(); 13558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) hole.setAttribute('x', x); 13658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) hole.setAttribute('y', y); 13758537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) hole.setAttribute('width', width); 13858537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) hole.setAttribute('height', height); 13958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) this.mask_.appendChild(hole); 1405d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) setTimeout(function() { 1415d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) changeVisibility(hole, true); 1425d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) }, 0); 14358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) }, 14458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 14558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) /** 146f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) * Adds transparent round hole to background. 147f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) * @param {number} x X coordinate of circle center. 148f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) * @param {number} y Y coordinate of circle center. 149f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) * @param {number} radius Radius of circle. 150f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) */ 151f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) addRoundHole: function(x, y, radius) { 152f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) var hole = this.roundHolePattern_.cloneNode(); 153f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) hole.setAttribute('cx', x); 154f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) hole.setAttribute('cy', y); 155f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) hole.setAttribute('r', radius); 156f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) this.mask_.appendChild(hole); 1575d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) setTimeout(function() { 1585d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) changeVisibility(hole, true); 1595d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) }, 0); 160f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) }, 161f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) 162f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) /** 16358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) * Removes all holes previously added by |addHole|. 1645d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) * @param {function=} opt_onHolesRemoved Called after all holes have been 1655d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) * hidden. 16658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) */ 1675d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) removeHoles: function(opt_onHolesRemoved) { 1685d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) var mask = this.mask_; 1695d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) var holes = Array.prototype.slice.call( 1705d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) mask.getElementsByClassName('hole')); 1715d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) var holesLeft = holes.length; 1725d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) if (!holesLeft) { 1735d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) if (opt_onHolesRemoved) 1745d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) opt_onHolesRemoved(); 1755d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) return; 17658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) } 1775d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) holes.forEach(function(hole) { 1785d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) changeVisibility(hole, false, this.getDefaultTransitionDuration(), 1795d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) function() { 1805d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) mask.removeChild(hole); 1815d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) --holesLeft; 1825d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) if (!holesLeft && opt_onHolesRemoved) 1835d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) opt_onHolesRemoved(); 1845d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) }); 1855d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) }.bind(this)); 1865d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) }, 1875d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) 1885d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) /** 1895d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) * Hides currently active step and notifies chrome after step has been 1905d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) * hidden. 1915d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) */ 1925d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) hideCurrentStep: function() { 1935d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) assert(this.currentStep_); 1945d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) this.doHideCurrentStep_(function(name) { 1955d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) chrome.send('stepHidden', [name]); 1965d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) }); 1975d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) }, 1985d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) 1995d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) /** 2005d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) * Hides currently active step. 2015d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) * @param {function(string)=} opt_onStepHidden Called after step has been 2025d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) * hidden. 2035d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) */ 2045d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) doHideCurrentStep_: function(opt_onStepHidden) { 2055d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) if (!this.currentStep_) { 2065d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) if (opt_onStepHidden) 2075d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) opt_onStepHidden(); 2085d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) return; 2095d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) } 2105d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) var name = this.currentStep_.getName(); 2115d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) this.currentStep_.hide(true, function() { 2125d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) this.currentStep_ = null; 2135d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) if (opt_onStepHidden) 2145d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) opt_onStepHidden(name); 2155d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) }.bind(this)); 21658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) }, 21758537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 21858537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) /** 21958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) * Shows step with given name in given position. 22058537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) * @param {string} name Name of step. 22158537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) * @param {object} position Optional parameter with optional fields |top|, 22258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) * |right|, |bottom|, |left| used for step positioning. 223f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) * @param {Array} pointWithOffset Optional parameter for positioning 224f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) * bubble. Contains [x, y, offset], where (x, y) - point to which bubble 225f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) * points, offset - distance between arrow and point. 22658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) */ 227f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) showStep: function(name, position, pointWithOffset) { 2285d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) assert(!this.currentStep_); 22958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) if (!this.steps_.hasOwnProperty(name)) 23058537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) throw Error('Step "' + name + '" not found.'); 23158537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) var step = this.steps_[name]; 232f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) if (position) 233f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) step.setPosition(position); 234f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) if (pointWithOffset) 235f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) step.setPointsTo(pointWithOffset.slice(0, 2), pointWithOffset[2]); 2365d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) step.show(true, function(step) { 2375d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) step.focusDefaultControl(); 2385d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) this.currentStep_ = step; 2395d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) chrome.send('stepShown', [name]); 2405d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) }.bind(this)); 241f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) }, 242f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) 243f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) /** 244f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) * Sets visibility of the background. 245f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) * @param {boolean} visibility Whether background should be visible. 2465d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) * @param {function()=} opt_onCompletion Called after visibility has 2475d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) * changed. 248f2477e01787aa58f445919b809d89e252beef54fTorne (Richard Coles) */ 2495d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) setBackgroundVisible: function(visible, opt_onCompletion) { 2505d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) changeVisibility(this.backgroundContainer_, visible, 2515d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) this.getBackgroundTransitionDuration(), opt_onCompletion); 2525d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) }, 2535d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) 2545d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) /** 2555d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) * Returns default duration of animated transitions, in ms. 2565d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) */ 2575d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) getDefaultTransitionDuration: function() { 2585d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) return this.transitionsEnabled_ ? DEFAULT_TRANSITION_DURATION_MS : 0; 2595d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) }, 2605d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) 2615d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) /** 2625d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) * Returns duration of transitions of background shield, in ms. 2635d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) */ 2645d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) getBackgroundTransitionDuration: function() { 2655d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) return this.transitionsEnabled_ ? BG_TRANSITION_DURATION_MS : 0; 26658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) } 26758537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) }; 26858537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)}); 26958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 27058537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)/** 27158537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) * Initializes UI. 27258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) */ 27358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)window.onload = function() { 27458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) cr.FirstRun.initialize(); 27558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)}; 276