demo/repl.html: Add the ability to show the full options list. (one-click god-mode for the peons?)

demo/repl.html: Add the ability to show the full options list.

BUG=None
TEST=None

[usrbincc, 2013-03-13 20:46:10]

Patch order at a glance:

demo/repl.html: Add the ability to show the full options list.
https://codereview.appspot.com/7329050/
demo/repl.html: Remember options in the query string.
https://codereview.appspot.com/7777050/

#--cut--
dl_check() {
  local f=$(basename $1)
  test -e $f || curl -sO $1
  openssl sha1 < $f | grep -q "= $2" && return 0
  echo sha1 mismatch!
  return 1
}

git checkout dbaacc7efc9fd56b   # recent HEAD for branch master

git checkout -b issue7777050-repl-querystring

### demo/repl.html: Add the ability to show the full options list.
dl_check https://codereview.appspot.com/download/issue7329050_2001.diff \
  f9030939bfe956c8 && git apply issue7329050_2001.diff && make test
#git commit -m issue7329050_2001.diff

### demo/repl.html: Remember options in the query string.
dl_check https://codereview.appspot.com/download/issue7777050_1.diff \
  f2adb952e136a9f0 && git apply issue7777050_1.diff && make test
#git commit -m issue7777050_1.diff
#--cut--

[arv, 2013-03-13 21:46:04]

I don't want us to expose full options in the list. You can use an Option
comment which will be encoded in the URL.


On Wed, Mar 13, 2013 at 1:46 PM, <usrbincc@yahoo.com> wrote:

> Reviewers: arv-chromium, slightlylate,
>
> Message:
> Patch order at a glance:
>
> demo/repl.html: Add the ability to show the full options list.
>
https://codereview.appspot.**com/7329050/<https://codereview.appspot.com/7329...
> demo/repl.html: Remember options in the query string.
>
https://codereview.appspot.**com/7777050/<https://codereview.appspot.com/7777...
>
> #--cut--
> dl_check() {
>   local f=$(basename $1)
>   test -e $f || curl -sO $1
>   openssl sha1 < $f | grep -q "= $2" && return 0
>   echo sha1 mismatch!
>   return 1
> }
>
> git checkout dbaacc7efc9fd56b   # recent HEAD for branch master
>
> git checkout -b issue7777050-repl-querystring
>
> ### demo/repl.html: Add the ability to show the full options list.
> dl_check https://codereview.appspot.**com/download/issue7329050_**
> 2001.diff <https://codereview.appspot.com/download/issue7329050_2001.diff>
> \
>   f9030939bfe956c8 && git apply issue7329050_2001.diff && make test
> #git commit -m issue7329050_2001.diff
>
> ### demo/repl.html: Remember options in the query string.
> dl_check
https://codereview.appspot.**com/download/issue7777050_1.**diff<https://coder...
>   f2adb952e136a9f0 && git apply issue7777050_1.diff && make test
> #git commit -m issue7777050_1.diff
> #--cut--
>
>
> Description:
> demo/repl.html: Add the ability to show the full options list.
>
> BUG=None
> TEST=None
>
>
> Please review this at
https://codereview.appspot.**com/7329050/<https://codereview.appspot.com/7329...
>
> Affected files:
>   M demo/repl.html
>
>
> Index: demo/repl.html
> diff --git a/demo/repl.html b/demo/repl.html
> index ffc7eec3df7b0ea37bc7c60a45ec64**568a846113..**
> 0fc543a18744aa0af39c671fa3d7f1**2b79137f27 100644
> --- a/demo/repl.html
> +++ b/demo/repl.html
> @@ -123,6 +123,7 @@ pre,
>  <div class="options" hidden>
>  <label><input class="eval" type="checkbox" checked>Evaluate</label>
>  <label><input class="output" type="checkbox" checked>Show generated
> code</label>
> +<label><input class="show-all-toggle" type="checkbox">Show all
> options</label>
>  <hr>
>  <div class="traceur-options"></div>
>  <button class="all-on">All Options On</button>
> @@ -297,9 +298,19 @@ pre,
>      'validate'
>    ];
>
> +  var showAllOpts = false;
> +
>    function createOptions() {
>      var optionsDiv = document.querySelector('.**traceur-options');
>      optionsDiv.textContent = '';
> +    if (showAllOpts) {
> +      Object.keys(traceur.options).**forEach(function(name) {
> +        if (options.lastIndexOf(name) >= 0)
> +          return;
> +        optionsDiv.appendChild(**createOptionRow(name));
> +      });
> +      optionsDiv.appendChild(**document.createElement('hr'));
> +    }
>      options.forEach(function(name) {
>        optionsDiv.appendChild(**createOptionRow(name));
>      });
> @@ -320,10 +331,16 @@ pre,
>        });
>
>    document.querySelector('.all-**off').addEventListener('click'**,
> -    function() {
> -      traceur.options.reset(true);
> -      rebuildOptions();
> -    });
> +      function() {
> +        traceur.options.reset(true);
> +        rebuildOptions();
> +      });
> +
> +  document.querySelector('.show-**all-toggle').addEventListener(**
> 'click',
> +      function() {
> +        showAllOpts = !showAllOpts;
> +        rebuildOptions();
> +      });
>
>    document.querySelector('.**option-button').**addEventListener('click',
>        function() {
>
>
>


-- 
erik

[slightlylate, 2013-03-13 21:59:21]

On Wednesday, March 13, 2013, Erik Arvidsson wrote:

> I don't want us to expose full options in the list. You can use an Option
> comment which will be encoded in the URL.
>

I don't think that the "Option" comments are great. They're certainly not
discoverable. Would be great if you had a list of 'em on the page if we're
not going to provide the checkboxes.


> On Wed, Mar 13, 2013 at 1:46 PM, <usrbincc@yahoo.com <javascript:_e({},
> 'cvml', 'usrbincc@yahoo.com');>> wrote:
>
>> Reviewers: arv-chromium, slightlylate,
>>
>> Message:
>> Patch order at a glance:
>>
>> demo/repl.html: Add the ability to show the full options list.
>>
https://codereview.appspot.**com/7329050/<https://codereview.appspot.com/7329...
>> demo/repl.html: Remember options in the query string.
>>
https://codereview.appspot.**com/7777050/<https://codereview.appspot.com/7777...
>>
>> #--cut--
>> dl_check() {
>>   local f=$(basename $1)
>>   test -e $f || curl -sO $1
>>   openssl sha1 < $f | grep -q "= $2" && return 0
>>   echo sha1 mismatch!
>>   return 1
>> }
>>
>> git checkout dbaacc7efc9fd56b   # recent HEAD for branch master
>>
>> git checkout -b issue7777050-repl-querystring
>>
>> ### demo/repl.html: Add the ability to show the full options list.
>> dl_check https://codereview.appspot.**com/download/issue7329050_**
>> 2001.diff<https://codereview.appspot.com/download/issue7329050_2001.diff>
>> \
>>   f9030939bfe956c8 && git apply issue7329050_2001.diff && make test
>> #git commit -m issue7329050_2001.diff
>>
>> ### demo/repl.html: Remember options in the query string.
>> dl_check
https://codereview.appspot.**com/download/issue7777050_1.**diff<https://coder...
>>   f2adb952e136a9f0 && git apply issue7777050_1.diff && make test
>> #git commit -m issue7777050_1.diff
>> #--cut--
>>
>>
>> Description:
>> demo/repl.html: Add the ability to show the full options list.
>>
>> BUG=None
>> TEST=None
>>
>>
>> Please review this at
https://codereview.appspot.**com/7329050/<https://codereview.appspot.com/7329...
>>
>> Affected files:
>>   M demo/repl.html
>>
>>
>> Index: demo/repl.html
>> diff --git a/demo/repl.html b/demo/repl.html
>> index ffc7eec3df7b0ea37bc7c60a45ec64**568a846113..**
>> 0fc543a18744aa0af39c671fa3d7f1**2b79137f27 100644
>> --- a/demo/repl.html
>> +++ b/demo/repl.html
>> @@ -123,6 +123,7 @@ pre,
>>  <div class="options" hidden>
>>  <label><input class="eval" type="checkbox" checked>Evaluate</label>
>>  <label><input class="output" type="checkbox" checked>Show generated
>> code</label>
>> +<label><input class="show-all-toggle" type="checkbox">Show all
>> options</label>
>>  <hr>
>>  <div class="traceur-options"></div>
>>  <button class="all-on">All Options On</button>
>> @@ -297,9 +298,19 @@ pre,
>>      'validate'
>>    ];
>>
>> +  var showAllOpts = false;
>> +
>>    function createOptions() {
>>      var optionsDiv = document.querySelector('.**traceur-options');
>>      optionsDiv.textContent = '';
>> +    if (showAllOpts) {
>> +      Object.keys(traceur.options).**forEach(function(name) {
>> +        if (options.lastIndexOf(name) >= 0)
>> +          return;
>> +        optionsDiv.appendChild(**createOptionRow(name));
>> +      });
>> +      optionsDiv.appendChild(**document.createElement('hr'));
>> +    }
>>      options.forEach(function(name) {
>>        optionsDiv.appendChild(**createOptionRow(name));
>>      });
>> @@ -320,10 +331,16 @@ pre,
>>        });
>>
>>    document.querySelector('.all-**off').addEventListener('click'**,
>> -    function() {
>> -      traceur.options.reset(true);
>> -      rebuildOptions();
>> -    });
>> +      function() {
>> +        traceur.options.reset(true);
>> +        rebuildOptions();
>> +      });
>> +
>> +  document.querySelector('.show-**all-toggle').addEventListener(**
>> 'click',
>> +      function() {
>> +        showAllOpts = !showAllOpts;
>> +        rebuildOptions();
>> +      });
>>
>>    document.querySelector('.**option-button').**addEventListener('click',
>>        function() {
>>
>>
>>
>
>
> --
> erik
>
>
>

[arv, 2013-03-13 22:02:47]

The point that we wanted to make clear is that Traceur only has one flag --
experimental. We don't want people to have to think of all of these
individual features and have to keep track of what is on or not.


On Wed, Mar 13, 2013 at 2:59 PM, Alex Russell <slightlyoff@google.com>wrote:

> On Wednesday, March 13, 2013, Erik Arvidsson wrote:
>
>> I don't want us to expose full options in the list. You can use an Option
>> comment which will be encoded in the URL.
>>
>
> I don't think that the "Option" comments are great. They're certainly not
> discoverable. Would be great if you had a list of 'em on the page if we're
> not going to provide the checkboxes.
>
>
>> On Wed, Mar 13, 2013 at 1:46 PM, <usrbincc@yahoo.com> wrote:
>>
>>> Reviewers: arv-chromium, slightlylate,
>>>
>>> Message:
>>> Patch order at a glance:
>>>
>>> demo/repl.html: Add the ability to show the full options list.
>>>
https://codereview.appspot.**com/7329050/<https://codereview.appspot.com/7329...
>>> demo/repl.html: Remember options in the query string.
>>>
https://codereview.appspot.**com/7777050/<https://codereview.appspot.com/7777...
>>>
>>> #--cut--
>>> dl_check() {
>>>   local f=$(basename $1)
>>>   test -e $f || curl -sO $1
>>>   openssl sha1 < $f | grep -q "= $2" && return 0
>>>   echo sha1 mismatch!
>>>   return 1
>>> }
>>>
>>> git checkout dbaacc7efc9fd56b   # recent HEAD for branch master
>>>
>>> git checkout -b issue7777050-repl-querystring
>>>
>>> ### demo/repl.html: Add the ability to show the full options list.
>>> dl_check https://codereview.appspot.**com/download/issue7329050_**
>>> 2001.diff<https://codereview.appspot.com/download/issue7329050_2001.diff>
>>> \
>>>   f9030939bfe956c8 && git apply issue7329050_2001.diff && make test
>>> #git commit -m issue7329050_2001.diff
>>>
>>> ### demo/repl.html: Remember options in the query string.
>>> dl_check
https://codereview.appspot.**com/download/issue7777050_1.**diff<https://coder...
>>>   f2adb952e136a9f0 && git apply issue7777050_1.diff && make test
>>> #git commit -m issue7777050_1.diff
>>> #--cut--
>>>
>>>
>>> Description:
>>> demo/repl.html: Add the ability to show the full options list.
>>>
>>> BUG=None
>>> TEST=None
>>>
>>>
>>> Please review this at
https://codereview.appspot.**com/7329050/<https://codereview.appspot.com/7329...
>>>
>>> Affected files:
>>>   M demo/repl.html
>>>
>>>
>>> Index: demo/repl.html
>>> diff --git a/demo/repl.html b/demo/repl.html
>>> index ffc7eec3df7b0ea37bc7c60a45ec64**568a846113..**
>>> 0fc543a18744aa0af39c671fa3d7f1**2b79137f27 100644
>>> --- a/demo/repl.html
>>> +++ b/demo/repl.html
>>> @@ -123,6 +123,7 @@ pre,
>>>  <div class="options" hidden>
>>>  <label><input class="eval" type="checkbox" checked>Evaluate</label>
>>>  <label><input class="output" type="checkbox" checked>Show generated
>>> code</label>
>>> +<label><input class="show-all-toggle" type="checkbox">Show all
>>> options</label>
>>>  <hr>
>>>  <div class="traceur-options"></div>
>>>  <button class="all-on">All Options On</button>
>>> @@ -297,9 +298,19 @@ pre,
>>>      'validate'
>>>    ];
>>>
>>> +  var showAllOpts = false;
>>> +
>>>    function createOptions() {
>>>      var optionsDiv = document.querySelector('.**traceur-options');
>>>      optionsDiv.textContent = '';
>>> +    if (showAllOpts) {
>>> +      Object.keys(traceur.options).**forEach(function(name) {
>>> +        if (options.lastIndexOf(name) >= 0)
>>> +          return;
>>> +        optionsDiv.appendChild(**createOptionRow(name));
>>> +      });
>>> +      optionsDiv.appendChild(**document.createElement('hr'));
>>> +    }
>>>      options.forEach(function(name) {
>>>        optionsDiv.appendChild(**createOptionRow(name));
>>>      });
>>> @@ -320,10 +331,16 @@ pre,
>>>        });
>>>
>>>    document.querySelector('.all-**off').addEventListener('click'**,
>>> -    function() {
>>> -      traceur.options.reset(true);
>>> -      rebuildOptions();
>>> -    });
>>> +      function() {
>>> +        traceur.options.reset(true);
>>> +        rebuildOptions();
>>> +      });
>>> +
>>> +  document.querySelector('.show-**all-toggle').addEventListener(**
>>> 'click',
>>> +      function() {
>>> +        showAllOpts = !showAllOpts;
>>> +        rebuildOptions();
>>> +      });
>>>
>>>    document.querySelector('.**option-button').**
>>> addEventListener('click',
>>>        function() {
>>>
>>>
>>>
>>
>>
>> --
>> erik
>>
>>
>>


-- 
erik

[slightlylate, 2013-03-13 22:07:05]

I can buy that. Thanks.


On Wed, Mar 13, 2013 at 3:02 PM, Erik Arvidsson <arv@chromium.org> wrote:

> The point that we wanted to make clear is that Traceur only has one flag
> -- experimental. We don't want people to have to think of all of these
> individual features and have to keep track of what is on or not.
>
>
> On Wed, Mar 13, 2013 at 2:59 PM, Alex Russell <slightlyoff@google.com>wrote:
>
>> On Wednesday, March 13, 2013, Erik Arvidsson wrote:
>>
>>> I don't want us to expose full options in the list. You can use an
>>> Option comment which will be encoded in the URL.
>>>
>>
>> I don't think that the "Option" comments are great. They're certainly not
>> discoverable. Would be great if you had a list of 'em on the page if we're
>> not going to provide the checkboxes.
>>
>>
>>> On Wed, Mar 13, 2013 at 1:46 PM, <usrbincc@yahoo.com> wrote:
>>>
>>>> Reviewers: arv-chromium, slightlylate,
>>>>
>>>> Message:
>>>> Patch order at a glance:
>>>>
>>>> demo/repl.html: Add the ability to show the full options list.
>>>>
https://codereview.appspot.**com/7329050/<https://codereview.appspot.com/7329...
>>>> demo/repl.html: Remember options in the query string.
>>>>
https://codereview.appspot.**com/7777050/<https://codereview.appspot.com/7777...
>>>>
>>>> #--cut--
>>>> dl_check() {
>>>>   local f=$(basename $1)
>>>>   test -e $f || curl -sO $1
>>>>   openssl sha1 < $f | grep -q "= $2" && return 0
>>>>   echo sha1 mismatch!
>>>>   return 1
>>>> }
>>>>
>>>> git checkout dbaacc7efc9fd56b   # recent HEAD for branch master
>>>>
>>>> git checkout -b issue7777050-repl-querystring
>>>>
>>>> ### demo/repl.html: Add the ability to show the full options list.
>>>> dl_check https://codereview.appspot.**com/download/issue7329050_**
>>>> 2001.diff<https://codereview.appspot.com/download/issue7329050_2001.diff>
>>>> \
>>>>   f9030939bfe956c8 && git apply issue7329050_2001.diff && make test
>>>> #git commit -m issue7329050_2001.diff
>>>>
>>>> ### demo/repl.html: Remember options in the query string.
>>>> dl_check https://codereview.appspot.**com/download/issue7777050_1.**
>>>> diff <https://codereview.appspot.com/download/issue7777050_1.diff> \
>>>>   f2adb952e136a9f0 && git apply issue7777050_1.diff && make test
>>>> #git commit -m issue7777050_1.diff
>>>> #--cut--
>>>>
>>>>
>>>> Description:
>>>> demo/repl.html: Add the ability to show the full options list.
>>>>
>>>> BUG=None
>>>> TEST=None
>>>>
>>>>
>>>> Please review this at
https://codereview.appspot.**com/7329050/<https://codereview.appspot.com/7329...
>>>>
>>>> Affected files:
>>>>   M demo/repl.html
>>>>
>>>>
>>>> Index: demo/repl.html
>>>> diff --git a/demo/repl.html b/demo/repl.html
>>>> index ffc7eec3df7b0ea37bc7c60a45ec64**568a846113..**
>>>> 0fc543a18744aa0af39c671fa3d7f1**2b79137f27 100644
>>>> --- a/demo/repl.html
>>>> +++ b/demo/repl.html
>>>> @@ -123,6 +123,7 @@ pre,
>>>>  <div class="options" hidden>
>>>>  <label><input class="eval" type="checkbox" checked>Evaluate</label>
>>>>  <label><input class="output" type="checkbox" checked>Show generated
>>>> code</label>
>>>> +<label><input class="show-all-toggle" type="checkbox">Show all
>>>> options</label>
>>>>  <hr>
>>>>  <div class="traceur-options"></div>
>>>>  <button class="all-on">All Options On</button>
>>>> @@ -297,9 +298,19 @@ pre,
>>>>      'validate'
>>>>    ];
>>>>
>>>> +  var showAllOpts = false;
>>>> +
>>>>    function createOptions() {
>>>>      var optionsDiv = document.querySelector('.**traceur-options');
>>>>      optionsDiv.textContent = '';
>>>> +    if (showAllOpts) {
>>>> +      Object.keys(traceur.options).**forEach(function(name) {
>>>> +        if (options.lastIndexOf(name) >= 0)
>>>> +          return;
>>>> +        optionsDiv.appendChild(**createOptionRow(name));
>>>> +      });
>>>> +      optionsDiv.appendChild(**document.createElement('hr'));
>>>> +    }
>>>>      options.forEach(function(name) {
>>>>        optionsDiv.appendChild(**createOptionRow(name));
>>>>      });
>>>> @@ -320,10 +331,16 @@ pre,
>>>>        });
>>>>
>>>>    document.querySelector('.all-**off').addEventListener('click'**,
>>>> -    function() {
>>>> -      traceur.options.reset(true);
>>>> -      rebuildOptions();
>>>> -    });
>>>> +      function() {
>>>> +        traceur.options.reset(true);
>>>> +        rebuildOptions();
>>>> +      });
>>>> +
>>>> +  document.querySelector('.show-**all-toggle').addEventListener(**
>>>> 'click',
>>>> +      function() {
>>>> +        showAllOpts = !showAllOpts;
>>>> +        rebuildOptions();
>>>> +      });
>>>>
>>>>    document.querySelector('.**option-button').**
>>>> addEventListener('click',
>>>>        function() {
>>>>
>>>>
>>>>
>>>
>>>
>>> --
>>> erik
>>>
>>>
>>>
>
>
> --
> erik
>
>
>

[usrbincc, 2013-03-13 22:13:27]

If not a 'Show all options' checkbox for anyone to click, any chance of
adding a "cheat code" to expose the full set of options?

Sometimes it's nice to immediately see the effect with and without a
given transformation step. For dev at least, not really general use.

Sorry, I have to run. Will check back later.

[arv, 2013-03-13 22:31:17]

On Wed, Mar 13, 2013 at 3:13 PM, <usrbincc@yahoo.com> wrote:

> If not a 'Show all options' checkbox for anyone to click, any chance of
> adding a "cheat code" to expose the full set of options?
>

↑↑↓↓←→←→BA


> Sometimes it's nice to immediately see the effect with and without a
> given transformation step. For dev at least, not really general use.
>
> Sorry, I have to run. Will check back later.
>
>
>
https://codereview.appspot.**com/7329050/<https://codereview.appspot.com/7329...
>



-- 
erik

[usrbincc, 2013-03-14 18:23:45]

> ↑↑↓↓←→←→BA

For best results, use Chrome. And don't stare too hard at the diff.

#--cut--
git checkout 72fa4833f47d8c27   # recent HEAD for branch master

dl_check() {
  local f=$(basename $1)
  test -e $f || curl -sO $1
  openssl sha1 < $f | grep -q "= $2" && return 0
  echo sha1 mismatch!
  return 1
}

git checkout -b issue7329050-repl-adv-opt-cheatcode

dl_check https://codereview.appspot.com/download/issue7329050_11001.diff \
  66a70a910f34674a && git apply issue7329050_11001.diff &&
    echo open demo/repl.html
#--cut--

----

I'll let this one go, since 'Options:' covers most of the uses -- you
usually just want to set an option sticky and forget it. And you can
always alternately undo-redo in the textarea in order to get the
checkbox effect.

  Sort of. You have to specify with 'true' and then 'false' and then
  undo-redo that.

Can't have them all, and I *did* get colors in 'repl.js'.

----

The query string patch may still be useful for things that aren't in
'Options:' like 'evaluate' and 'Show generated code'. I'll put that
patch on the back burner and come back to it later. The best solution
might be to update 'Options:' to handle those few cases.

----

How about showing the "strict semicolons" option at least? I think
that'd be useful to have at your fingertips, and wouldn't really confuse
anyone.

[arv, 2013-03-14 19:37:04]

LGTM

https://codereview.appspot.com/7329050/diff/11001/demo/repl.html
File demo/repl.html (right):

https://codereview.appspot.com/7329050/diff/11001/demo/repl.html#newcode115
demo/repl.html:115: -moz-transition:color 1s ease-in-out, -moz-transform 2s;
You only need transition and -webkit-transition.

https://codereview.appspot.com/7329050/diff/11001/demo/repl.html#newcode383
demo/repl.html:383: var code = 'UUDDLRLRBA'.split('').map(function(k) {
hehe... I was joking but LGTM!

[arv, 2013-03-14 19:39:41]

https://codereview.appspot.com/7329050/diff/11001/demo/repl.html
File demo/repl.html (right):

https://codereview.appspot.com/7329050/diff/11001/demo/repl.html#newcode115
demo/repl.html:115: -moz-transition:color 1s ease-in-out, -moz-transform 2s;
transform is not being used

[arv, 2013-03-14 19:42:21]

Committed as 02e3ae006dbd9630d3361314a8800baf20b0821f

[usrbincc, 2013-03-14 21:29:28]

On 2013/03/14 19:42:21, arv-chromium wrote:
> Committed as 02e3ae006dbd9630d3361314a8800baf20b0821f

Oh no, I just realized that I forgot to take the checkbox out!

Some 'god mode' if you just need to hit a checkbox. Though you don't get
the lo-fi lava effect.

[usrbincc, 2013-03-30 16:35:44]

Note: I'm just cleaning out old issues. New patches will go through
github once I get up to speed on it.

----

Sorry for the issue necromancy. Just wanted to confirm that LGTMing the
hole in our super-secret security was intentional. (I accidentally left
the checkbox in for the "entertainment only" patch)

If it was intentional, you can just ignore this message and I'll close
this issue in a few days.

[arv, 2013-04-02 17:46:56]

Lets leave the checkbox for now